Draw spirograph and harmonograph patterns online. Adjust ratio, radii, arms, trails and damping, watch it render live, export PNG or video. Free.
Knobs patch the running animation live. A few (marked in the code as baked-in values like particle counts) restart the preview.
Two stacked radii per arm, plus a fading trail. Change ratio.
Your code runs in a sandboxed frame with no access to this page, and it is never sent to a server. three.js demos load the library from jsDelivr; the rest need nothing but the browser.
This generator traces the curve family a physical Spirograph toy draws — hypotrochoids and epitrochoids — from live sliders, and adds a damping control that turns the same equation into a harmonograph. It runs on a canvas in your browser, with the source code visible and editable beside the drawing, and it exports a PNG of whatever is on screen. Nothing is uploaded and nothing is stored.
A Spirograph is a small toothed wheel rolling around the inside (or outside) of a larger toothed ring, with a pen through a hole somewhere in the small wheel. The pen's path is a trochoid: rolling inside gives a hypotrochoid, rolling outside gives an epitrochoid.
The curve is easier to think about as two rotations stacked. One arm of length r1 turns about the centre at speed 1. A second arm of length r2 is attached to its tip and turns at speed ratio. The pen is on the end of the second arm:
x = r1 · cos(t) + r2 · cos(ratio · t)
y = r1 · sin(t) + r2 · sin(ratio · t)
That is the whole generator. It is exactly the classical trochoid formula with the parameters regrouped, which is worth spelling out because most Spirograph references are written in terms of a fixed ring radius R, a rolling wheel radius r, and a pen offset d:
| Classical parameter | Meaning | This tool's control |
|---|---|---|
R − r (hypo) or R + r (epi) | Distance from the centre to the rolling wheel's centre | Outer radius (r1) |
d | Pen offset from the rolling wheel's centre | Inner radius (r2) |
R / r | Gear ratio — the thing that decides the shape | Frequency ratio, via |ratio − 1| |
A negative frequency ratio counter-rotates the second arm, which flips the sign of the second sine term and gives you the hypotrochoid — the classic toy figure, wheel inside ring. A positive ratio gives the epitrochoid, wheel rolling outside the ring. The default is −3.
This is the question people actually arrive with, and it has an exact answer. Write the frequency ratio as a fraction p/q in lowest terms. Then:
q full revolutions of the outer arm. Rational ratio, closed figure — always.Worked, and checkable against the tool:
| Ratio | As p/q | Revolutions to close | Lobes |
|---|---|---|---|
| −3 | −3 / 1 | 1 | 4 |
| −5 | −5 / 1 | 1 | 6 |
| −8 | −8 / 1 | 1 | 9 |
| 2 | 2 / 1 | 1 | 1 (a cardioid-family figure) |
| 3 | 3 / 1 | 1 | 2 |
| 2.5 | 5 / 2 | 2 | 3 |
| 3.25 | 13 / 4 | 4 | 9 |
| 0.5 | 1 / 2 | 2 | 1 |
Note the trap in the negative column: a ratio of −3 gives four lobes, not three, because |p − q| = |−3 − 1| = 4. Counting lobes and assuming the ratio equals the count is the most common mistake with this curve, and it is why a toy with a 96-tooth ring and a 24-tooth wheel — ratio 4 — draws a four-lobed figure while the equation's frequency ratio is −3.
The other consequence of the formula is that the fractional part of the ratio controls density. The slider steps in increments of 0.05, so a value like 3.25 is 13/4 and closes in four turns, whereas 3.20 is 16/5 and needs five, with fifteen lobes. Small nudges to the slider produce completely different figures, which is the whole appeal.
Inner radius is the pen offset d, and it decides whether the figure has sharp points, smooth waves, or inner loops. The rolling wheel's radius in this parameterisation works out to r1 / |ratio|, and comparing the pen offset to it gives three regimes:
| Pen offset | Curve type | What you see |
|---|---|---|
r2 < r1 / |ratio| | Curtate trochoid | Smooth scalloped waves, no points |
r2 = r1 / |ratio| | Hypocycloid / epicycloid | Sharp cusps — the pen momentarily stops dead |
r2 > r1 / |ratio| | Prolate trochoid | Self-intersecting inner loops at each lobe |
To see the cusp case exactly: leave Outer radius at its 0.54 default, set Frequency ratio to −3, and set Inner radius to 0.18. At that combination the pen's speed reaches exactly zero four times per revolution, which is what a cusp is — the four-cusped figure is the astroid. Push Inner radius above 0.18 and each cusp opens into a loop; drop it below and the points round off into a wavy quatrefoil. The stock defaults (0.54 and 0.32) sit firmly in the looped regime.
Set Inner radius to 0 and the second arm vanishes: you get a plain circle. Set Outer radius to 0 and you get a circle of the other radius, traced at the ratio's speed. Both are useful sanity checks if you have edited the code and want to know whether the arms are wired the way you think.
| Control | Range | Default | Effect |
|---|---|---|---|
| Frequency ratio | −8 – 8, step 0.05 | −3 | Identity of the figure — lobe count and closure |
| Speed | 0.001 – 0.06 | 0.012 | How much t advances per frame; drawing rate only |
| Arms | 1 – 12 | 4 | Copies of the figure, evenly phase-shifted around the circle. Restarts the drawing. |
| Outer radius | 0 – 1 | 0.54 | First arm length, as a fraction of the canvas radius |
| Inner radius | 0 – 1 | 0.32 | Pen offset — cusps, waves or loops |
| Harmonograph damping | 0 – 1 | 0 | Exponential decay of both radii over time |
| Trail points | 20 – 900 | 220 | Points kept per arm before the tail is dropped |
| Canvas fade | 0 – 0.6 | 0.16 | Opacity of the wipe painted each frame; 0 never erases |
| Hue spread | 0 – 360 | 300 | How far apart the arms' colours are |
| Zoom / drag to pan | 0.2 – 5 | 1 | Scale and position, with an opt-in toggle for mouse control |
Speed does not change the shape at all. It is purely how fast t advances per frame, so it changes how long you wait for the figure to close and nothing else. If a pattern is not appearing, it is the ratio you want, not the speed.
A harmonograph is a Victorian drawing machine: pendulums swinging a pen over a moving table. The equation is the same sum of rotations, with one difference — a real pendulum loses energy, so the radii shrink over time. Turning Harmonograph damping above zero multiplies both radii by an exponential decay term, and the closed figure stops retracing itself and spirals inward instead, leaving a nested set of ever-smaller copies. Very small values are the interesting ones; at damping near 1 the whole figure collapses to a point in a couple of seconds.
This is the practical difference between the two objects: a spirograph figure is periodic and finite, so it eventually draws over its own line and stops changing. A harmonograph figure is not periodic, so it keeps producing new material as it decays — which is why the antique machines produced such dense, layered plates.
The default settings are tuned for motion: a rolling trail of 220 points, a fading canvas, and a bright head dot on each arm. That reads well animated and looks like a fragment when frozen. For a print or a wallpaper you want the opposite — the whole closed figure, drawn once, with nothing erased:
q = 1 closes in a single revolution.The PNG is captured at the preview canvas's pixel size, which follows the container and your device pixel ratio — so go fullscreen before saving if you want the largest possible image. The arms are drawn with an additive blend, so overlapping strokes brighten rather than cover each other; on a dark background that is what produces the glow along dense regions.
The Download button saves a standalone HTML file containing the code and your current slider values, which is the thing to use if you want to keep a particular figure reproducibly, or run it as a screensaver. Share encodes your edited code into the URL.
The whole drawing routine is under fifty lines and visible in the JS pane. Each arm keeps a rolling buffer of its recent points and strokes short segments between consecutive entries, with the line width and lightness ramping from tail to head — that gradient is what makes a line of static geometry read as motion. The arms are the same curve at evenly spaced phase offsets, which is why raising the Arms count multiplies the figure into a rosette rather than drawing anything new. If you want genuinely different arms, give each one its own ratio in the loop; that is a two-line change in the code pane and it re-runs as you type.
This page opens the editor on the spirograph figure. The same editor also carries a range of other canvas, WebGL and three.js animations — see the JavaScript Animation Playground.
A spirograph figure is the sum of two rotations, one attached to the tip of the other:
x = R1 cos(t) + R2 cos(k t)
y = R1 sin(t) + R2 sin(k t)
where k is the frequency ratio. This family of curves has proper names: when the small circle rolls around the outside of the fixed one the result is an epitrochoid, and when it rolls around the inside it is a hypotrochoid. The plastic toy produces hypotrochoids, which is why negative ratios here look most like the toy.
This is the question the ratio really answers. Write k as a fraction in lowest terms, p/q. The curve closes after exactly q full turns of the outer arm. Some consequences:
k = -3 is -3/1, so it closes after one turn. Instantly symmetric.k = 2.5 is 5/2, so it needs two turns to close.k = 3.25 is 13/4: four turns, and a much denser figure.Denominators are why small slider changes produce wildly different figures: 2.50 and 2.51 are 5/2 and 251/100, and one closes in two turns while the other takes a hundred.
Adding rotating arms of different frequencies is precisely what a Fourier series does. Two arms give these curves; add more, with the right radii and frequencies, and you can trace any closed curve — which is the basis of the "drawing with epicycles" animations. This tool is a two-term Fourier series that you can steer by hand.
A harmonograph is a Victorian drawing machine: two or three pendulums swinging at slightly different frequencies, connected to a pen and a moving table. It was used to visualise musical intervals — pendulums tuned to a 3:2 frequency ratio (a perfect fifth) trace a stable, simple figure, while dissonant ratios produce tangled ones.
The crucial physical difference from a geometric spirograph is that pendulums lose energy. Amplitude decays exponentially:
decay = exp(-t * damping)
so the radii shrink as the drawing proceeds and the closed figure spirals inward, never retracing itself exactly. That is the damping control here. At zero you have pure geometry; above zero you have physics.
The trail controls decide whether you are producing an animation or a print:
p/q ratio needs q turns.For a looping animation instead, keep a small fade, choose a fractional ratio so the pattern keeps evolving, and use Record to capture WebM.
Each arm is drawn on its own hue, spaced across the range set by the hue spread control, and each trail ramps in width and brightness from tail to head. That head-to-tail gradient is what makes the line read as motion rather than as a static wireframe.
It is the speed of the second rotating arm relative to the first, and it decides the identity of the figure. Whole numbers close the curve into a clean rosette - a ratio of -3 gives three lobes, -5 gives five. Negative values counter-rotate the inner arm, which produces the classic toy-spirograph look. Fractional values like 2.5 take far longer to close and weave much denser patterns. Every other control changes proportions; this one changes the shape.
A spirograph is geometric: circles rolling on circles, tracing a figure that repeats forever unchanged. A harmonograph is a physical machine - pendulums swinging at different frequencies with a pen attached - and pendulums lose energy to friction, so the figure spirals inward as it draws. The damping control here is exactly that friction. At zero you have a spirograph; above zero you have a harmonograph.
Set Canvas fade to 0 so nothing decays, raise Trail points to maximum, and let the figure draw until it closes on itself. Then use Save PNG. For an animated version use Record instead, which produces a WebM video - a slow speed with a fractional ratio makes a good loop.
Yes. The output is a mathematical curve, not a copyrighted asset, and the source code shown in the editor is free to reuse. Nothing you make here is uploaded or stored.
Edit and run 20 canvas, WebGL, three.js and CSS animations live in your browser.
Explore the Mandelbrot set in your browser - zoom, pan, tune iterations, switch to Julia sets, and save a PNG.
Generate the Matrix digital rain effect in your browser. Tune speed, glyphs, colour and trail length, then export a PNG, video or standalone HTML file.