HomeMathematicsSpirograph — Hypotrochoids & Epitrochoids

🌹 Spirograph — Hypotrochoids & Epitrochoids

Draw parametric rolling-circle curves: hypotrochoids trace inside a fixed ring, epitrochoids outside. Choose radii R, r and pen offset d to produce roses, stars, cardioids.

Mathematics3DEasy60 FPS
cardioid-spirograph ↗ Open standalone

About this simulation

This simulation is a digital spirograph: it plots the path traced by a pen mounted on a small circle of radius r that rolls, without slipping, either inside or outside a larger fixed circle of radius R. The pen sits a distance d from the rolling circle's centre. Whilst the mechanics are simple, the resulting hypotrochoid and epitrochoid curves range from tidy roses and stars to the heart-shaped cardioid, all governed by a handful of parametric equations updated live as you drag the sliders.

🔬 What it shows

Two families of roulette curves. In Hypotrochoid mode the small circle rolls inside the fixed ring, giving x(t) = (R−r)cos(t) + d·cos((R−r)/r·t); in Epitrochoid mode it rolls outside, giving x(t) = (R+r)cos(t) − d·cos((R+r)/r·t), with the matching sine term for y(t). Setting r = R and d = r in Epitrochoid mode produces a true cardioid, and the drawing always closes after a period of 2π·r/gcd(R, r).

🎮 How to use

Toggle Hypotrochoid / Epitrochoid to switch rolling mode, then drag Outer radius R (50–200), Rolling radius r (5–100) and Pen offset d (1–200) to reshape the curve. Draw speed (1–20) sets how many angle steps are plotted per frame, and Hue shift (0–360°) rotates the stroke colour. Pause/Play freezes the drawing, Reset clears the canvas and redraws from t = 0, and Info opens a panel with the full equations.

💡 Did you know?

When the radius ratio R/r is exactly 2, a hypotrochoid degenerates into a straight line segment — the pen appears to move back and forth through the centre, even though it is still following the same rolling-circle equations that produce loops elsewhere.

Frequently asked questions

What is the difference between a hypotrochoid and an epitrochoid?

A hypotrochoid is traced by a circle rolling inside a fixed ring, using x(t) = (R−r)cos(t) + d·cos((R−r)/r·t) and y(t) = (R−r)sin(t) − d·sin((R−r)/r·t). An epitrochoid is traced by a circle rolling outside a fixed circle, using the same form with plus signs: x(t) = (R+r)cos(t) − d·cos((R+r)/r·t). Switching between the two changes which side of R the rolling circle sits on.

How do I draw a cardioid with this tool?

Switch to Epitrochoid mode, then set the rolling radius r equal to the outer radius R and set the pen offset d equal to r as well. With r = R and d = r the epitrochoid equations simplify to the classic cardioid, the heart-shaped curve also seen in microphone pickup patterns and the main bulb of the Mandelbrot set.

Why does the curve sometimes never quite close?

The drawing repeats after a period of 2π·r/gcd(R, r) in the parameter t. If R and r share a large common factor the curve closes quickly with few loops; if their greatest common divisor is small, the pen must sweep round many more times before the pattern joins back onto itself.

What controls the number of petals in a rose-like pattern?

Rose-like hypotrochoids appear when the pen offset d equals R − r and r divides evenly into R. The petal count then equals R/r when that ratio is odd, or twice R/r when it is even. Try R = 120, r = 40 and d = 80 for a clean three-petal rose.

What happens if I set the pen offset d larger than the rolling radius r?

When d exceeds r the pen sits beyond the edge of the rolling circle, so the traced curve grows extra loops instead of staying smooth. When d equals r the curve passes cleanly through the centre of the rolling path, and when d is smaller than r the whole curve stays within a narrow ring around radius R − r.

⚙ Under the hood

Draw parametric rolling-circle curves: hypotrochoids trace inside a fixed ring, epitrochoids outside. Choose radii R, r and pen offset d to produce roses, stars, cardioids.

spirographhypotrochoidepitrochoidcycloidCanvas 2D

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)