# SVG Blob Morph > Organic blob masks that morph between shapes with MorphSVGPlugin. Images live inside drifting blobs that settle into a circle on hover. Canonical: https://gsapvault.com/effects/svg-blob-morph Live demo: https://gsapvault.com/demos/svg-blob-morph/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | MorphSVG | | Techniques | morphing, hover-effect, clip-path | | Uses Lenis | No | ## Overview 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. ## Features - 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 ## Use Cases - 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 ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before closing `` tag:** ```html ``` **3. Add the effect HTML to your ``:** ```html
Project One
``` **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. ### Options Set these as data attributes on the `.blob-morph` container. | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-enabled` | `true`, `false` | `true` | Enable/disable the effect | | `data-idle` | `true`, `false` | `true` | Ambient morph loop while idle | | `data-hover` | `true`, `false` | `true` | Morph to a circle on hover/focus | | `data-speed` | Any number | `1` | Ambient loop speed multiplier | ### 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. ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy SVG Blob Morph](https://gsapvault.com/effects/svg-blob-morph) - [The Vault (£39 one-time, best value): every current and future effect, template and UI element](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Three material link underlines (an exit-through line, marker sweep, and hand-drawn wave) with coordinated type and active-index responses. - [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal.md): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands. - [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that separates its background photograph, copy, and foreground card into distinct scroll depths from a single scrubbed ScrollTrigger. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt