How Truchet was made

A single quarter-arc tile, rotated through its four positions at three nested scales, weaves an endless corridor system — Sébastien Truchet's 1704 idea carried through Cyril Stanley Smith's arcs and Christopher Carlson's multiscale construction. The page has one job: let you watch whole path systems reconnect as slow waves quarter-turn the tiles, and catch the moment a corridor closes on itself and gets traced in teal. It is pitched at people who like their mathematics wearing 1970s supergraphics.

Terminal-panel cream, burnt orange, chocolate and teal — the airport-corridor and ceramic-glaze colours of 1970s environmental graphics, which is exactly where giant quarter-circle motifs lived. Two darker ink variants exist for small text only; the pure accents are reserved for lines, marks and display sizes.

Everything is one 2D canvas plus static inline SVG diagrams. No libraries, no raster assets.

Multiscale construction. A quadtree over the hero — value-noise decides which cells subdivide once or twice, then a balancing sweep caps neighbours at 2:1 scale difference. Each leaf tile carries two central quarter-arcs (radius s/2, band 0.3s, centred on opposite corners by orientation), four corner rings at half band width, and its edge ports at ¼, ½ and ¾. Ports are hashed into a map keyed by position and band width to a tenth of a pixel; rings whose interior ports find no partner are culled in a cascade, unpartnered band ends become round sockets, and the count that survives is printed on the page — n joints verified, 0 mismatches. Because a child band is exactly half its parent's width and lands on a parent ring port, arcs meet flush across every scale boundary.

The wave. A front sweeps the field at 27°, tiles in its wake quarter-turning with a slight overshoot ease (about 58% of them). Finished flips mark the connectivity graph dirty; a throttled rebuild re-runs union–find over the arc-port graph, recolours corridor components (a hashed 24% take the orange), and re-batches all static arcs into Path2D objects per width so the steady state draws in a handful of stroke calls.

The loop tracer. Closed corridors fall out of the same port graph — follow each arc's partner until you return to the start. The tracer prefers long loops, runs the teal line around at three-fifths band width with an eased head, holds, and fades; if a wave flips any tile under a loop mid-trace, the trace fades early — honestly, since that corridor no longer exists. Reduced motion renders one settled frame with the longest loop already held; the rAF loop pauses when the tab hides, DPR caps at 2, and resize rebuilds the whole field.