Canvas Generative Truchet Pattern — Free Procedural Tile Art Snippet

<div class="gp-wrap">
  <canvas id="gpCanvas" class="gp-canvas"></canvas>
  <div class="gp-panel">
    <span class="gp-tag">truchet tiles · generative art</span>
    <div class="gp-row">
      <label>Tile size <span id="gpSizeVal">36</span></label>
      <input type="range" id="gpSize" min="16" max="72" value="36" step="2" />
    </div>
    <div class="gp-row">
      <label>Palette</label>
      <select id="gpPalette">
        <option value="sunset">Sunset</option>
        <option value="ocean">Ocean</option>
        <option value="mono">Mono</option>
      </select>
    </div>
    <button class="gp-btn" id="gpRegen">Regenerate</button>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0a10;color:#eee;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gp-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(760px,96vw)}
.gp-canvas{width:100%;aspect-ratio:16/9;background:#0b0a10;border-radius:16px;border:1px solid rgba(255,255,255,.08);display:block}
.gp-panel{width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px 18px}
.gp-tag{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fca5a5;background:rgba(252,165,165,.1);border:1px solid rgba(252,165,165,.3);padding:4px 10px;border-radius:99px}
.gp-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#c9c4d0}
.gp-row input,.gp-row select{accent-color:#fb7185}
.gp-row select{background:#1a1720;color:#eee;border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:4px 8px;font-size:12px}
.gp-btn{margin-left:auto;background:#2a141a;border:1px solid rgba(252,165,165,.3);color:#fca5a5;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer}
.gp-btn:hover{background:#3a1a22}

const canvas = document.getElementById('gpCanvas');
const ctx = canvas.getContext('2d');
const sizeSlider = document.getElementById('gpSize');
const sizeVal = document.getElementById('gpSizeVal');
const paletteSel = document.getElementById('gpPalette');
const regenBtn = document.getElementById('gpRegen');

let width, height, dpr;

const PALETTES = {
  sunset: ['#fb7185', '#f97316', '#fbbf24', '#7c2d12'],
  ocean: ['#22d3ee', '#0ea5e9', '#6366f1', '#0f172a'],
  mono: ['#e5e7eb', '#9ca3af', '#4b5563', '#111827']
};

let seed = Math.random();
function rand() {
  // Simple mulberry32 PRNG so a given seed always reproduces the same tiling.
  seed |= 0; seed = (seed + 0x6D2B79F5) | 0;
  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
}

function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  render();
}

// Each Truchet tile is a square divided by a quarter-circle arc from one
// corner pair to the other; picking the arc orientation randomly per tile
// (0 or 1) is the entire trick behind the emergent maze-like pattern —
// there is no global path-planning, only a per-cell coin flip.
function drawTile(x, y, size, variant, colors) {
  ctx.save();
  ctx.translate(x, y);
  ctx.fillStyle = colors[0];
  ctx.fillRect(0, 0, size, size);

  const r = size / 2;
  ctx.strokeStyle = colors[1];
  ctx.lineWidth = Math.max(2, size * 0.09);
  ctx.lineCap = 'round';

  if (variant === 0) {
    ctx.beginPath(); ctx.arc(0, 0, r, 0, Math.PI / 2); ctx.stroke();
    ctx.beginPath(); ctx.arc(size, size, r, Math.PI, Math.PI * 1.5); ctx.stroke();
  } else {
    ctx.beginPath(); ctx.arc(size, 0, r, Math.PI / 2, Math.PI); ctx.stroke();
    ctx.beginPath(); ctx.arc(0, size, r, Math.PI * 1.5, Math.PI * 2); ctx.stroke();
  }
  ctx.restore();
}

function render() {
  const size = parseInt(sizeSlider.value, 10);
  sizeVal.textContent = String(size);
  const palette = PALETTES[paletteSel.value];
  const cols = Math.ceil(width / size) + 1;
  const rows = Math.ceil(height / size) + 1;

  ctx.clearRect(0, 0, width, height);
  for (let gy = 0; gy < rows; gy++) {
    for (let gx = 0; gx < cols; gx++) {
      const variant = rand() < 0.5 ? 0 : 1;
      const bg = [palette[3], palette[2]][((gx + gy) % 2)];
      const line = palette[rand() < 0.5 ? 0 : 1];
      drawTile(gx * size, gy * size, size, variant, [bg, line]);
    }
  }
}

function regenerate() {
  seed = (Math.random() * 4294967296) >>> 0;
  seedSnapshot = seed;
  render();
}

sizeSlider.addEventListener('input', () => { seed = seedSnapshot; render(); });
let seedSnapshot = seed;
regenBtn.addEventListener('click', regenerate);
paletteSel.addEventListener('change', () => { seed = seedSnapshot; render(); });
window.addEventListener('resize', () => { resize(); });

seedSnapshot = seed;
resize();