∿ Generative art

Truchet tiles

트루셰 타일

The maze- or wave-like pattern that emerges when square tiles are placed in one of two random orientations and tiled edge to edge. First studied by French monk Sébastien Truchet in 1704.

Also known as: Truchet pattern

···

js

const c = document.createElement('canvas');
document.body.appendChild(c);
c.style.width = '100%'; c.style.height = '100%';
const ctx = c.getContext('2d');
const cs = getComputedStyle(document.documentElement);
const ACCENT = cs.getPropertyValue('--accent').trim() || '#5b5bf7';
let w, h, cols, rows, grid, SIZE = 30;
function resize() {
  const dpr = Math.min(devicePixelRatio || 1, 2);
  w = innerWidth; h = innerHeight;
  c.width = w * dpr; c.height = h * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  cols = Math.ceil(w / SIZE) + 1; rows = Math.ceil(h / SIZE) + 1;
  grid = Array.from({ length: cols * rows }, () => Math.random() < 0.5);
}
addEventListener('resize', resize);
resize();

function drawTile(x, y, flipped) {
  ctx.beginPath();
  if (!flipped) { ctx.arc(x, y, SIZE / 2, 0, Math.PI / 2); ctx.moveTo(x + SIZE, y + SIZE); ctx.arc(x + SIZE, y + SIZE, SIZE / 2, Math.PI, 1.5 * Math.PI); }
  else { ctx.arc(x + SIZE, y, SIZE / 2, 0.5 * Math.PI, Math.PI); ctx.moveTo(x, y + SIZE); ctx.arc(x, y + SIZE, SIZE / 2, 1.5 * Math.PI, 2 * Math.PI); }
  ctx.stroke();
}
function draw() {
  ctx.fillStyle = '#0d0d12'; ctx.fillRect(0, 0, w, h);
  ctx.strokeStyle = ACCENT; ctx.lineWidth = 2.2; ctx.globalAlpha = 0.85;
  for (let r = 0; r < rows; r++) for (let cIdx = 0; cIdx < cols; cIdx++) drawTile(cIdx * SIZE, r * SIZE, grid[r * cols + cIdx]);
  ctx.globalAlpha = 1;
}
draw();
setInterval(() => {
  for (let i = 0; i < 4; i++) { const idx = Math.floor(Math.random() * grid.length); grid[idx] = !grid[idx]; }
  draw();
}, 220);

A single tile is a square with two quarter-circle arcs drawn across it. Rotate the tile 90 degrees and the arcs point the other way; fill a grid by flipping a coin for each cell between the original and the rotated version, and the individually simple tiles combine into a continuous maze- or wave-like curve pattern. Rules that keep neighbouring arcs connected produce an unbroken "wave"; pure randomness gives a more chaotic maze.

The technique started with printers combining decorative type ornaments into repeating patterns. Swap the base shape — semicircles, a straight diagonal, quarter-arcs — and the texture changes completely while the rule stays the same.

This demo slowly flips a handful of tiles over time, so instead of a static pattern it reads as a texture that's quietly still rearranging itself. It shows up in background patterns, site loading screens and tileable icon sets.

When to use

Use it for a repeating background that avoids feeling mechanical. Shrink the tile size for a tighter maze, enlarge it for a broader wave.