Spirograph Animation Demo
Animated Hypotrochoid (R=7, r=4, d=3)
The animation above draws a hypotrochoid curve — the same math behind a Spirograph toy.
Features
- Animated pen-tip glow during drawing
- Respects
prefers-reduced-motion - Adapts colors to dark/light theme
- Responsive canvas sizing
Equation
x(t) = (R - r) cos(t) + d cos((R - r)t / r) y(t) = (R - r) sin(t) - d sin((R - r)t / r)
Static Renders
Compare with pre-rendered versions:
 |
 |
 |
 |
| 5:3:2 | 7:4:3 | 8:5:3 | 10:7:4 |
Configuration
Customize via data attributes:
<script src="/static/js/spirograph.js" data-R="5" data-r="3" data-d="2" data-height="280" data-target="#content"> </script>