Seed

<div class="wrap">
  <canvas id="cv"></canvas>
  <div class="panel"><span class="lblseed">seed <b id="seedval">-</b></span><span class="tag" id="tag"></span></div>
</div>

.wrap{position:relative;width:100%;height:100%}
#cv{position:absolute;inset:0;width:100%;height:100%}
.panel{position:absolute;top:10px;left:10px;right:10px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:10px;background:rgba(13,13,18,0.55);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.15)}
.lblseed{font-family:ui-monospace,monospace;font-size:11.5px;color:#f1f0ec}
.lblseed b{color:var(--accent)}
.tag{font-size:10.5px;font-weight:700;color:#b7b7c2}

const cv = document.getElementById('cv'), ctx = cv.getContext('2d');
const seedval = document.getElementById('seedval'), tag = document.getElementById('tag');
function fit() { const dpr = Math.min(devicePixelRatio || 1, 2); cv.width = innerWidth * dpr; cv.height = innerHeight * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); }
addEventListener('resize', fit); fit();

function mulberry32(a) { 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; }; }

function scene(seed) {
  const w = innerWidth, h = innerHeight;
  const r = mulberry32(seed);
  const hue = Math.floor(r() * 360);
  const g = ctx.createLinearGradient(0, 0, 0, h);
  g.addColorStop(0, 'hsl(' + hue + ' 55% 68%)'); g.addColorStop(1, 'hsl(' + ((hue + 30) % 360) + ' 45% 36%)');
  ctx.fillStyle = g; ctx.fillRect(0, 0, w, h);
  ctx.beginPath(); ctx.arc(w * (0.2 + r() * 0.6), h * (0.18 + r() * 0.12), Math.min(w, h) * 0.07, 0, Math.PI * 2);
  ctx.fillStyle = 'hsl(' + ((hue + 180) % 360) + ' 85% 70%)'; ctx.fill();
  for (let l = 0; l < 3; l++) {
    ctx.beginPath(); ctx.moveTo(0, h);
    for (let i = 0; i <= 7; i++) { const x = w * i / 7; const y = h * (0.5 + l * 0.13) - r() * h * 0.1; ctx.lineTo(x, y); }
    ctx.lineTo(w, h); ctx.closePath();
    ctx.fillStyle = 'hsl(' + ((hue + l * 20) % 360) + ' 40% ' + (18 + l * 10) + '%)'; ctx.fill();
  }
}

const A = 48213, B = 91027;
let seedNow = A;
function step() {
  scene(seedNow); seedval.textContent = seedNow; tag.textContent = '생성됨';
  setTimeout(() => {
    scene(seedNow); tag.textContent = '같은 시드로 재생성 → 동일한 이미지';
    setTimeout(() => {
      seedNow = seedNow === A ? B : A;
      scene(seedNow); seedval.textContent = seedNow; tag.textContent = '시드 변경 → 다른 이미지';
      setTimeout(step, 2000);
    }, 1800);
  }, 1800);
}
step();