Spirograph Roulettes: Draw Your Own

Introduction

If you grew up with a Spirograph set, you know the ritual: place a toothed ring on the paper, fit a smaller gear inside, push a pen through one of its holes, and roll. The result is a looping, petal-covered curve that looks far too elegant to come out of a toy.

What you were really doing is tracing a hypotrochoid — the path swept by a point attached to a circle that rolls inside a larger circle. Every loop, every petal, every gap in the design follows directly from two numbers: the radius of the outer ring and the radius of the rolling gear.

The ratio of those two numbers — whether it reduces to $\frac{3}{5}$ or $\frac{7}{12}$ or $\frac{1}{4}$ — decides how many petals appear, how many full rotations the pen makes before returning to the start, and whether it ever returns at all. This article unpacks that arithmetic so the next time you watch a Spirograph fill the page you can read it like a clock.

Draw Your Own

Drag the sliders to choose the outer radius $R$ and the inner radius $r$ , then watch the hypotrochoid draw itself in real time. The pen offset $d$ moves the tracing point closer to or farther from the centre of the rolling gear — try extreme values for looped vs pointy petals.

<!-- Spirograph hypotrochoid demo - outer ring R, inner gear r, pen offset d -->
<div class="controls">
  <label>Outer radius R: <span id="R-val">9</span>
    <input type="range" id="R-range" min="3" max="12" value="9" step="1">
  </label>
  <label>Inner radius r: <span id="r-val">4</span>
    <input type="range" id="r-range" min="1" max="11" value="4" step="1">
  </label>
  <label>Pen offset d: <span id="d-val">3.5</span>
    <input type="range" id="d-range" min="0.5" max="6" value="3.5" step="0.5">
  </label>
</div>
<canvas id="canvas" width="340" height="280" aria-label="Spirograph roulette curve drawn on a canvas"></canvas>
<div id="info" class="info">Adjust sliders and press Draw to animate.</div>
<div class="btns">
  <button id="btn-animate" type="button">Draw (animated)</button>
  <button id="btn-reset" type="button" class="ghost">Show full curve</button>
</div>

