Math Formulas for Generative SVG Spirographs

Generative SVG spirographs rely on mathematical curves created by tracking a point on a circle as it rolls around another circle. This guide covers the primary mathematical formulas used to generate these intricate geometric patterns—specifically hypotrochoids, epitrochoids, and rhodonea curves—and demonstrates how to translate their continuous parametric equations into discrete SVG path coordinates.

1. Hypotrochoid Formulas (Internal Rolling Circle)

A hypotrochoid is generated when a smaller circle of radius \(r\) rolls inside a fixed larger circle of radius \(R\), with a drawing point located at a distance \(d\) from the center of the rolling circle. This is the classic equation behind standard mechanical spirograph toys.

The parametric equations in Cartesian coordinates are:

\[x(\theta) = (R - r) \cos(\theta) + d \cos\left(\frac{R - r}{r} \theta\right)\]

\[y(\theta) = (R - r) \sin(\theta) - d \sin\left(\frac{R - r}{r} \theta\right)\]

• \(R\): Radius of the fixed, outer ring.
• \(r\): Radius of the moving, inner wheel.
• \(d\): Distance from the center of the moving wheel to the drawing point (pen hole).
• \(\theta\): The angle of rotation, measured in radians.

When \(d = r\), the curve simplifies to a hypocycloid (e.g., an astroid when \(R/r = 4\)).

2. Epitrochoid Formulas (External Rolling Circle)

An epitrochoid is produced when a circle of radius \(r\) rolls around the exterior of a fixed circle of radius \(R\), with the drawing point at distance \(d\) from the rolling circle’s center.

The parametric equations are:

\[x(\theta) = (R + r) \cos(\theta) - d \cos\left(\frac{R + r}{r} \theta\right)\]

\[y(\theta) = (R + r) \sin(\theta) - d \sin\left(\frac{R + r}{r} \theta\right)\]

When \(d = r\), the resulting shape is an epicycloid (such as a cardioid or nephroid).

3. Rhodonea Curves (Rose Curves)

Rhodonea curves are polar spirograph-like shapes produced by expressing radial distance as a sinusoidal function of the angle.

The polar formula is:

\[r(\theta) = a \cos(k\theta) \quad \text{or} \quad r(\theta) = a \sin(k\theta)\]

Converting to Cartesian coordinates for SVG rendering:

\[x(\theta) = a \cos(k\theta) \cos(\theta)\]

\[y(\theta) = a \cos(k\theta) \sin(\theta)\]

• \(a\): Amplitude (overall size/radius of the rose).
• \(k\): Petal frequency. If \(k\) is an integer, the curve has \(k\) petals (if \(k\) is odd) or \(2k\) petals (if \(k\) is even). If \(k\) is a rational fraction (\(n/d\)), it generates multi-layered overlapping loops.

4. Determining the Period and Closing the Loop

To ensure the SVG path forms a continuous, closed loop without missing segments or overdrawing unnecessarily, the maximum value for \(\theta\) must be calculated using the greatest common divisor (\(\gcd\)):

\[\theta_{\text{max}} = 2\pi \times \frac{r}{\gcd(R, r)}\]

For integer values of \(R\) and \(r\), dividing \(r\) by \(\gcd(R, r)\) determines the number of full rotations required before the curve returns to its starting coordinate.

5. Translating Math to SVG Path Data

To render a spirograph in an SVG document:

1. Iterate \(\theta\) from \(0\) to \(\theta_{\text{max}}\) in small step increments (e.g., \(\Delta\theta = 0.01\) to \(0.05\) radians).
2. Compute \((x, y)\) at each step using the desired formula.
3. Offset the origin by adding the canvas center coordinates: \(X = x + \text{cx}\), \(Y = y + \text{cy}\).
4. Construct the SVG Path String:
   • Set the initial point with M X_0 Y_0.
   • Append subsequent points with L X_i Y_i.
   • Close the path with Z.

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
  <path d="M 350 300 L 348.5 304.2 L 344.1 308.1 ... Z" 
        fill="none" 
        stroke="currentColor" 
        stroke-width="1.5" />
</svg>