서클 패킹

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 palette = [cs.getPropertyValue('--accent').trim(), cs.getPropertyValue('--accent-2').trim(), cs.getPropertyValue('--accent-3').trim()].map(x => x || '#5b5bf7');
let w, h;
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);
}
addEventListener('resize', resize);
resize();

const MAX = 240;
const circles = [];
function tryAdd() {
  if (circles.length >= MAX) return;
  for (let i = 0; i < 10; i++) {
    const x = Math.random() * w, y = Math.random() * h;
    let ok = true;
    for (const cir of circles) if (Math.hypot(x - cir.x, y - cir.y) < cir.r + 3) { ok = false; break; }
    if (ok) { circles.push({ x, y, r: 1.5, col: palette[circles.length % palette.length] }); return; }
  }
}
function step() {
  for (const cir of circles) {
    let can = cir.x - cir.r > 0 && cir.x + cir.r < w && cir.y - cir.r > 0 && cir.y + cir.r < h;
    if (can) for (const o of circles) { if (o === cir) continue; if (Math.hypot(cir.x - o.x, cir.y - o.y) < cir.r + o.r + 0.6) { can = false; break; } }
    if (can) cir.r += 0.18;
  }
  tryAdd();
}
function draw() {
  ctx.fillStyle = '#0d0d12'; ctx.fillRect(0, 0, w, h);
  for (const cir of circles) {
    ctx.beginPath(); ctx.arc(cir.x, cir.y, cir.r, 0, 7);
    ctx.fillStyle = cir.col; ctx.globalAlpha = 0.85; ctx.fill();
    ctx.globalAlpha = 1; ctx.strokeStyle = '#0d0d12'; ctx.lineWidth = 1.5; ctx.stroke();
  }
}
for (let i = 0; i < 160; i++) step(); // 미리 패킹을 진행해서 처음부터 빼곡하게 보이도록
draw();
(function loop() { step(); draw(); requestAnimationFrame(loop); })();