Morphing

모핑

A shape smoothly changing into a different shape — not color or position, but the points of the outline itself moving.

Also known as: Shape morphingSVG path morph

···

html

<svg class="blob-svg" viewBox="0 0 100 100"><path id="blob" class="blob" d="M50,15 C72,15 85,28 85,50 C85,72 72,85 50,85 C28,85 15,72 15,50 C15,28 28,15 50,15 Z"/></svg>

css

.blob-svg{width:min(58%,220px);aspect-ratio:1}
.blob{fill:var(--accent);animation:morph 6s ease-in-out infinite}
@keyframes morph{
  0%{d:path('M50,15 C72,15 85,28 85,50 C85,72 72,85 50,85 C28,85 15,72 15,50 C15,28 28,15 50,15 Z')}
  33%{d:path('M50,10 C75,12 88,25 86,50 C90,74 74,88 50,86 C26,90 12,74 14,50 C10,26 25,12 50,10 Z')}
  66%{d:path('M50,8 C68,20 92,22 84,50 C94,76 70,92 50,80 C30,94 6,74 16,50 C8,22 32,18 50,8 Z')}
  100%{d:path('M50,15 C72,15 85,28 85,50 C85,72 72,85 50,85 C28,85 15,72 15,50 C15,28 28,15 50,15 Z')}
}

In SVG, two path d attributes only interpolate smoothly when they have the same number and type of points. A mismatched count makes the browser pop or fold oddly mid-transition — so shapes meant to morph into each other are drawn with matching point counts from the start.

You can animate the d attribute directly in @keyframes (Chromium-family browsers), or interpolate points with a JS library like Flubber. Common for blob backgrounds, icon transitions (play → pause), and logo intros.

The demo cycles through three blobs drawn with the same structure (a start point plus four curves) so they interpolate cleanly.

When to use

Only morph between shapes whose meaning is connected — morphing unrelated shapes just confuses.