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:

spirograph_5_3_2.png spirograph_7_4_3.png spirograph_8_5_3.png spirograph_10_7_4.png
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>

← Back to Curves

Author: Jason Walsh

jwalsh@nexus

Last Updated: 2026-02-06 01:31:21

build: 2026-04-17 18:35 | sha: 792b203