Loading page
About this tool
Generate customizable spirograph patterns and export them as PNG.
The Spirograph Generator plots hypotrochoid and epitrochoid curves on a 640×640 HTML5 canvas using the classic roulette equations — x = (R−r)·cos θ + d·cos(((R−r)/r)·θ) for a wheel rolling inside the circle, with (R+r) substituted throughout for one rolling outside — and joins each sample with a canvas lineTo. It sweeps θ through 40 full revolutions at your chosen Drawing Step (0.02 radians by default), so a smaller step means more points and a smoother line. A third Harmonic mode replaces the (R±r)/r frequency with a plain Inner Loop multiplier, producing Lissajous-style wave patterns instead of petals. Everything renders locally: the source makes no network requests, and exports are built as canvas data URLs or blobs, so nothing you draw is ever uploaded.
Open Spirograph Generator on AltFTool — it loads instantly in your browser.
Choose a Pattern Type — Hypotrochoid, Epitrochoid or Harmonic — or open Style Presets and load one of the 20 ready-made designs, which sets every parameter at once.
Tune Outer Radius, Inner Radius, Pen Distance, Outer Loop, Inner Loop, Drawing Step and Line Width, then set your stroke colour, background and optional multi-line effect.
Hit Play to watch the curve draw, zoom between 40% and 300% with the +/− buttons or a two-finger pinch, then pick PNG, JPG, SVG or Video (WebM) and press Export.
Hypotrochoid (wheel inside), Epitrochoid (wheel outside) and Harmonic, which drops the rolling-radius frequency for a free Inner Loop multiplier.
SVG export writes an actual <path> of M/L commands at two-decimal precision in a 640×640 viewBox, so prints and cutting files stay sharp at any scale.
Classic Flower, Complex Mandala, Galaxy Swirl and 17 more each set mode, both radii, pen distance, step, line width, loop count and colour in one click.
The tool is a client-side React component with no fetch calls anywhere in its source — no account, no upload, no watermark on exports.
A spirograph traces a hypotrochoid: x = (R−r)·cos θ + d·cos(((R−r)/r)·θ) and y = (R−r)·sin θ − d·sin(((R−r)/r)·θ), where R is the fixed outer radius, r the rolling inner radius and d the pen's distance from the inner wheel's centre. Swap (R−r) for (R+r) and you get the epitrochoid, the version where the wheel rolls around the outside. This tool evaluates exactly those equations, with separate Outer Loop and Inner Loop multipliers on θ in each term.
A hypotrochoid is traced by a pen on a small circle rolling inside a larger one; an epitrochoid rolls around the outside. In practice, inside patterns read as flowers, rosettes and mandalas, while outside patterns read as stars, sunbursts and pinwheels. Switch between them with the Pattern Type tabs — every other parameter carries over, so you can compare the same settings both ways.
Yes. Pick SVG in the export dropdown and you get a true vector file — one <path> element per line, with a 640×640 viewBox and your background as a filled rect — which scales to any print or cutting size without softening. PNG and JPG are also available but are fixed at the 640×640 canvas size, with JPG encoded at 0.95 quality.
Yes — free, with no signup, no account and no watermark. The whole tool runs as client-side JavaScript on an HTML canvas; there are no API or fetch calls in its source, and exports are generated in the browser and saved straight to your downloads folder.
Because a spirograph only closes when the radius ratio reduces to a simple fraction. The generator always plots 40 full revolutions of θ, so if (R−r)/r works out to something like 3/7 the path retraces itself and closes early; if the ratio is close to irrational, each pass lands slightly off the previous one and the figure fills in as dense lace. Nudge the Inner Radius up or down by one or two units to snap it back to a closed figure.
Lower the Drawing Step. It is the θ increment between plotted points — 0.02 radians by default, editable in 0.001 increments — so halving it roughly doubles the number of line segments and smooths every curve. Raising it gives a faster, deliberately angular sketch. Line Width sets stroke thickness separately, in 0.1 px steps.
Yes. Choose Video (WebM), and the tool captures the live canvas at 30 fps via canvas.captureStream and records roughly six seconds with MediaRecorder using the VP9 codec, then downloads a .webm file. This needs a browser that supports video/webm;codecs=vp9 in MediaRecorder — Chrome, Edge and Firefox do; Safari's support is limited. For a still image, use PNG, JPG or SVG instead.
Turn on Multi-line Pattern and set a Line Count. The tool draws that many copies of the curve, each phase-shifted by 2π divided by the count, and paints the later half of them in your Secondary Colour. Stroke colour, secondary colour and background are all full colour pickers, backed by 10 quick-pick swatches.