# Spirograph playground

Canonical interactive tool: https://taskpencil.com/tools/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.

## Instructions

1. Choose whether the smaller circle rolls inside or outside the fixed circle.

2. Adjust the two circle radii and pen distance to change the preview. Radii and distance are relative units, not pixels.

3. Choose a line color or turn on Rainbow lines. Select Draw to animate; use Pause and Resume as needed.

4. 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.

## References

- [Hypotrochoid equations](https://mathworld.wolfram.com/Hypotrochoid.html)

- [Epitrochoid equations](https://mathworld.wolfram.com/Epitrochoid.html)