메타볼

const c = document.createElement('canvas');
document.body.appendChild(c);
c.style.width = '100%'; c.style.height = '100%';
const ctx = c.getContext('2d');
const GW = 110, GH = 66;
const small = document.createElement('canvas');
small.width = GW; small.height = GH;
const sctx = small.getContext('2d');
const img = sctx.createImageData(GW, GH);
const cs = getComputedStyle(document.documentElement);
const rgb = (cs.getPropertyValue('--accent').trim() || '#5b5bf7').match(/[0-9a-f]{2}/gi).map((x) => parseInt(x, 16));
let w, h;
function resize() {
  const dpr = Math.min(devicePixelRatio || 1, 2);
  w = innerWidth; h = innerHeight;
  c.width = w * dpr; c.height = h * dpr;
}
addEventListener('resize', resize);
resize();

const N = 6;
const balls = Array.from({ length: N }, () => ({ x: Math.random(), y: Math.random(), vx: (Math.random() - 0.5) * 0.006, vy: (Math.random() - 0.5) * 0.006, r: 0.09 + Math.random() * 0.06 }));
function step() {
  for (const b of balls) {
    b.x += b.vx; b.y += b.vy;
    if (b.x < 0.05 || b.x > 0.95) b.vx *= -1;
    if (b.y < 0.05 || b.y > 0.95) b.vy *= -1;
  }
}
function render() {
  for (let gy = 0; gy < GH; gy++) for (let gx = 0; gx < GW; gx++) {
    const px = gx / GW, py = gy / GH;
    let field = 0;
    for (const b of balls) { const dx = px - b.x, dy = py - b.y; field += (b.r * b.r) / (dx * dx + dy * dy + 0.0001); }
    const n = Math.max(0, Math.min(1, (field - 0.9) * 1.6));
    const i = (gy * GW + gx) * 4;
    img.data[i] = rgb[0] * n; img.data[i + 1] = rgb[1] * n; img.data[i + 2] = rgb[2] * n; img.data[i + 3] = 255;
  }
  sctx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = true;
  ctx.fillStyle = '#0d0d12'; ctx.fillRect(0, 0, c.width, c.height);
  ctx.drawImage(small, 0, 0, c.width, c.height);
}
for (let i = 0; i < 30; i++) step();
render();
(function loop() { step(); render(); requestAnimationFrame(loop); })();