/* Spirograph demo styles */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: #222; margin: 0; padding: .6rem; }
.controls { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
label { font-size: .85rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
label span { font-weight: 700; min-width: 2.5ch; text-align: right; color: #1d3557; }
input[type=range] { flex: 1; min-width: 120px; accent-color: #1d3557; }
canvas { display: block; border: 1px solid #cdd9e3; border-radius: 8px; background: #f7f9fc;
         max-width: 100%; }
.info { font-size: .88rem; color: #444; margin: .5rem 0; min-height: 1.3em; }
.info strong { color: #1d3557; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
button { font: 600 14px system-ui, sans-serif; padding: .45rem .9rem; border: 1px solid #1d3557;
         background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }
button.ghost { background: #fff; color: #1d3557; }

const i18nFmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
/* Hypotrochoid: x = (R-r)cos(t) + d*cos((R-r)/r*t), y = (R-r)sin(t) - d*sin((R-r)/r*t) */

/* Euclidean GCD — controls petal count and closing period */
function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); }

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const infoEl = document.getElementById('info');

let R = 9, r = 4, d = 3.5;
let animId = null;

/* Compute p/q (reduced ratio) and lobe count from R and r */
function hypoParams(R, r) {
  const g = gcd(R, r);
  const p = R / g;
  const q = r / g;
  const lobes = Math.abs(R - r) / g;
  const steps = Math.ceil(2 * Math.PI * r / g * 200);
  return { p, q, lobes, steps };
}

/* Draw the hypotrochoid up to the given progress fraction (0..1) */
function drawCurve(progress) {
  const W = canvas.width, H = canvas.height;
  const cx = W / 2, cy = H / 2;
  const scale = Math.min(W, H) / 2 / (Math.abs(R - r) + d + 2);

  ctx.clearRect(0, 0, W, H);

  /* Draw the fixed outer ring guide */
  ctx.beginPath();
  ctx.arc(cx, cy, R * scale, 0, 2 * Math.PI);
  ctx.strokeStyle = '#cdd9e3';
  ctx.lineWidth = 1;
  ctx.stroke();

  const { steps, lobes } = hypoParams(R, r);
  const totalT = 2 * Math.PI * r / gcd(R, r);
  const tEnd = totalT * progress;

  ctx.beginPath();
  let first = true;
  const dt = totalT / steps;
  for (let t = 0; t <= tEnd; t += dt) {
    const x = cx + ((R - r) * Math.cos(t) + d * Math.cos((R - r) / r * t)) * scale;
    const y = cy + ((R - r) * Math.sin(t) - d * Math.sin((R - r) / r * t)) * scale;
    if (first) { ctx.moveTo(x, y); first = false; } else { ctx.lineTo(x, y); }
  }
  ctx.strokeStyle = '#e63946';
  ctx.lineWidth = 1.6;
  ctx.stroke();

  /* Draw the rolling inner circle and current pen position */
  if (progress < 1) {
    const t = tEnd;
    const gx = cx + (R - r) * Math.cos(t) * scale;
    const gy = cy + (R - r) * Math.sin(t) * scale;
    ctx.beginPath();
    ctx.arc(gx, gy, r * scale, 0, 2 * Math.PI);
    ctx.strokeStyle = '#1d3557';
    ctx.lineWidth = 1;
    ctx.stroke();
    const px = cx + ((R - r) * Math.cos(t) + d * Math.cos((R - r) / r * t)) * scale;
    const py = cy + ((R - r) * Math.sin(t) - d * Math.sin((R - r) / r * t)) * scale;
    ctx.beginPath();
    ctx.arc(px, py, 3, 0, 2 * Math.PI);
    ctx.fillStyle = '#e63946';
    ctx.fill();
  }

  /* Update the info line with petal count */
  const g = gcd(R, r);
  infoEl.innerHTML = i18nFmt('R=%R%, r=%r% &rarr; ratio %p%/%q% &rarr; <strong>%lobes% lobe(s)</strong>, closes after %q% outer turn(s)', { R: R, r: r, p: R/g, q: r/g, lobes: lobes });
}

function animate() {
  let start = null;
  const duration = 4000;
  cancelAnimation();
  const step = (ts) => {
    if (!start) start = ts;
    const progress = Math.min((ts - start) / duration, 1);
    drawCurve(progress);
    if (progress < 1) animId = requestAnimationFrame(step);
    else animId = null;
  };
  animId = requestAnimationFrame(step);
}

function cancelAnimation() {
  if (animId !== null) { cancelAnimationFrame(animId); animId = null; }
}

function reset() {
  cancelAnimation();
  drawCurve(1);
}

function syncSliders() {
  R = parseInt(document.getElementById('R-range').value);
  r = Math.min(parseInt(document.getElementById('r-range').value), R - 1);
  d = parseFloat(document.getElementById('d-range').value);
  document.getElementById('R-val').textContent = R;
  document.getElementById('r-val').textContent = r;
  document.getElementById('d-val').textContent = d;
  /* Ensure r stays strictly less than R */
  document.getElementById('r-range').max = R - 1;
}

['R-range','r-range','d-range'].forEach(id => {
  document.getElementById(id).addEventListener('input', () => { syncSliders(); drawCurve(1); });
});

document.getElementById('btn-animate').addEventListener('click', animate);
document.getElementById('btn-reset').addEventListener('click', reset);

syncSliders();
drawCurve(1);

<!-- Spirograph hypotrochoid demo - outer ring R, inner gear r, pen offset d -->
<div class="controls">
  <label>Outer radius R: <span id="R-val">9</span>
    <input type="range" id="R-range" min="3" max="12" value="9" step="1">
  </label>
  <label>Inner radius r: <span id="r-val">4</span>
    <input type="range" id="r-range" min="1" max="11" value="4" step="1">
  </label>
  <label>Pen offset d: <span id="d-val">3.5</span>
    <input type="range" id="d-range" min="0.5" max="6" value="3.5" step="0.5">
  </label>
</div>
<canvas id="canvas" width="340" height="280" aria-label="Spirograph roulette curve drawn on a canvas"></canvas>
<div id="info" class="info">Adjust sliders and press Draw to animate.</div>
<div class="btns">
  <button id="btn-animate" type="button">Draw (animated)</button>
  <button id="btn-reset" type="button" class="ghost">Show full curve</button>
</div>

/* Spirograph demo styles */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; color: #222; margin: 0; padding: .6rem; }
.controls { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
label { font-size: .85rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
label span { font-weight: 700; min-width: 2.5ch; text-align: right; color: #1d3557; }
input[type=range] { flex: 1; min-width: 120px; accent-color: #1d3557; }
canvas { display: block; border: 1px solid #cdd9e3; border-radius: 8px; background: #f7f9fc;
         max-width: 100%; }
.info { font-size: .88rem; color: #444; margin: .5rem 0; min-height: 1.3em; }
.info strong { color: #1d3557; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
button { font: 600 14px system-ui, sans-serif; padding: .45rem .9rem; border: 1px solid #1d3557;
         background: #1d3557; color: #fff; border-radius: 8px; cursor: pointer; }
button.ghost { background: #fff; color: #1d3557; }

const i18nFmt = (s, v) => s.replace(/%(\w+)%/g, (_, k) => String(v[k] ?? ''));
/* Hypotrochoid: x = (R-r)cos(t) + d*cos((R-r)/r*t), y = (R-r)sin(t) - d*sin((R-r)/r*t) */

/* Euclidean GCD — controls petal count and closing period */
function gcd(a, b) { return b === 0 ? a : gcd(b, a % b); }

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const infoEl = document.getElementById('info');

let R = 9, r = 4, d = 3.5;
let animId = null;

/* Compute p/q (reduced ratio) and lobe count from R and r */
function hypoParams(R, r) {
  const g = gcd(R, r);
  const p = R / g;
  const q = r / g;
  const lobes = Math.abs(R - r) / g;
  const steps = Math.ceil(2 * Math.PI * r / g * 200);
  return { p, q, lobes, steps };
}

/* Draw the hypotrochoid up to the given progress fraction (0..1) */
function drawCurve(progress) {
  const W = canvas.width, H = canvas.height;
  const cx = W / 2, cy = H / 2;
  const scale = Math.min(W, H) / 2 / (Math.abs(R - r) + d + 2);

  ctx.clearRect(0, 0, W, H);

  /* Draw the fixed outer ring guide */
  ctx.beginPath();
  ctx.arc(cx, cy, R * scale, 0, 2 * Math.PI);
  ctx.strokeStyle = '#cdd9e3';
  ctx.lineWidth = 1;
  ctx.stroke();

  const { steps, lobes } = hypoParams(R, r);
  const totalT = 2 * Math.PI * r / gcd(R, r);
  const tEnd = totalT * progress;

  ctx.beginPath();
  let first = true;
  const dt = totalT / steps;
  for (let t = 0; t <= tEnd; t += dt) {
    const x = cx + ((R - r) * Math.cos(t) + d * Math.cos((R - r) / r * t)) * scale;
    const y = cy + ((R - r) * Math.sin(t) - d * Math.sin((R - r) / r * t)) * scale;
    if (first) { ctx.moveTo(x, y); first = false; } else { ctx.lineTo(x, y); }
  }
  ctx.strokeStyle = '#e63946';
  ctx.lineWidth = 1.6;
  ctx.stroke();

  /* Draw the rolling inner circle and current pen position */
  if (progress < 1) {
    const t = tEnd;
    const gx = cx + (R - r) * Math.cos(t) * scale;
    const gy = cy + (R - r) * Math.sin(t) * scale;
    ctx.beginPath();
    ctx.arc(gx, gy, r * scale, 0, 2 * Math.PI);
    ctx.strokeStyle = '#1d3557';
    ctx.lineWidth = 1;
    ctx.stroke();
    const px = cx + ((R - r) * Math.cos(t) + d * Math.cos((R - r) / r * t)) * scale;
    const py = cy + ((R - r) * Math.sin(t) - d * Math.sin((R - r) / r * t)) * scale;
    ctx.beginPath();
    ctx.arc(px, py, 3, 0, 2 * Math.PI);
    ctx.fillStyle = '#e63946';
    ctx.fill();
  }

  /* Update the info line with petal count */
  const g = gcd(R, r);
  infoEl.innerHTML = i18nFmt('R=%R%, r=%r% &rarr; ratio %p%/%q% &rarr; <strong>%lobes% lobe(s)</strong>, closes after %q% outer turn(s)', { R: R, r: r, p: R/g, q: r/g, lobes: lobes });
}

function animate() {
  let start = null;
  const duration = 4000;
  cancelAnimation();
  const step = (ts) => {
    if (!start) start = ts;
    const progress = Math.min((ts - start) / duration, 1);
    drawCurve(progress);
    if (progress < 1) animId = requestAnimationFrame(step);
    else animId = null;
  };
  animId = requestAnimationFrame(step);
}

function cancelAnimation() {
  if (animId !== null) { cancelAnimationFrame(animId); animId = null; }
}

function reset() {
  cancelAnimation();
  drawCurve(1);
}

function syncSliders() {
  R = parseInt(document.getElementById('R-range').value);
  r = Math.min(parseInt(document.getElementById('r-range').value), R - 1);
  d = parseFloat(document.getElementById('d-range').value);
  document.getElementById('R-val').textContent = R;
  document.getElementById('r-val').textContent = r;
  document.getElementById('d-val').textContent = d;
  /* Ensure r stays strictly less than R */
  document.getElementById('r-range').max = R - 1;
}

['R-range','r-range','d-range'].forEach(id => {
  document.getElementById(id).addEventListener('input', () => { syncSliders(); drawCurve(1); });
});

document.getElementById('btn-animate').addEventListener('click', animate);
document.getElementById('btn-reset').addEventListener('click', reset);

syncSliders();
drawCurve(1);

Result

Console

Notice that the curve closes — returns exactly to where it started — only when $\frac{R}{r}$ is a rational number, which it always is for whole-number gear sizes. When $R/r = p/q$ in lowest terms, the curve needs exactly $p$ full turns of the outer circle (equivalently $q$ full rotations of the inner gear) to close, and it draws exactly $|R - r|/\gcd(R, r)$ lobes. Try $R = 5, r = 3$ for two lobes; $R = 7, r = 3$ for four lobes; $R = 9, r = 4$ for a star-like five-pointed figure.

The Real Maths

The parametric equations of a hypotrochoid with outer radius $R$ , inner radius $r$ , and pen offset $d$ are:

x(t) = (R - r)\cos t + d\cos\!\left(\frac{R-r}{r}\,t\right)

y(t) = (R - r)\sin t - d\sin\!\left(\frac{R-r}{r}\,t\right)

where $t$ advances as the inner circle rolls. Three facts follow purely from arithmetic:

Closing condition. The curve closes after $t = 2\pi k$ for the smallest integer $k$ such that $k \cdot (R-r)/r$ is also an integer. Writing $R/r = p/q$ in lowest terms (so $\gcd(p,q) = 1$ ), the curve closes after exactly $k = q$ turns of the outer arc, which equals $p$ full rotations of the inner gear.
Petal count. The number of distinct lobes equals $p - q = (R - r)/\gcd(R, r)$ . With $R = 9, r = 4$ we get $\gcd(9,4)=1$ , so $p = 9, q = 4$ , giving $9 - 4 = 5$ petals — matching the star you see in the demo.
Period. The total arc length traced before closing is $2\pi \cdot \text{lcm}(R, r) / r$ , because $\text{lcm}(R,r) = Rr/\gcd(R,r)$ .

All three facts reduce to the same two operations: greatest common divisor and least common multiple — elementary number theory that any calculator can compute, yet powerful enough to generate an infinite family of distinct symmetric curves. The same GCD/LCM reasoning appears throughout discrete mathematics and even in modular arithmetic.

Where It Matters

The mathematics of rolling circles is not confined to toy boxes:

Wankel rotary engine: the rotor inside a Wankel engine traces an almost-hypotrochoid (technically an epitrochoid). The three-lobe shape follows directly from the gear ratio between the rotor and the eccentric shaft — the same arithmetic as the demo above.
Gear design and hobbing: the involute profiles used on most modern gear teeth are limiting cases of roulette curves; choosing the pressure angle is choosing a point on a rolling circle.
Antenna arrays: phased arrays and mechanically steered antennas exploit the fact that a point on a rolling circle sweeps predictable angular velocities — useful when designing scanning patterns.
Computer graphics and fonts: PostScript and TrueType bezier curves approximate roulettes to render smooth circular arcs efficiently; the same parametric thinking drives path-animation tools in SVG and CSS.
Orbital mechanics: epicyclic models of planetary motion (Ptolemy's deferents and epicycles) are exactly roulette curves — the Greeks had the geometry right, only the physics wrong.

Whenever you need a curve that is almost circular but richer, closed but not a circle, symmetric but varied, a rolling-circle roulette is the first tool to reach for.

Conclusion

A Spirograph looks like magic — a mechanical pen tracing intricate flowers without a single conscious decision about where to go. But the design was always completely determined: by the ratio $R/r$ , reduced to lowest terms, the number of petals was fixed before the first tooth engaged.

That is the deeper lesson. The GCD of two integers is one of the simplest things in mathematics, yet it controls the entire symmetry group of the resulting curve. Add the constraint that both radii must be whole numbers and you get a discrete family of patterns — infinitely many, but not all patterns are reachable. The gaps between reachable patterns are just as interesting as the curves themselves.

If you want to keep exploring, try the same reasoning with a circle rolling outside another (an epicycloid — the path that draws a cardioid or nephroid), or ask what happens when $d > r$ , pushing the pen beyond the rolling circle's edge. The arithmetic stays the same; only the shape changes.

Comments

Loading comments...

https://www.kipuhub.com/en/article/spirograph-roulettes/Content licensed under CC BY-NC 4.0.

Cookies & privacy

Spirograph Roulettes

The hidden arithmetic of rolling circles