모핑

Morphing

한 도형이 다른 도형으로 형태 자체가 매끄럽게 변하는 애니메이션. 색이나 위치가 아니라 윤곽선의 점들이 움직입니다.

다른 이름: 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')}
}

SVG에서는 두 path의 d 속성이 같은 개수·종류의 점을 가질 때만 매끄럽게 보간됩니다. 점 개수가 다르면 브라우저가 순간적으로 튀거나 어색하게 겹칩니다 — 그래서 모핑용 path는 미리 점 개수를 맞춰 그립니다.

CSS d 속성 자체를 @keyframes로 애니메이션하거나(Chromium 계열), Flubber 같은 JS 라이브러리로 점을 보간합니다. 블롭(blob) 배경, 아이콘 전환(재생→일시정지), 로고 인트로에 흔히 씁니다.

데모는 같은 구조(시작점 + 곡선 4개)로 그린 블롭 세 개를 순환하며 모핑합니다.

언제 쓰나

두 도형의 "의미"가 이어질 때만 쓰세요 — 관련 없는 모양끼리 모핑하면 오히려 혼란스럽습니다.