Truchet tiles at five scales lock together seamlessly, flipping color at each level.
Christopher Carlson's multi-scale Truchet tiles on a quadtree. Each tile is a square whose bands, one third of the tile wide, enter every edge through its middle third (arcs, crosses, T junctions, capped bars), and each tile also has 'wings': discs of radius one third at its corners, in its ground color, that spill onto its neighbors. The trick is that colors invert at every level of subdivision, dark ground with light bands, then light with dark, then dark again. Where a big tile meets half-size ones, the small tiles' wings land on the big tile's corners and edge midpoints and round off its bands and cut rings into its corner discs, so every join between scales is seamless. Tiles are drawn from largest to smallest, the tree is kept balanced so neighbors differ by at most one level, and a turning coarse-to-fine gradient, drifting noise and expanding ripples keep resizing it, each change revealed by a circular wipe.
Try it. Click or drag to split tiles under the pointer; shift-click, shift-drag or right-click to merge them. G outlines every tile colored by level, P cycles color schemes, R deals new motifs, and Space pauses the waves.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build multiscale Truchet tiles (Christopher Carlson's version) with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Draw a grid of square tiles about 160 pixels across. Each tile has a dark ground and two light quarter-circle bands, each one third of the tile wide, centered on arcs of radius half the tile around two opposite corners. Pick one of the two orientations at random per tile. You should see the classic winding Truchet maze.
- Give every tile "wings": dark discs of radius one third of the tile at its four corners. They spill over the edges, but on a uniform grid you won't see them yet.
Then add more scales:
- Let any tile split into four half-size tiles, recursively, like a quadtree, up to three or four levels. Choose which tiles to split with a smooth noise function so big and small tiles form regions.
- The key trick: invert the colors at every level. Half-size tiles get a light ground, dark bands and light wings; quarter-size tiles go back to dark ground.
- Draw the tiles from largest to smallest so the smaller tiles' wings land on top of their bigger neighbors. Look closely where scales meet: it should be seamless.
- Keep the tree balanced, so neighboring tiles never differ by more than one level.
Once that works, make it beautiful:
- Add more tile motifs that still enter each edge through its middle third: a cross, a straight band with rounded end caps, a T junction.
- Click to split the tile under the mouse, and animate the noise so the scales slowly drift.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as animated transitions between scales, color palettes per level, or exporting a poster-size image.
