Gooey SVG (No CSS/JS)

• SVG, UI

What is the “gooey” effect?

It’s a visual trick that makes nearby shapes blend into a single blobby mass. The core recipe is simple: blur the scene, then apply a high‑contrast threshold on alpha so softly overlapping edges snap together. In SVG, this is a <filter> made from <feGaussianBlur> + <feColorMatrix>.

If you prefer a primer, see Lucas Bebber’s article on CSS‑Tricks (): The Gooey Effect.

Minimal SVG filter

Copy/paste this <filter> into an <svg><defs>. Apply with filter="url(#goo)" on a group.
<svg width="0" height="0" aria-hidden="true" focusable="false">
<defs>
<filter id="goo" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="
1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 18 -8" result="thresh" />
<feComposite in="SourceGraphic" in2="thresh" operator="atop" />
</filter>
</defs>
</svg>

Tweak tips: Increase stdDeviation to blend from farther away. The last row of the matrix (0 0 0 18 -8) boosts and thresholds alpha; higher 18 makes edges crisper, and shifting -8 changes the merge threshold.

Example 1 — Merging circles

This inline SVG animates two circles so they touch and merge. Everything is self‑contained; no CSS or JavaScript is required.

Two circles merge into a gooey blobThe circles move toward each other, overlap, and appear as a single shape via a thresholded blur.
Two animated circles blend into one when they overlap.

Example 2 — Nickelodeon‑style slime

Bright green slime pools at the top and drips in blobs. The goo filter fuses the lip and droplets so they feel elastic and sticky — no CSS or JavaScript required.

Nickelodeon‑like slime drips from a gooey lipA bumpy slime lip spans the top; staggered droplets fall, stretch, and reattach using an SVG gooey filter.
Slime lip with staggered drips — bulbs grow, fall to the bottom, then detach from the stem; goo filter keeps the stems elastic until break‑off.

Apply to HTML elements?

You can apply the same filter to HTML content with CSS (filter: url(#goo)) when styling is allowed.

Summary

Gooey visuals are just blur + threshold. SVG makes it copy‑pasteable, fast, and dependency‑free. Tune blur radius and the matrix’s final row to control how quickly shapes merge and how sharp the combined edge looks.