← Back to gallery
SVGFeatured

Gooey Blob Construction

A blob construction showcase that merges overlapping SVG primitives through a padded blur-and-threshold filter while keeping animation transform-only.

Duration
4s
Resolution
1440×900
Format
SVG
blobsvg-filterfeGaussianBlurfeColorMatrixgooey

Blob Construction / Blur Threshold Filter

Gooey Blob Construction

Overlapping authored primitives merge through an SVG blur-and-threshold filter, showing how blob construction differs from a single morphing path.

primitive cluster gooey construction - 3.8s cycle · 1.00 intensity

Circles · merged bridge

Primitive Cluster

Three circles translate through a shared filter region until their alpha fields fuse.

Only transforms animate; blur and threshold values remain stable for predictable performance.

  • gooey
  • feGaussianBlur
  • feColorMatrix

Capsules · side pressure

Pill Merge

Capsule-like blobs press together, demonstrating that primitives do not have to be circular.

The merge is driven by transform distance, not by changing filter coefficients every frame.

  • capsule
  • alpha overlap
  • filter region

Offset blobs · calm loop

Orbiting Mass

Small satellite blobs orbit a central mass, keeping the fused silhouette stable.

Satellite motion is slow and stays within the padded filter bounds.

  • orbit
  • metaball
  • transform-only

Blob inspector

Primitive Cluster

Motion contract
Only transforms animate; blur and threshold values remain stable for predictable performance.
Accessibility
Reduced motion keeps a static merged cluster and avoids continuous drift.

Keep the filter region larger than the moving primitives so blur does not clip at the viewport edge.

css
<filter id="gooey" x="-35%" y="-35%" width="170%" height="170%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="9.0" 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 -7" />
</filter>

<g filter="url(#gooey)">
  <circle class="blob" cx="76" cy="92" r="32" />
  <circle class="blob" cx="114" cy="92" r="26" />
</g>