Spirograph SVG Generator

Spirograph: from the 1965 toy to parametric SVG art

The Spirograph was invented in 1965 by British engineer Denys Fisher and patented in 1966 — a set of plastic gear wheels with pinholes that lets a pen trace intricate, mathematically perfect curves on paper. Now sold by Hasbro, the toy has appeared in millions of homes, on Sesame Street segments and in school math kits worldwide. Behind the entertainment lies a serious piece of geometry: every shape a Spirograph draws is a hypotrochoid (when an inner wheel rolls inside a larger fixed ring) or an epitrochoid (when an outer wheel rolls around a fixed circle), both special cases of roulette curves studied since the 17th century.

The math behind every curve

Three parameters define the entire family: R = radius of the fixed circle, r = radius of the rolling circle, d = pen offset from the rolling circle's centre. For a hypotrochoid the parametric equations are:

x(t) = (R - r) * cos(t) + d * cos((R - r) / r * t)
y(t) = (R - r) * sin(t) - d * sin((R - r) / r * t)

When the ratio R/r is rational (e.g. 5/3, 7/2, 96/35), the curve eventually closes on itself and forms a finite rosette. When the ratio is irrational, the path never repeats — you get an "open" spirograph that, in the limit, densely fills an annular region. Most plastic gear sets pick teeth counts (e.g. 96, 84, 32) precisely so every ratio is rational and the drawing finishes after a predictable number of revolutions.

Building the SVG path

A spirograph in SVG is just a long sequence of (x, y) samples connected by straight segments — visually indistinguishable from a smooth curve once you push past ~500 points. The generator iterates t from 0 to 2π * lcm(R, r) / R, plugs each value into the equations, and emits a single <path d="M x0 y0 L x1 y1 L ...">. For extra smoothness you can interpolate with cubic Béziers (C commands), but for screen rendering 1000 line segments are already pixel-perfect.

Classic culture, modern code

Spirograph patterns became a visual signature of 1960s–1970s pop art, op art posters and psychedelic record sleeves. German designer Anton Stankowski used roulette curves in corporate identities; today computational artists like Jen Lewin embed them in light installations. Educationally, the toy lives on as a programming exercise — implementing a spirograph in Python's turtle, Processing or p5.js is a rite of passage that teaches parametric equations, loops and 2D transforms in a single afternoon.

Styling tips

• Use stroke-dasharray + stroke-dashoffset animation to "draw" the curve over time.
• Apply a CSS gradient by overlaying multiple paths with different hues and low opacity.
• Keep stroke width thin (0.5–1.5 px) — thick strokes blur the fine self-intersections.
• Center the SVG with viewBox sized to 2(R + d) so no clipping occurs.

FAQ

What is the practical use of a spirograph? Beyond decorative art, the equations teach parametric curves, roulettes and rational/irrational ratios — they appear in mechanical engineering (gear meshing), astronomy (epicycle models) and signal processing visualisations.

Does a simple ratio always close the curve? Yes — whenever R/r reduces to a fraction p/q in lowest terms, the curve closes after q revolutions of t. Irrational ratios never close.

How many points do I need for a smooth path? Around 1000 samples produce a visually smooth result at typical screen sizes. For 4K printing, push to 5000–10000 points or switch to cubic Béziers.

Is it expensive to render? No — a 1000-point SVG path is a few kilobytes and renders in under a millisecond. Animating stroke-dashoffset is GPU-accelerated in modern browsers.