Skip to content
viberdy.dev

Morphing Shape Loop

A decorative blob whose SVG outline continuously morphs between shapes.

Proplayfulglass
Category
Animations
Added
2026-09-01
Deps
1
Updated
2026-09-01

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Sign inUnlock Pro
Preview

Props

3
Requires framer-motion
"use client";

import { motion, useReducedMotion } from "framer-motion";

const DEFAULT_SHAPES = [
  "M60,8 C92,8 112,32 112,60 C112,90 90,112 60,112 C30,112 8,90 8,60 C8,30 30,8 60,8 Z",
  "M62,14 C96,4 116,32 104,60 C118,94 84,118 58,106 C26,118 4,88 16,58 C4,26 30,6 62,14 Z",
  "M56,6 C90,16 114,42 104,66 C120,90 80,116 56,100 C28,112 6,84 12,56 C6,26 26,8 56,6 Z",
];

export function MorphingShapeLoop({
  shapes = DEFAULT_SHAPES,
  duration = 3,
  color = "currentColor",
}: {
  shapes?: string[];
  duration?: number;
  color?: string;

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this animation

Morphing Shape Loop animates the SVG d attribute directly — the one primitive in this batch where the animated property is not transform or opacity, and it costs a full path repaint every frame because the browser has no compositor shortcut for arbitrary path geometry. Reach for a plain CSS transition or a transform-based scale/rotate blob instead whenever you only need gentle breathing; reach for d-morphing only when the outline shape itself genuinely needs to change over time. The non-obvious detail: framer-motion morphs path data by interpolating each numeric token position-by-position, so every shape in the loop must share the exact same command structure (same count and order of M/C commands) or the morph will visibly jump instead of tween — this rules out mixing hand-drawn and generated paths casually. The caveat: this is meaningfully more expensive than any transform-only primitive in this set, so keep it to one small decorative shape per view rather than several running at once.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

New

Scroll Card Deal

animations

A pile of cards that fans out symmetrically as its section crosses the viewport.

scrollcardssticky
Featured
New

Path Follow Scroll

animations

A marker that rides an SVG curve on scroll, banking through the bends.

scrollsvgoffset-path

Liquid Blob Cursor Follow

backgrounds

A soft blurred blob that trails the cursor with spring-smoothed lag.

cursorblobspring