← 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.

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.

Circles · merged bridge

Primitive Cluster

Three circles converge through a shared filter region until their alpha fields fuse, then breathe back apart. Keep the filter region larger than the moving primitives so blur does not clip at the viewport edge.

  • gooey
  • feGaussianBlur
  • feColorMatrix

Capsules · side pressure

Pill Merge

Capsule-like blobs press together horizontally while a small satellite circle drifts in to demonstrate that primitives do not have to be circular. The same filter merges circles, rounded rects, or authored silhouettes as long as alpha overlaps.

  • capsule
  • alpha overlap
  • filter region

Offset blobs · calm loop

Orbiting Mass

Three satellite blobs orbit a central mass at different speeds + directions while the core silhouette breathes subtly. Useful when the blob needs continuous life without changing the central silhouette.

  • orbit
  • metaball
  • transform-only

Blob inspector

Primitive Cluster

  • gooey
  • feGaussianBlur
  • feColorMatrix

Three circles converge through a shared filter region until their alpha fields fuse, then breathe back apart. Keep the filter region larger than the moving primitives so blur does not clip at the viewport edge.

/* Three circles converge to fuse then breathe back apart — the filter region absorbs the blur threshold so alpha fields merge cleanly at the join. */
.gooey-blob__shape {
  transform-box: fill-box;
  transform-origin: center;
  /* per-shape animation declared in slug css; only transforms move,
     blur stdDeviation stays constant for stable performance. */
}

@keyframes gooey-cluster-... {
  /* 3.8s cycle, intensity 1.00× */
}

@media (prefers-reduced-motion: reduce) {
  .gooey-blob__shape { animation: none; }
}