Canvas Metaball Blobs — Free Organic Merging Blob Field Snippet

<div class="mb-wrap">
  <canvas id="mbCanvas" class="mb-canvas"></canvas>
  <p class="mb-hint">Move your cursor over the blobs — they merge and split with a wet, organic pull.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#050b12;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.mb-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(720px,96vw)}
.mb-canvas{width:100%;aspect-ratio:16/9;background:#050b12;border-radius:20px;border:1px solid rgba(255,255,255,.08);display:block}
.mb-hint{color:#5f7a86;font-size:12px;letter-spacing:.03em;text-align:center}

const canvas = document.getElementById('mbCanvas');
const ctx = canvas.getContext('2d');
let width, height, dpr;
let imgData, buffer;
let cell = 6; // sampling grid cell size in CSS px
let gridW, gridH;

function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 1.5);
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  gridW = Math.ceil((width * dpr) / cell);
  gridH = Math.ceil((height * dpr) / cell);
  imgData = ctx.createImageData(canvas.width, canvas.height);
  buffer = new Uint8ClampedArray(canvas.width * canvas.height * 4);
}

const NUM_BALLS = 7;
let balls = [];
let pointer = { x: -9999, y: -9999, active: false };

function initBalls() {
  balls = [];
  for (let i = 0; i < NUM_BALLS; i++) {
    balls.push({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: (Math.random() - 0.5) * 1.6,
      vy: (Math.random() - 0.5) * 1.6,
      r: 34 + Math.random() * 26,
      hue: 185 + Math.random() * 90
    });
  }
}

function pointerPos(e) {
  const rect = canvas.getBoundingClientRect();
  const t = e.touches ? e.touches[0] : e;
  return { x: t.clientX - rect.left, y: t.clientY - rect.top };
}
canvas.addEventListener('mousemove', e => { pointer = { ...pointerPos(e), active: true }; });
canvas.addEventListener('mouseleave', () => { pointer.active = false; });
canvas.addEventListener('touchmove', e => { pointer = { ...pointerPos(e), active: true }; }, { passive: true });
canvas.addEventListener('touchend', () => { pointer.active = false; });

function updateBalls() {
  for (const b of balls) {
    if (pointer.active) {
      const dx = pointer.x - b.x;
      const dy = pointer.y - b.y;
      const dist = Math.hypot(dx, dy) || 1;
      if (dist < 220) {
        // Cursor gently attracts nearby blobs, giving the "wet pull" feel.
        b.vx += (dx / dist) * 0.06;
        b.vy += (dy / dist) * 0.06;
      }
    }
    b.x += b.vx;
    b.y += b.vy;
    b.vx *= 0.985;
    b.vy *= 0.985;
    if (b.x < b.r) { b.x = b.r; b.vx *= -1; }
    if (b.x > width - b.r) { b.x = width - b.r; b.vx *= -1; }
    if (b.y < b.r) { b.y = b.r; b.vy *= -1; }
    if (b.y > height - b.r) { b.y = height - b.r; b.vy *= -1; }
  }
}

// The metaball field: at every sample point, sum each ball's influence as
// r^2 / distance^2 (an inverse-square falloff). Where the summed field
// exceeds a threshold, the pixel is considered "inside" the merged blob
// surface — this is what makes nearby blobs visually fuse into one shape.
function render() {
  const dprCell = cell;
  const cols = gridW, rows = gridH;
  const field = new Float32Array(cols * rows);

  for (let gy = 0; gy < rows; gy++) {
    const py = gy * dprCell;
    for (let gx = 0; gx < cols; gx++) {
      const px = gx * dprCell;
      let sum = 0;
      for (const b of balls) {
        const bx = b.x * dpr, by = b.y * dpr, br = b.r * dpr;
        const dx = px - bx, dy = py - by;
        const d2 = dx * dx + dy * dy || 0.0001;
        sum += (br * br) / d2;
      }
      field[gy * cols + gx] = sum;
    }
  }

  const data = imgData.data;
  data.fill(0);
  const cw = canvas.width;
  for (let gy = 0; gy < rows; gy++) {
    for (let gx = 0; gx < cols; gx++) {
      const v = field[gy * cols + gx];
      if (v < 1.0) continue;
      const edge = Math.min(1, (v - 1.0) * 3);
      const hueSample = balls[(gx + gy) % balls.length].hue;
      const rC = Math.round(60 + Math.sin(hueSample) * 40 + edge * 40);
      const startX = gx * dprCell, startY = gy * dprCell;
      const endX = Math.min(startX + dprCell, cw);
      const endY = Math.min(startY + dprCell, canvas.height);
      for (let y = startY; y < endY; y++) {
        let idx = (y * cw + startX) * 4;
        for (let x = startX; x < endX; x++) {
          data[idx] = 60 + edge * 90;
          data[idx + 1] = 170 + edge * 60;
          data[idx + 2] = 220 + edge * 30;
          data[idx + 3] = Math.min(255, 140 + edge * 160);
          idx += 4;
        }
      }
    }
  }
  ctx.putImageData(imgData, 0, 0);
}

function tick() {
  updateBalls();
  render();
  requestAnimationFrame(tick);
}

resize();
initBalls();
window.addEventListener('resize', () => { resize(); });
tick();