트루셰 타일

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);