Monotile

Guide · site 177 · wave 8, Form

How Monotile was made

Monotile presents the hat — the first single shape proven to tile the plane aperiodically — as a live workbench assembly. The audience is anyone who heard "a hobbyist solved a 60-year-old maths problem with scissors" and wants to see the shape actually do it. The page has one job: make you watch aperiodic order grow, tile by tile, and believe it's real — because it is. The assembly is generated in-page by the substitution system from the 2023 proof, not by a decorative approximation.

01 · Palette

Card stock on a dark workbench

The story is a kitchen-table discovery — paper, scissors, pencil — so the palette is literal: pale card tiles laid on a slate bench, annotated in pencil grey, with the rare mirror-flipped hats flagged in a marker coral. Four near-identical paper tones keep a field of 400 identical shapes from reading as flat wallpaper; the eye registers cut card, not vector fill.

#1E2226
Workbench slate
The bench under the card. Dark enough for 4.5:1 body ink, warm-grey rather than blue-black.
#E9E4D8
Paper tile
The unreflected hat. Off-white card, not screen white — Smith cut his from cereal-box stock.
#E1DBCB · #EFEAE0 · #D8D1BF
Paper cuts 2–4
Three sibling tones dealt at random so adjacent tiles catch light differently, like real cut card.
#D96A4A
Reflected coral
Marks only the mirror-flipped minority (~12.7%). One accent, one meaning — nothing else on the page is coral except its own counter.
#C9CFD4
Pencil ink
Body text and annotation — 8.9:1 on the slate. Dimmer greys (#8F979E, #6C747B) handle labels and rules, never running copy.

02 · Type

Karla + Fragment Mono

One shape. No repeats.

Karla 300–800 · display & body

tiles 259 · reflected 34

Fragment Mono · tallies, labels, edges

Karla is a grotesque with visible hand-drawn quirk — the right voice for a proof that began with scissors rather than a supercomputer. At weight 800 with tight tracking it gives the three-beat headline its certainty; at 400 it stays warm for long copy. Fragment Mono does the measuring: the live tally, section numbers, edge lengths (1 and √3), figure captions — every place the page behaves like a lab notebook rather than a poster. Uppercase mono with .2–.3em tracking is the annotation register; it never sets sentences.

03 · Techniques

The real substitution system, in SVG

The signature element is honest. The hero runs the actual H/T/P/F metatile machinery from Smith, Myers, Kaplan & Goodman-Strauss (2023). Four base metatiles (H holds four hats, one reflected; T one; P and F two each) are combined by a 28-rule patch — each rule welds a new metatile edge-to-edge onto the patch using an affine matchTwo transform that maps one segment onto another. From that patch the code derives the next generation's four supertiles and recurses three levels, yielding a few thousand hats of guaranteed-aperiodic tiling; the ~400 inside the viewport survive a cull.

Every hat is one SVG <use href="#hat"> under a matrix() transform — the 13-gon path is defined once and stamped hundreds of times, so the whole field costs one path definition. Reflection is read straight off the maths: a negative transform determinant means the hat is mirrored, and that test alone decides which tiles wear coral. The φ⁴ : 1 ratio in the copy isn't asserted by the code — it emerges from the substitution, and the live counter keeps checking it in public.

The assembly engine sorts surviving hats radially from the seed (with deterministic jitter, seed 177) and snaps them in on a build → hold → clear → rest cycle, so the patch is forever mid-assembly — a designed resting state that reads at a 7-second thumbnail. Placement flips a class; a scale(1.28)→1 keyframe with an overshoot bezier gives each tile its snap. Second-order supertile outlines are kept as dashed pencil paths that fade in on a cycle, and pointer position (mapped through the slice viewBox maths) picks out the cluster under the cursor. A faint kite lattice behind everything is drawn once and aligned by inverting the seed tile's transform — every hat is an isometry of that one shared grid, which is the quiet visual proof of the polykite section.

One path, stamped 400 times — the whole tiling is this shape

No libraries. The page is one HTML file: vanilla JS builds the geometry (~120 lines of matrix code), the DOM is SVG, the motion is CSS. Reduced-motion gets a settled mid-assembly frame with the cycle stopped; the rAF loop idles while the tab is hidden; resize costs nothing because the viewBox owns all scaling.

04 · Iteration log

Three passes