SVG Path Morphing
최초 작성일: 2025. 03. 31.
개요
코드로 SVG Morphing 제어하기
최근 결과물
시작
개인 프로젝트에서 사용할 로딩 인디케이터가 필요했는데 SVG 아이콘들이 차례대로 변형되는 애니메이션 인디케이터를 만들고 싶었다. 이걸 코드가 아닌 다른 방식으로 해결할 수도 있겠지만, 주기적으로 새 아이콘들이 추가되기 때문에 재사용의 편의를 생각하며 코드로 구현할 방법을 찾아보기로 했다.
이런 SVG 아이콘들이 대상이다
1차 시도: flubber 활용
방법을 찾아보다가 SVG Morphing(SVG Path Morphing이라는 것이 더 정확한 표현이라고 생각한다)에 대해서 알게 되었다. SVG Morphing 기능을 제공하는 라이브러리를 몇 개 찾을 수 있었는데, 내가 보기에 그중 결과물이 가장 자연스러워 보이는 것은 flubber였다.
flubber의 interpolate 함수는 변환 대상의 두 SVG path 사이의 중간 path들을 여러 개 생성해서 애니메이션을 처리할 수 있도록 도와준다.
변환 과정 중간의 path를 계산하는 데에 flubber를 이용했고, 시간에 따른 path 변환 처리 코드를 직접 구현하는 것을
최소화하기 위해 motion 라이브러리를 적극 활용해 다음과 같이 구현했다.
flubber를 활용한 방법의 아쉬운 점
- 두 개 이상의 다각형으로 분할할 수 있는 path들 간의 변환 애니메이션은 부자연스럽다.
- 중간 path 계산에 사용되는 최대 세그먼트 수를 옵션으로 설정할 수 있는데, 복잡한 path를 대상으로 너무 큰 값을 설정하면 브라우저가 먹통이 된다. 해당 임곗값을 사전에 알 수 있는 방법이 없고 직접 실행해 봐야 알 수 있다.
- path 계산에 대한 최적화를 직접 처리해야 한다. 복잡한 path를 사용할수록 초기 로딩 속도가 느려지거나, 프레임 저하 현상이 발생한다.
2차 시도: Gooey effect 활용
flubber의 경우 자연스러움 측면에서 아쉬운 부분이 있었다. 그러다 우연히 gooey effect 트릭을 알게 되었다. CSS 필터의 blur와 contrast를 이용해 두 SVG가 변형되는 것처럼 보이는 효과를 줄 수 있다.
복잡한 SVG를 대상으로도 flubber의 비해 자연스러운 결과물을 볼 수 있다.
Gooey effect를 활용한 방법의 아쉬운 점
- 색을 자유롭게 사용할 수 없다. ‘black’이나 ‘white’, 그리고 일부 단색만 사용할 수 있다. 방법을 아직 찾고 있다.
- 배경색을 투명하게 할 수 없다. 마찬가지로 방법을 아직 찾고 있다.