Spirograph Generator

What this tool does

This spirograph generator recreates the classic drawing toy as exact mathematics. A fixed ring holds a smaller gear; a pen sits at a chosen point on that gear, and as the gear rolls around the ring the pen traces a looping, symmetrical curve. Instead of plastic wheels you get sliders: change the ring radius, the gear radius, the pen offset and the number of revolutions, and the curve redraws instantly on the canvas. The result can be saved as a PNG image or as a scalable SVG vector file.

The page opens with a finished pattern already on screen, so you can start by nudging a slider and watching how each number reshapes the curve. There is nothing to install and no sign-up — it is a single page that runs entirely in your browser.

When you’d use it

Spirograph curves are quietly useful in a lot of creative work. Designers use them as decorative backgrounds, logo accents and section dividers. Teachers bring them into geometry and trigonometry lessons because the shapes make abstract ideas about ratios and periodic motion visible and playful. Hobbyists export them for colouring pages, embroidery and string-art templates, or feed the SVG into a pen plotter or laser cutter. Game makers use tight, web-like patterns as mandalas, portal effects or UI flourishes. Even a plain presentation slide gains character with a soft loop pattern behind the title. Because the output is a clean vector path, it slots into almost any of those pipelines without fuss.

How to use it

1. The tool loads with a default pattern. Choose Inside for a hypotrochoid (gear rolls inside the ring) or Outside for an epitrochoid.
2. Drag Ring radius, Gear radius and Pen offset to reshape the curve. Small changes to the gear radius have the biggest effect on how many petals or loops appear.
3. Raise Revolutions until the pattern closes — the line under the canvas tells you roughly how many turns that takes.
4. Set Line thickness for a fine, web-like look or a bolder ribbon.
5. Pick a Stroke colour and a Background colour with the swatches.
6. Press Randomize for a surprise design, or tap a Preset for a known good starting point, then fine-tune from there.
7. Use Download PNG for a ready image or Download SVG for an infinitely scalable vector file.

Tips for great results

The most striking patterns come from gear radii that do not divide evenly into the ring radius — those ratios produce the dense, star-like webs. For gentle, open loops, pick a gear radius close to the ring radius and keep revolutions low. A large pen offset pushes the curve outward into sharp points; a small offset keeps it rounded and calm. For print or cutting, thin lines and a high revolution count give an intricate result, while thick lines and few loops read better at small sizes such as an icon. Try a light background with a dark stroke for paper-friendly artwork, and the reverse for screens. If you want a layered look, generate two curves with different settings and stack their SVGs in a vector editor. Pair this with the gradient generator for a colourful backdrop, or the colour palette generator to choose a stroke and background that work well together. The pattern generator and CSS doodle generator are good companions when you need a repeating texture instead of a single curve.

Privacy

Everything here happens on your device. The curve is computed by JavaScript in your browser and rendered on a local canvas; no parameters or images are uploaded, nothing is saved on a server, and there is no tracking of the designs you create. Once the page has loaded you can keep generating patterns even offline. The only files that ever leave the page are the PNG or SVG downloads you choose to save yourself.