Spirograph Explorer
The gear-and-pen toy from every 90s pencil case, rebuilt as three sliders and a parametric formula drawn live in canvas.
I had a Spirograph as a kid: a ring of gear teeth, a smaller wheel that clicks inside it, a pen through a hole near the wheel’s edge. Spin the wheel around the inside of the ring and it draws a flower nobody could freehand, closed, perfectly repeating, one continuous line the whole way round. This is that toy, minus the ring, the wheel, and the risk of the pen skidding off the page.
const x = (R - r) * Math.cos(t) + p * Math.cos((R - r) / r * t);
const y = (R - r) * Math.sin(t) - p * Math.sin((R - r) / r * t);
R and r are the two gear sizes, p is how far off-centre the pen sits in the small wheel. The curve is a hypotrochoid: t sweeps from 0 to however many full trips the wheel needs before the pen lands back where it started, revolutions = r / gcd(R, r). Push R and r to share a large common factor and the flower closes after a couple of loops. Make them coprime instead and it takes far more revolutions to close, which is why those combinations come out denser and lacier.
There’s no CSS version of this. calc() and the trig functions can compute a single angle or offset, but not sample hundreds of points along a curve and connect them, so a shape like this needs an actual loop, which means canvas or SVG path generation, not a stylesheet.