Exploring parametric curves for favicon and logo design

A curve traced by a point attached to a circle rolling inside another circle

The Spirograph toy popularized these curves in the 1960s

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

\[y = (R-r)\sin(t) - d\sin\frac{(R-r)t}{r}\]

Where:

• \(R\) = outer circle radius
• \(r\) = inner circle radius
• \(d\) = distance from center of inner circle
• \(t\) = parameter (angle)

\(x = \sin(at)\), \(y = \sin(bt + \delta)\)

Ratio	Image
3:2
3:4
5:4

\(|x/a|^n + |y/b|^n = 1\)

n	Shape	Image
0.5	Astroid
2.0	Circle
2.5	Squircle

\(r = \cos(k\theta)\)

k	Petals	Image
3	3
5	5
7	7

The infinity symbol: \((x^2 + y^2)^2 = a^2(x^2 - y^2)\)

Variant	Image
Infinity
Vertical

• Mathematically precise - reproducible at any scale
• Hand-drawn aesthetic - organic feel from parametric equations
• Distinctive at small sizes - works for favicons (16x16, 32x32)
• Literate programming vibe - code generates art

Python + PIL for generation:

t = np.linspace(0, 2*np.pi, 500)
x = (R-r)*np.cos(t) + d*np.cos((R-r)*t/r)
y = (R-r)*np.sin(t) - d*np.sin((R-r)*t/r)

Full implementation: generate.py

• Full Mathematical Curves Documentation
• Wolfram MathWorld: Hypotrochoid
• Wikipedia: Spirograph

Jason Walsh | j@wal.sh | wal.sh