SVG Blob Morph

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect HTML to your <body>:

Code snippet omitted: it ships with the download.

Important: every card needs a unique clipPath id (blobClip1, blobClip2, ...) with a matching clip-path="url(#...)" on its image. The script assigns each card a different starting blob automatically, so the initial d you paste is just a placeholder.

Using It With Your Own Design

What the effect requires of your markup

• A .blob-morph container. Everything else is found from there.
• One .blob-card per blob. It can be an <a>, a <button>, or any focusable element; the script binds hover, focus and tap to it.
• Inside each card, an SVG on a 200 x 200 viewBox holding two paths with the same d: .blob-clip (inside a <clipPath>) and .blob-outline (stroked and visible). Both are morph targets and must move together, which is what gives the shape a drawn edge rather than a flat silhouette.
• .blob-img is the masked <image>. It carries clip-path="url(#...)" pointing at that card's own clipPath id.
• Every card needs a unique clipPath id. Duplicate ids mean every blob masks through the first card's shape, which looks like the morph is broken.

What is only this demo's CSS

The grey page, Mona Sans, the fat display line, the hairline rules, the captions and the electric-blue accent are all art direction. None of it is load-bearing. .blob-figure and .blob-caption are demo layout classes the script never touches; drop them and lay the cards out however you like.

The non-obvious CSS the effect depends on

• .blob-svg { overflow: visible }. The hover shape is a circle inscribed in the same bounding box as the blobs, but the back.out overshoot briefly pushes past it. Without this the settle clips against the SVG edge and reads as a stutter.
• stroke="currentColor" on .blob-outline, with the colour set on .blob-card. That is what lets .is-active recolour the outline in CSS while GSAP owns the shape; if you hardcode a stroke colour the settle loses half its effect.
• vector-effect="non-scaling-stroke" keeps the outline one hairline wide at every card size. Without it the stroke thickens as the blob scales up.
• The <image> is drawn at y="16" rather than y="0". The blob narrows towards the top, so a portrait framed tight to the top of its file gets its crown cut off. Nudging the image down inside the mask moves the crop onto the shoulders instead. Adjust this to suit your own photography rather than assuming 0 is correct.

Choosing your own blob shapes

All shapes in the library, and the hover circle, are normalised to the same bounding box (10 to 190 on both axes). Keep any shape you add inside that box or that card will visibly sit at a different size to the rest of the row. Every path must also be closed and use the same command structure, or MorphSVG has to guess at the correspondence and the morph twists.

Options

Set these as data attributes on the .blob-morph container.

Accessibility

This effect is fully accessible:

• Reduced motion: With prefers-reduced-motion: reduce, blobs render as static shapes; no ambient loop, no hover morph, and the content stays fully visible
• Keyboard navigation: Focus triggers the same morph as hover, with a visible focus outline on the card
• Touch: First tap plays the morph, second tap follows the link
• Semantic HTML: Cards are real links; the decorative SVG is aria-hidden so screen readers read the label text

Dependencies

Required:

• GSAP 3.12+
• MorphSVGPlugin (free on the public CDN since GSAP 3.13)

Optional:

• None. No scroll behaviour, so no ScrollTrigger or Lenis needed.