Home▸Mathematics▸2D Spirograph — Rolling Circle Hypotrochoid & Epitrochoid

2D Spirograph — Rolling Circle Hypotrochoid & Epitrochoid

A 2D companion to the 3D Spirograph simulator: watch the rolling circle itself trace the hypotrochoid or epitrochoid curve in a plain flat canvas, with adjustable outer radius R, rolling radius r and pen distance d, and live gear-ratio readouts (petals, rotations to close, gcd/lcm) that update as you drag the sliders.

Mathematics2DEasy60 FPS📱 Mobile-adapted⇄ 3D version
2d-spirograph ↗ Open standalone

This is the 2D companion to the 3D Spirograph simulator. A small circle of radius r rolls without slipping around the inside (hypotrochoid) or outside (epitrochoid) of a fixed ring of radius R, with a pen held a fixed distance d from the rolling circle's own centre. Unlike a purely traced curve, this view draws the actual rolling geometry — the ring, the rolling circle, its centre and the pen arm — live, frame by frame, on a plain flat canvas. Petal count and the number of trips needed to close the pattern are computed exactly from the greatest common divisor and least common multiple of R and r.

⚙ Under the hood

A 2D companion to the 3D Spirograph simulator: watch the rolling circle itself trace the hypotrochoid or epitrochoid curve on a plain flat canvas, with the fixed ring, the rolling circle's centre and the pen arm all drawn live. Adjustable outer radius R, rolling radius r and pen distance d, with real gear-ratio-driven petal count and closing behaviour computed from gcd(R,r) and lcm(R,r).

spirographhypotrochoidepitrochoidrolling circlegear ratioparametric curvescanvas 2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)