SVG Blob Morph
Organic blob masks that morph between shapes with MorphSVGPlugin. Images live inside drifting blobs that settle into a circle on hover.
About This Effect
An organic blob morphing effect built on MorphSVGPlugin. Each card masks an image inside an SVG clipPath shaped like a hand-drawn blob, then drifts through a library of blob states on a slow ambient loop, with every card offset to its own rhythm so a row never looks cloned. On hover or keyboard focus the blob settles into a calm circle with a gentle back ease while the image scales up inside the mask. A matching outline path morphs in sync with the clip for a stroked, editorial edge.
What's Included
- MorphSVG-powered morphing between any number of blob path states
- Blob doubles as a clipPath image mask, so photos live inside the moving shape
- Ambient idle loop with per-card phase offset for an organic, non-cloned feel
- Hover and focus morph to a calm circle with synchronized image zoom
- Synchronized outline path with non-scaling stroke for a drawn edge
- Four hand-tuned blob shapes included, all interchangeable and easy to extend
- Idle loop, hover morph, and speed all configurable via data attributes
- Touch support: first tap morphs the blob, second tap follows the link
Perfect For
- Team and about pages that want portraits with personality instead of circles
- Portfolio and case study grids with a soft, editorial art direction
- Service or feature sections that need organic shapes on a dark canvas
- Landing page heroes where a static image mask feels too rigid
- Creative agency sites that want motion without scroll-jacking
How It Works
Each card contains an SVG with two paths sharing the same geometry: one inside a clipPath masking an image, one rendered as a stroked outline. A gsap.timeline tweens both paths through a sequence of blob shapes using the morphSVG property, repeating forever, with timeline.progress offset per card index to desynchronise the loop. Hover and focus pause the idle timeline and morph to a circle with back.out easing; on leave the blob morphs home, then the idle timeline is invalidated and restarted so MorphSVG re-records its start values from the settled shape.