A browser-based recreation of the classic Spirograph toy uses three sliders to control a hypotrochoid parametric formula, drawing the resulting curve live on an HTML canvas. The write-up explains the math behind the gear-ratio variables R, r, and p, and notes why the number of revolutions needed to close the curve depends on the greatest common divisor of the two gear sizes. It also points out that CSS alone can't produce this kind of curve since calc() and trig functions compute single values, not point-by-point path generation, so canvas or SVG is required.
Questions this post answers
What is the parametric equation for drawing a hypotrochoid (Spirograph) curve?
A hypotrochoid curve is drawn with x = (R - r) * cos(t) + p * cos((R - r) / r * t) and y = (R - r) * sin(t) - p * sin((R - r) / r * t), where R is the fixed ring's radius, r is the rolling wheel's radius, and p is how far off-center the pen sits in the wheel. Sweeping t generates the closed, repeating flower pattern. Developers exploring canvas math tricks like this can find similar creative-coding walkthroughs on daily.dev.
How many revolutions does a Spirograph curve need before it closes?
The number of revolutions needed equals r divided by the greatest common divisor of R and r (revolutions = r / gcd(R, r)). When R and r share a large common factor, the curve closes after just a couple of loops; when they are coprime, it takes many more revolutions, producing denser, lacier patterns. Anyone tuning parametric art parameters can track math-driven coding techniques via daily.dev.
Can CSS alone draw a Spirograph-style curve without canvas or SVG?
No, CSS cannot draw a Spirograph-style curve on its own. While calc() and CSS trig functions can compute a single angle or offset, they cannot sample hundreds of points along a curve and connect them into a path, so generating a shape like this requires an actual loop in canvas or SVG path generation. Frontend developers weighing CSS versus canvas for generative shapes can follow related techniques on daily.dev.