Applies a Gaussian blur of 5px to the entire source graphic. This softens the edges of both the button and the "+" circle so they bleed into each other when close, creating the raw material for the gooey merge.

<feGaussianBlur
  in="SourceGraphic"
  stdDeviation="5"
  result="blur"
/>

→ Toggle off to see: without blur, there's nothing soft for the color matrix to sharpen, so the gooey merge breaks entirely.

This is the magic step. The matrix multiplies the alpha channel by 18 and subtracts 15. This dramatically boosts contrast on the blurred alpha. Semi-transparent blurred pixels become either fully opaque or fully transparent, creating a sharp "liquid" edge from the soft blur.

<feColorMatrix
  in="blur"
  type="matrix"
  values="
    1 0 0 0 0    ← Red unchanged
    0 1 0 0 0    ← Green unchanged
    0 0 1 0 0    ← Blue unchanged
    0 0 0 18 -15 ← Alpha × 18 − 15
  "
  result="goo"
/>

→ Toggle off: you get a blurry mess instead of the clean gooey shape.

Composites the original sharp source back on top of the gooey result using operator="atop". This keeps the crisp text and icons inside the button while preserving the gooey outer shape from step 2.

<feComposite
  in="SourceGraphic"
  in2="goo"
  operator="atop"
/>

→ Without this, you see the gooey shape but with blurry text. This step restores sharpness inside.