Spirograph
Two radii and a pen offset, and the curve draws itself.
BeginnerWeb appCreative4–10hAI-buildable 5/5no setup
The childhood toy as parametric maths: adjust the fixed circle, rolling circle and pen offset, and watch a hypotrochoid emerge. Immediate, satisfying feedback from a very small amount of code, and animating the trace rather than drawing it instantly is what makes it feel alive.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 6
- Sliders for outer radius, inner radius and pen offset
- The curve animates as it is traced rather than appearing at once
- The drawing restarts cleanly when parameters change
- Colour and line width are adjustable
- The completed curve exports as an image
- The curve closes properly rather than overdrawing forever
The interesting part
- Working out how many revolutions are needed before the curve closes
- Restarting the animation smoothly when a slider moves mid-draw
Once it works
- Layer multiple curves in different colours
- Animate the parameters themselves over time
- Add an SVG export with a real path
Suggested stack
reacttypescripttailwindcanvas-api