Truchet Tiles

About this piece

Every cell of this grid carries the same tile: two quarter circles of radius half a cell, centred on opposite corners. Only the tile’s rotation differs from cell to cell — and because a 180° turn maps the tile onto itself, there are only two distinct orientations. One bit per cell decides the whole picture.

The reason it does not look like a grid of tiles is a single geometric fact: an arc of that radius, centred on a corner, begins and ends exactly at the midpoint of an edge. Its neighbour’s arcs land on the same midpoints, whichever way that neighbour is turned. So the joins are always seamless, and curves wander across the entire frame even though no cell knows anything about the cells around it.

Sébastien Truchet catalogued the patterns from a single rotatable square tile in a 1704 memoir for the French Royal Academy of Sciences; the quarter-arc version drawn here comes from Cyril Stanley Smith’s 1987 paper on Truchet. Both tiles, and a 17-line program that draws the second, are below.

What to look for

About seven cells a second re-roll their target rotation, and each one eases into the new angle over roughly a second rather than snapping. Pick a long meander and watch it get cut and re-routed as a cell somewhere along it turns.

Roughly one cell in seven is coral. Colour belongs to the tile, not to the curve — so a single continuous loop will often change ink halfway round, which is a good way to see that the curves really are an accident of the tiling.

Honest limit: this is a grid, and the piece needs width to read. In a narrow phone-portrait frame you get about six cells across, and at that size it looks more like a pattern swatch than a meander. It is at its best wide.

Truchet’s original tile

The idea is older than the arcs. In 1704 Father Sébastien Truchet (1657–1729), an honorary member of the French Royal Academy of Sciences since 1699, published Mémoire sur les combinaisons in the Mémoires de l’Académie Royale des Sciences (pages 363–372). He explains how it started: on a trip to the Canal d’Orléans he found, at a château near Orléans, ceramic tiles waiting to be laid in a chapel floor that were “of square shape, divided by a diagonal line into two coloured parts”, and he set out to count the ways such tiles could be joined, “always in checkerboard array”.

That tile has no rotational symmetry, so it can be laid in four orientations: the coloured triangle can sit in any of the four corners. Two tiles side by side already give 4 × 4 = 16 arrangements, and a whole floor is a choice of one of four per square. Tiling floors was nothing new; what Truchet did first, as Jacques André and Denis Girou put it in a 1999 TUGboat article on Truchet, was to publish a systematic study of all the combinations.

Smith’s quarter-arc version

The tile this piece draws came later. In 1987 Cyril Stanley Smith published “The tiling patterns of Sebastian Truchet and the topology of structural hierarchy” in the journal Leonardo (volume 20, issue 4, pages 373–385), with an English translation of Truchet’s text by Pauline Boucher. That paper popularised Truchet tiles, and the second common form of them comes from it: each tile carries two quarter circles that connect the midpoints of adjacent sides. The same tile had already appeared in the board games Trax and the Black Path Game before Smith’s paper.

Why only two orientations. Each arc is centred on a corner and has a radius of half the tile, and the two arcs sit on opposite corners. Turn the tile 90° and the arcs move to the other pair of corners: a different tile. Turn it 180° and each arc lands exactly where the other one was, so the tile is unchanged. That leaves two distinct tiles, and the whole grid is one bit per cell, where Truchet’s triangle needed two.

Why every join is seamless. An arc of radius half the side, centred on a corner, starts at the midpoint of one edge and ends at the midpoint of the next. Two arcs with two ends each make four ends, one on each side, so every tile has an arc ending at the middle of every edge, however it is turned. The neighbour across that edge has one too, at the same point. Both arcs also cross the edge at a right angle (the radius at that point runs along the edge), so the two halves line up with no kink.

Two things you can check by eye

Every curve either closes into a loop or runs off the edge of the frame. No curve ever stops in the middle of the picture. Each edge midpoint inside the grid is the meeting point of exactly two arc ends, one from each tile, so a curve arriving there always has exactly one way on. Only where there is no next tile, at the border, can a curve end. The smallest loop is a circle of four quarter arcs round one grid corner, which you get whenever all four tiles around that corner put an arc on it.

The regions between the curves can always be coloured with two colours so that regions on opposite sides of any curve differ. A recipe that always works: number the grid corners (column + row) and colour each region by whether the corners inside it are even or odd. Inside each tile, an arc cuts off one corner from the band that holds the other two, and those two are diagonal neighbours with the same parity, the opposite of the cut-off corner. So the rule is consistent, and every curve has an even region on one side and an odd one on the other.

Honest limit: both hold for tiles at rest. While a cell is part-way through its eased turn, its arcs briefly come loose from its neighbours’, and for that second the loops are open.

Draw your own

This is the whole technique in 17 lines of HTML and plain JavaScript, with no library: a 480-pixel canvas cut into a 12 × 12 grid of 40-pixel cells, one coin flip per cell, the same two ctx.arc calls this piece makes, and the same trick of turning the tile a quarter turn (q) with ctx.rotate instead of writing out the second orientation. Save it as an .html file and open it; reload for a new pattern.

<canvas id="truchet" width="480" height="480"></canvas>
<script>
const ctx = document.getElementById('truchet').getContext('2d');
const n = 12, s = 480 / n, r = s / 2, q = Math.PI / 2;
ctx.lineWidth = s * 0.13;
ctx.strokeStyle = '#2C4ED0';
for (let row = 0; row < n; row++) {
  for (let col = 0; col < n; col++) {
    ctx.save();
    ctx.translate(col * s + r, row * s + r); // cell centre
    if (Math.random() < 0.5) ctx.rotate(q);  // the coin flip
    ctx.beginPath(); ctx.arc(-r, -r, r, 0, q); ctx.stroke();
    ctx.beginPath(); ctx.arc(r, r, r, 2 * q, 3 * q); ctx.stroke();
    ctx.restore();
  }
}
</script>

Where to take it: change n for finer or coarser grids, or swap the colour. Replace the coin flip with a rule, such as (row + col) % 2 === 1, and the randomness is gone: alternating the two tiles closes every curve that does not touch the border into a small four-arc circle. What it does not do is the animation above (the eased re-rolling and the theme-matched palette); this is the still pattern only.

Curious how the loop and canvas fit together? Read how it works →