There is a peculiar category of mathematical object that lands with equal force on the geometer and the graphic designer: structures so constrained by pure logic that they produce beauty as a side-effect. The four simulations in this spotlight are of that kind. Each one encodes a theorem — a rigorous, provable statement about numbers or geometry — yet the output is indistinguishable from deliberate visual art. That is not a coincidence. It is what happens when the rules themselves are beautiful.
I. Penrose Tiling — Deflation and Quasiperiodicity
◆Penrose Tiling — Deflation Algorithm & Quasiperiodic Patterns
Step through deflation iterations; toggle kite/dart vs. thick/thin rhombus sets; colour by tile type or matching-rule arrows; zoom into fivefold symmetry clusters.
In 1974, Roger Penrose discovered a pair of shapes that can tile the infinite plane without ever repeating. This was extraordinary because it refuted the prevailing intuition that any finite set of tiles capable of tiling the plane must be able to do so periodically — like bathroom tiles or a brick wall. A Penrose tiling is aperiodic: it covers the plane perfectly, but no translation (shift without rotation) maps the tiling onto itself.
The most tractable version uses two rhombuses: a “thick” rhombus with angles 72° and 108°, and a “thin” rhombus with angles 36° and 144°. The matching rules — arrows on the edges that must align when tiles meet — are what prevent periodic arrangements. Equivalently, and more computationally useful, the tiling can be generated by deflation: each thick rhombus splits into one thick and one thin; each thin rhombus splits into one thick and one thin, according to fixed geometric subdivision rules. Repeating deflation produces ever-denser tilings whose proportions are governed throughout by the golden ratio.
Golden ratio: phi = (1 + sqrt(5)) / 2 ≈ 1.6180339887...
Thick rhombus angles: 72° and 108°
Thin rhombus angles: 36° and 144°
Ratio of thick to thin tiles after n deflation steps:
N_thick / N_thin → phi (as n → ∞)
Deflation rules (thick rhombus T, thin rhombus t):
T → T + t (one thick, one thin)
t → T + t (same counts, different geometry)
After k deflations starting from 1 tile:
N_total ≈ phi^(2k) (tile count grows as the square of the golden ratio)
The tiling has a hidden fivefold symmetry visible in the clustering of tiles around a central point. Look closely and you will find “stars” (five thin rhombuses meeting at a point), “aces” (a thick rhombus flanked by thin ones), “suns” (five thick rhombuses meeting at a point), and “deuce” clusters — all recurring motifs that never quite repeat. This fivefold symmetry is normally incompatible with periodicity in two dimensions, which is exactly why the tiling cannot be periodic. The simulation lets you step through deflation iterations and watch the pattern elaborate itself from a handful of tiles to tens of thousands, with each level revealing new clusters nested inside earlier ones.
In 1984, materials scientist Dan Shechtman discovered a real aluminium-manganese alloy whose diffraction pattern showed tenfold symmetry — impossible for a periodic crystal. He was ridiculed, then vindicated. The material was a quasicrystal: the three-dimensional analogue of a Penrose tiling. Shechtman received the Nobel Prize in Chemistry in 2011.
II. Apollonius Gasket — Descartes’ Circle Theorem
○Apollonius Gasket — Descartes Theorem & Fractal Dimension
Seed three mutually tangent circles; watch the gasket fill with Apollonius circles to configurable depth; display curvatures; compute the live Hausdorff dimension estimate.
Start with three mutually tangent circles. There are exactly two circles tangent to all three simultaneously: one nestled in the curved triangle between them, one enclosing all three from outside. Now repeat: in every newly created curved triangle, inscribe another tangent circle. The resulting fractal is the Apollonius gasket, and it is governed by one of the most elegant identities in classical geometry — Descartes’ Circle Theorem, published in 1643.
Define the curvature of a circle as k = 1 / r, where r is the radius. For the outer enclosing circle, whose interior faces outward relative to the packing, curvature is taken as negative. Descartes proved that for any four mutually tangent circles with curvatures k₁, k₂, k₃, k₄:
Descartes Circle Theorem:
(k1 + k2 + k3 + k4)^2 = 2 * (k1^2 + k2^2 + k3^2 + k4^2)
Rearranged to find the fourth curvature given three:
k4 = k1 + k2 + k3 ± 2 * sqrt(k1*k2 + k2*k3 + k3*k1)
Special case — starting configuration with outer circle of curvature k0 < 0:
If three inner circles all have the same curvature k:
k0 = k * (2*sqrt(3) - 3) / (2*sqrt(3) + 3) (approximately -0.1547 * k)
Hausdorff dimension of the residual set:
D_f ≈ 1.3057 (the circles never fill the plane; the gaps form a fractal set)
What makes Descartes’ theorem remarkable as a generative tool is that it is integer-preserving: if the four seed curvatures are integers, every circle generated by the recursion also has integer curvature. The Apollonian gasket seeded with curvatures −1, 2, 2, 3 produces an infinite family of circles whose curvatures are all positive integers, with every integer appearing infinitely many times. Number theorists have spent decades studying which integers appear (a deep problem touching Diophantine equations) while the gasket also encodes a fractal with Hausdorff dimension approximately 1.3057 — strictly between a curve and a filled region.
Computing the tangent point
Finding where two circles are tangent is straightforward: if two circles have centres C₁ and C₂ and radii r₁ and r₂, the tangent point lies on the line segment connecting their centres at distance r₁ from C₁. Placing the Apollonius circle correctly requires solving a system of three distance equations simultaneously, which reduces to evaluating the Descartes formula and then computing the new centre via a weighted combination of the existing three centres. The simulation visualises this at each step of the recursion, colouring circles by depth and displaying their curvatures on hover.
III. Hypotrochoid Spirographs — Gears, Ratios, and Lissajous Cousins
♥Spirograph — Hypotrochoid & Epitrochoid Curves
Set outer radius R, inner radius r, and pen offset d; choose hypotrochoid or epitrochoid; watch the curve close when r/R is rational; export SVG.
The Spirograph toy, invented by Denys Fisher in 1965 and sold in over 30 countries, is a physical computer for evaluating a family of parametric curves called hypotrochoids. A small circle of radius r rolls inside a fixed circle of radius R, and a pen fixed at distance d from the centre of the rolling circle traces the curve. The equations are deceptively simple:
Hypotrochoid (inner rolling circle):
x(t) = (R - r) * cos(t) + d * cos((R - r) * t / r)
y(t) = (R - r) * sin(t) - d * sin((R - r) * t / r)
Epitrochoid (outer rolling circle):
x(t) = (R + r) * cos(t) - d * cos((R + r) * t / r)
y(t) = (R + r) * sin(t) - d * sin((R + r) * t / r)
The curve closes when r/R is rational:
r/R = p/q (in lowest terms)
→ curve closes after q revolutions of the rolling circle
→ the pattern has p-fold symmetry (p inner petals or loops)
Special cases:
d = r → hypocycloid (pen on the rim): rose-like cusps
R = 2r, d = r → straight line (Tusi couple)
R/r = 5/3, d = r → five-pointed star with rounded points
d > r → outer loops ("prolate" trochoid)
The number of petals or loops in the completed curve equals p, the numerator of r/R in lowest terms. This is directly related to the theory of continued fractions: the “simplest” ratios (those whose numerator and denominator share no common factors and are both small) produce the most visually regular patterns. Irrational ratios — where r/R cannot be expressed as p/q — produce curves that never close, filling a region of the annulus densely as t increases.
The Tusi couple and Lissajous connection
When R = 2r and the pen is on the rim of the rolling circle (d = r), the hypotrochoid degenerates to a straight line oscillating back and forth — the Tusi couple, described by the 13th-century Persian astronomer Nasir al-Din al-Tusi as a model of linear planetary motion arising from circular gears. This is also why Lissajous figures (the figures produced by two perpendicular sinusoidal oscillations) look like special cases of spirographs: both arise from the same underlying parametric structure of sums of circular motions.
IV. Continued Fractions & the Stern-Brocot Tree
∞Continued Fractions & Stern-Brocot Tree
Enter any real number; watch its continued fraction expansion build; navigate the Stern-Brocot tree; visualise the best rational approximations and their convergence speed.
Every real number can be written as a continued fraction: an integer plus one over an integer plus one over an integer, and so on. Rational numbers terminate; algebraic irrationals like φ and √2 repeat; transcendentals like π continue without pattern. But the structure of the continued fraction encodes the number’s deepest arithmetic properties, and the Stern-Brocot tree makes that structure visible as geometry.
Continued fraction notation:
x = a0 + 1/(a1 + 1/(a2 + 1/(a3 + ...)))
Written: x = [a0; a1, a2, a3, ...]
Examples:
phi = [1; 1, 1, 1, 1, ...] (golden ratio: all 1s — hardest to approximate)
sqrt(2) = [1; 2, 2, 2, 2, ...] (repeating 2s)
pi = [3; 7, 15, 1, 292, 1, ...] (irregular; 292 gives excellent approximation 355/113)
e = [2; 1, 2, 1, 1, 4, 1, 1, 6, 1, 1, 8, ...] (elegant pattern)
Convergents (best rational approximations):
p_{-1} = 1, p_0 = a0, p_n = a_n * p_{n-1} + p_{n-2}
q_{-1} = 0, q_0 = 1, q_n = a_n * q_{n-1} + q_{n-2}
convergent: h_n / k_n = p_n / q_n
Error bound:
|x - p_n/q_n| < 1 / (k_n * k_{n+1})
→ large partial quotients a_{n+1} mean the previous convergent is exceptionally good
The Stern-Brocot tree is a binary tree containing every positive rational number exactly once, in lowest terms, generated by a process called the mediant: given two fractions p/q and r/s, their mediant is (p+r)/(q+s). Starting from 0/1 and 1/0, taking mediants at each step builds the entire tree. Each rational number’s position in the tree encodes its continued fraction expansion: left branches correspond to 0s (or even-position partial quotients) and right branches to 1s (or odd-position partial quotients), in a precise encoding.
The connection back to spirographs is direct: the gear ratio r/R determines the curve’s symmetry, and the continued fraction expansion of r/R tells you which rational approximations give the most visually distinctive patterns. The golden ratio φ = [1; 1, 1, 1,…] has the worst rational approximations among all irrationals — which is why sunflower seeds, arranged at angular increments of 360°/φ, pack as efficiently as possible: no rational gear ratio can approximate φ well enough to form visible rows until the denominator is very large.
Try It Yourself
All four simulations run in your browser with no installation. Here are three starting points that reward exploration:
◆Penrose Tiling — start at deflation level 4
Enable “show matching arrows” and zoom into a fivefold star cluster. Then step up two more deflation levels and find the same star nested inside the larger pattern.
Apollonius Gasket — try seed curvatures −1, 2, 2, 3
This integer-seeded gasket generates only integer curvatures. Hover over circles to read their curvatures; notice that every integer eventually appears.
Spirograph — set R=120, r=77, d=90
The ratio 77/120 is close to but not equal to a simple fraction: the curve takes a long time to close and fills the annulus densely before doing so. Then try R=100, r=40 for a clean five-petalled rose.
Closing Thought
What these four systems share is that their richness is not put in by hand. A Penrose tiling is determined by two shapes and a matching rule. The Apollonius gasket is determined by three circles and one theorem. A spirograph curve is determined by three numbers. The Stern-Brocot tree is determined by one operation applied recursively. The complexity — the infinite detail, the unexpected patterns, the aesthetic force — emerges entirely from the logic. That is perhaps the central lesson of generative art grounded in mathematics: you do not need to be creative in the ordinary sense. You need to find the right rules, and then get out of the way.