Spirograph

No dependencies
Code format
React + Tailwind
// A wheel of radius r rolling inside a ring of radius R, its pen d from the wheel's centre: a
// hypotrochoid. (R - r) : r = 8 : 3, so the figure closes after three laps with eight lobes.
const R = 88;
const r = 24;
const d = 16.5;
const C = 100;
const LAPS = 3;
const DRAW = 5.4; // seconds of drawing
const T = 6.4; // then a beat to admire it and fade
const k = (R - r) / r;
const pen = (t: number) => [C + (R - r) * Math.cos(t) + d * Math.cos(k * t), C + (R - r) * Math.sin(t) - d * Math.sin(k * t)];

const SAMPLES = 540;
const pts = Array.from({ length: SAMPLES + 1 }, (_, i) => pen((i / SAMPLES) * LAPS * 2 * Math.PI));
const PATH = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`).join('');
// The pen moves evenly round the wheel, not evenly along the line, so the line is revealed by
// arc length at each moment: keyframes for the dash, sampled from the real curve.
const lengths = pts.reduce<number[]>((acc, p, i) => (acc.push(i ? acc[i - 1] + Math.hypot(p[0] - pts[i - 1][0], p[1] - pts[i - 1][1]) : 0), acc), []);
const TOTAL = lengths[SAMPLES];
const share = DRAW / T;
const STEPS = 60;
const dash = Array.from({ length: STEPS + 1 }, (_, s) => {
  const i = Math.round((s / STEPS) * SAMPLES);
  return `${((s / STEPS) * share * 100).toFixed(2)}% { stroke-dashoffset: ${(1 - lengths[i] / TOTAL).toFixed(4)}; }`;
}).join(' ');
const at = `${(share * 100).toFixed(2)}%`;

const css = `
  .loader-spirograph { --ring: light-dark(#cbced3, #2e3035); --gear: color-mix(in oklab, light-dark(#ebedf0, #232529) 70%, transparent); --line: light-dark(#373a40, #f1f2f3); width: 196px; height: 196px; }
  .loader-spirograph svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .loader-spirograph__ring { fill: none; stroke: var(--ring); }
  .loader-spirograph__teeth { fill: none; stroke: var(--ring); stroke-width: 3; stroke-dasharray: 2.1 2.1; }
  .loader-spirograph__line { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-linejoin: round; stroke-dasharray: 1; animation: loader-spirograph-draw ${T}s linear infinite; }
  /* The carrier takes the wheel round the ring; the wheel turns back on itself as it rolls. */
  .loader-spirograph__carrier { transform-box: view-box; transform-origin: ${C}px ${C}px; animation: loader-spirograph-carry ${T}s linear infinite; }
  .loader-spirograph__wheel { transform-box: view-box; transform-origin: ${C + R - r}px ${C}px; animation: loader-spirograph-roll ${T}s linear infinite; }
  .loader-spirograph__disc { fill: var(--gear); stroke: color-mix(in oklab, light-dark(#6d7179, #7d8087) 80%, transparent); stroke-width: 1; }
  .loader-spirograph__cog { fill: none; stroke: color-mix(in oklab, light-dark(#6d7179, #7d8087) 80%, transparent); stroke-width: 2.4; stroke-dasharray: 2.1 2.1; }
  .loader-spirograph__hole { fill: none; stroke: color-mix(in oklab, light-dark(#6d7179, #7d8087) 70%, transparent); stroke-width: 1; }
  .loader-spirograph__pen { fill: var(--line); }
  @keyframes loader-spirograph-draw { ${dash} 92% { opacity: 1; } 99% { opacity: 0; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
  @keyframes loader-spirograph-carry { 0% { transform: rotate(0deg); } ${at}, 100% { transform: rotate(${LAPS * 360}deg); } }
  @keyframes loader-spirograph-roll { 0% { transform: rotate(0deg); } ${at}, 100% { transform: rotate(${-((LAPS * 360 * R) / r)}deg); } }
  @media (prefers-reduced-motion: reduce) {
    .loader-spirograph * { animation: none !important; }
    .loader-spirograph__line { stroke-dashoffset: 0; }
  }
`;

export function Preview() {
  const gx = C + R - r;
  return (
    <>
      <style href="kit-loaders-spirograph" precedence="kit">
        {css}
      </style>
      <div className="loader-spirograph" role="status" aria-label="Loading">
        <svg viewBox="0 0 200 200" aria-hidden="true">
          <circle className="loader-spirograph__ring" cx={C} cy={C} r={R + 7} strokeWidth={10} />
          <circle className="loader-spirograph__teeth" cx={C} cy={C} r={R + 1} />
          <path className="loader-spirograph__line" d={PATH} pathLength={1} />
          <g className="loader-spirograph__carrier">
            <g className="loader-spirograph__wheel">
              <circle className="loader-spirograph__disc" cx={gx} cy={C} r={r - 1.6} />
              <circle className="loader-spirograph__cog" cx={gx} cy={C} r={r - 0.4} />
              {[5, 9.5, 13].map((h, i) => (
                <circle key={h} className="loader-spirograph__hole" cx={+(gx + h * Math.cos(i * 2.2)).toFixed(1)} cy={+(C + h * Math.sin(i * 2.2)).toFixed(1)} r={1.8} />
              ))}
              <circle className="loader-spirograph__hole" cx={gx + d} cy={C} r={3.4} />
              <circle className="loader-spirograph__pen" cx={gx + d} cy={C} r={2} />
            </g>
          </g>
        </svg>
      </div>
    </>
  );
}

Free to use in any project, commercial included. MIT-0, no attribution required. Licence

Install with shadcn

npx shadcn@latest add @movin/loader-spirograph
Source on GitHub

About this component

A toothed wheel rolls round inside a ring and its pen draws the eight-petal figure in step with it, then the line fades.

Dependencies
None
Difficulty
Advanced
Triggers
continuous, loop, draw
Techniques
svg, stroke dashoffset, keyframes, transform only
Reduced motion
Respected
Theme
Light and dark (follows your page's color-scheme)

The root has role="status" and aria-label="Loading"; everything inside it is aria-hidden. Under prefers-reduced-motion the finished figure shows with the wheel at rest.

More loaders

See all
Stairs
Stamp
Stretch
Swap