← All effects

Metaballs

BackgroundVanilla JS · zero dependencies1/3-res field, scaled up smooth
-- fps
prefers-reduced-motion detected — blobs shown frozen

X-ray · layers

the merge threshold (off = plain circles)
a brighter edge band
the blobs orbit slowly

Parameters

Blobs5
Blob size55
Speed1.0×
Stickiness1.00
your version · updates as you tinker

How this effect works

Each blob is an invisible field of influence that falls off with distance — strong at the center, weak far away, computed as radius² / distance². For every pixel we sum the influence of all blobs and ask one question: is the total above the threshold? Above = liquid, below = empty. When two blobs approach, their fields overlap and the space between them crosses the threshold first — that's the neck that forms, exactly like two water drops touching. Nobody draws the merge; it falls out of the addition.

Doing that per pixel sounds expensive, so we cheat honestly: the field is computed on a canvas three times smaller and stretched up with smoothing on — goo has no sharp details, so nothing is lost. The rim layer colours the band just above the threshold brighter, tracing a live outline around the liquid; lower the stickiness and blobs reach out to each other from farther away.

Production notes: respects prefers-reduced-motion (frozen frame) · cost = low-res pixels × blob count; the size slider matters more than the count slider · the low-res buffer is the whole performance story — never compute goo at full resolution · the copied snippet is self-contained HTML + JS.