Liquid & Organic · Behaves like water
Metaball融球
- viscous
- organic
- connected
Small satellites orbit a core; as one comes close a bridge grows between them and breaks again when it leaves. They do not touch, they merge like droplets — so it reads as something with surface tension rather than a few circles.
When to use it
For a short process about things coming together or counting up: adding to cart, connecting a device, a download. It only makes sense while something is moving, so do not use it as a static icon. One per page — metaballs are loud, and a second one turns them into trim.
Parameters
goo: blur σ9 + alpha ×20 −9 · satellite r 42–82px · core Ø56px · orbit 0.5–0.76 rad/s · sine-eased, per-frame loop
Recipe
Metaball → goo: blur σ9 + alpha ×20 −9 · satellite r 42–82px · core Ø56px · orbit 0.5–0.76 rad/s · sine-eased, per-frame loop
One sentence for your AI
Build a set of merging balls: a 56px core stays put while three 30px satellites orbit it, their orbital radius swinging between 42px and 82px (at 42px one just touches the core and a bridge grows, at 82px they are fully apart), each at a different angular speed. Do the merging with one SVG filter: feGaussianBlur at σ=9 softens the edges, then feColorMatrix multiplies alpha by 20 and subtracts 9 to cut the softened edge back into a hard one. Draw the core only once inside the filtered layer, and put only the icon and the label outside it — drawing the same circle in both layers misaligns them by half a pixel and reads as two overlapping circles.