Spirograph playground
Adjust the circles and let your pen loop.
A pen traces a looping curve as one circle rolls around another.
Loading the playground…
How to use the spirograph playground
Create looping spirograph patterns by adjusting a fixed circle, a rolling circle, and the pen's distance from the rolling circle's center. Drawing runs locally in your browser.
- Choose whether the smaller circle rolls inside or outside the fixed circle.
- Adjust the two circle radii and pen distance to change the preview. Radii and distance are relative units, not pixels.
- Choose a line color or turn on Rainbow lines. Select Draw to animate; use Pause and Resume as needed.
- Use Finish instantly to see the complete pattern, Clear to empty the canvas, and Save PNG to download the current drawing.
Circles and patterns
Inside rolling uses a hypotrochoid: x = (R − r) cos(t) + d cos((R − r)t/r), y = (R − r) sin(t) − d sin((R − r)t/r). Outside rolling uses an epitrochoid: x = (R + r) cos(t) − d cos((R + r)t/r), y = (R + r) sin(t) − d sin((R + r)t/r). R is the fixed circle radius, r the rolling circle radius, and d the pen distance. Integer radii let the pattern close after r/gcd(R, r) revolutions.
Try a fixed radius of 150, a rolling radius of 60, and pen distance 80 with inside rolling. The complete pattern closes after two revolutions. A pen distance of zero traces a circle.
Drawing and saving
Fixed radius: 60–200; rolling radius: 10–150 and smaller than the fixed radius; pen distance: 0–200. Changing geometry or colors replaces the drawing with a complete preview. Speed controls only animation timing; at 1× a full drawing takes about 20 seconds, and at 4× about 5 seconds. Circle guides are not saved. PNG files are 1200 × 1200 pixels with a white background; unfinished drawings can also be saved. No settings or drawings are stored or sent by this tool. Animation starts only on request, pauses when the tab is hidden, and finishes instantly when reduced motion is preferred.
Curve references: Hypotrochoid equations; Epitrochoid equations.
