Design AtlasTwo separate shapes — a button and a circle floating up over it — normally have crisp edges, so even when they get close they still read as two overlapping shapes. The SVG "gooey" filter is what melts them into one. feGaussianBlur spreads each shape's edge into a soft gradient; feColorMatrix then pushes the alpha channel's contrast to an extreme (mid-tone alpha gets forced to either 0 or 1). Wherever the two blurred edges overlap, alpha stays high and survives; wherever they're apart, alpha gets crushed to 0 — the visual result reads exactly like two droplets merging.
Apply that filter to a container with CSS filter: url(#goo), and inside it animate the button plus a few small "bubble" circles floating up from below — the instant a bubble's blurred edge reaches the button's, it reads as being absorbed. Every shape inside the filtered container must share the same fill color, or the merge looks off — differing colors leave a visible seam even after the shapes blend.
Gaussian blur itself isn't expensive, but the entire filtered region repaints every frame, so scoping the filter to a small area around the button — not the whole screen — keeps it cheap.
When to use
Use it to emphasize a single CTA button. Since the whole filtered area repaints every frame, applying it to dozens of buttons in a list at once can make scrolling stutter.