Rotating Truchet tiles
Quarter circle tiles form winding paths and occasionally rotate, rebuilding the maze as they turn, on canvas.
Settings
Code
<div class="pt-truchet"><canvas></canvas></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
See all BackgroundsWhere to use it
Truchet tiles are squares with two quarter circle arcs in opposite corners. Placed at random orientations, they join into endless loops and winding paths. Here a few tiles rotate by ninety degrees every moment with a smooth ease, briefly lighting up in the third color, so the maze keeps rewriting itself without ever breaking its lines.
Line color drifts diagonally from the first to the second color, density sets the tile size and speed how often tiles turn. It brings a playful, geometric energy to studios, kids products, puzzles and conference pages.