테라조

<div class="tz"><svg id="chips" viewBox="0 0 340 108" preserveAspectRatio="xMidYMid slice" width="100%" height="100%"><rect width="340" height="108" fill="#e7e1d2"/></svg></div><span class="tag">terrazzo</span>

.tz{position:absolute;inset:0;overflow:hidden;animation:tzzoom 8s ease-in-out infinite}
@keyframes tzzoom{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.tag{position:absolute;left:10px;bottom:8px;padding:3px 9px;border-radius:999px;background:rgba(30,30,30,.75);
  color:#ece7dc;font:600 10px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.03em}

// 시드 고정 PRNG(mulberry32) — 새로고침해도 항상 같은 칩 배치가 나오게 한다.
function mulberry32(seed) {
  let a = seed;
  return function () {
    a |= 0; a = (a + 0x6D2B79F5) | 0;
    let t = Math.imul(a ^ (a >>> 15), 1 | a);
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}
const rand = mulberry32(20260926);
const NS = 'http://www.w3.org/2000/svg';
const W = 340, H = 108;
const svg = document.getElementById('chips');
const colors = ['#f7f2e6', '#e2705c', '#3f7d6b', '#274472', '#e6b325'];

// 바탕의 고운 알갱이(speckle) — 실제 테라조 시멘트 바탕의 미세한 골재 느낌
for (let i = 0; i < 260; i++) {
  const c = document.createElementNS(NS, 'circle');
  c.setAttribute('cx', (rand() * W).toFixed(1));
  c.setAttribute('cy', (rand() * H).toFixed(1));
  c.setAttribute('r', (0.35 + rand() * 0.5).toFixed(2));
  c.setAttribute('fill', 'rgba(50,42,28,' + (0.1 + rand() * 0.12).toFixed(2) + ')');
  svg.appendChild(c);
}

// 불규칙 다각형 칩 — 순수 균일 난수는 큰 빈틈을 만들어 "드문드문"해진다.
// 지터드 그리드(칸을 나누고 칸 안에서만 흔들기)로 빈 구역 없이 촘촘하게 채운다.
const COLS = 17, ROWS = 6;
const cellW = W / COLS, cellH = H / ROWS;
function chip(cx, cy, baseR) {
  const sides = 4 + Math.floor(rand() * 4);
  const rot = rand() * Math.PI * 2;
  let d = '';
  for (let s = 0; s < sides; s++) {
    const a = rot + (s / sides) * Math.PI * 2;
    const r = baseR * (0.62 + rand() * 0.68);
    const x = cx + Math.cos(a) * r;
    const y = cy + Math.sin(a) * r;
    d += (s === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
  }
  const p = document.createElementNS(NS, 'path');
  p.setAttribute('d', d + 'Z');
  p.setAttribute('fill', colors[Math.floor(rand() * colors.length)]);
  p.setAttribute('opacity', (0.9 + rand() * 0.1).toFixed(2));
  svg.appendChild(p);
}
for (let row = 0; row < ROWS; row++) {
  for (let col = 0; col < COLS; col++) {
    const cx = (col + 0.5) * cellW + (rand() - 0.5) * cellW * 0.7;
    const cy = (row + 0.5) * cellH + (rand() - 0.5) * cellH * 0.7;
    chip(cx, cy, Math.min(cellW, cellH) * (0.26 + rand() * 0.3));
    // 칸마다 1/3 확률로 작은 보조 칩을 하나 더 얹어 크기 편차를 준다 (바탕은 그대로 보여야 진짜 테라조답다)
    if (rand() < 0.32) {
      chip(cx + (rand() - 0.5) * cellW, cy + (rand() - 0.5) * cellH, Math.min(cellW, cellH) * (0.12 + rand() * 0.14));
    }
  }
}