Metaballs: blobs that melt into each other

<canvas id="goo" style="width:100%;aspect-ratio:16/9;background:#14081f"></canvas>
<script>
const canvas = document.getElementById('goo')
const W = 160, H = 90
canvas.width = W; canvas.height = H
const g = canvas.getContext('2d')
const img = g.createImageData(W, H)
const balls = Array.from({ length: 6 }, (_, i) => ({ r: 9 + i * 1.6, phase: i * 1.7, speed: 0.25 + i * 0.06 }))
const still = matchMedia('(prefers-reduced-motion: reduce)').matches
function frame(ms) {
  const t = still ? 0 : ms / 1000
  const pts = balls.map((b) => [
    W / 2 + Math.cos(t * b.speed + b.phase) * W * 0.3,
    H / 2 + Math.sin(t * b.speed * 1.3 + b.phase) * H * 0.3,
    b.r * b.r,
  ])
  for (let y = 0; y < H; y++) {
    for (let x = 0; x < W; x++) {
      let f = 0
      for (const [bx, by, r2] of pts) f += r2 / ((x - bx) ** 2 + (y - by) ** 2 + 1)
      const inside = Math.min(1, Math.max(0, (f - 0.9) * 5)) // soft edge from 0.9 to 1.1
      const core = Math.min(1, Math.max(0, f - 1))
      const i = (y * W + x) * 4
      img.data[i] = 20 + inside * 235
      img.data[i + 1] = 8 + inside * (90 + core * 120)
      img.data[i + 2] = 31 + inside * 20
      img.data[i + 3] = 255
    }
  }
  g.putImageData(img, 0, 0)
  if (!still) requestAnimationFrame(frame)
}
requestAnimationFrame(frame)
</script>