SVG 애니메이션
인라인 SVG에 CSS 또는 JavaScript를 활용하면 멋진 인터랙티브 SVG 애니메이션을 만들 수 있습니다.
SVG Path 애니메이션
PathAnimate.js 라이브러리를 이용해 SVG 패스에 애니메이션을 설정할 수 있습니다. 애니메이션 결과물 SVG Path Icon Animation 을 확인해보세요.
Hand writing 애니메이션
순수하게 CSS 애니메이션만 활용하여 SVG 패스에 애니메이션을 설정할 수 있습니다. 애니메이션 결과물 Geulrara Calli 핸드라이팅 애니메이션을 확인해보세요.
Gooey 이펙트
SVG 필터 이펙트를 HTML/CSS와 함께 사용하면 끈적한 느낌의 UI 를 구현할 수 있습니다. 이를 Gooey 이펙트라고 부릅니다. 애니메이션 결과물 SVG 필터를 사용한 구이(Gooey) 효과를 확인해보세요.
Gooey 효과가 반영된 UI 디자인
Last updated
