SVG 애니메이션

인라인 SVG에 CSS 또는 JavaScript를 활용하면 멋진 인터랙티브 SVG 애니메이션을 만들 수 있습니다.

SVG Path 애니메이션

PathAnimate.js 라이브러리를 이용해 SVG 패스에 애니메이션을 설정할 수 있습니다. 애니메이션 결과물 SVG Path Icon Animation 을 확인해보세요.

클릭 이벤트에 따라 반응하는 SVG 패스 애니메이션

Hand writing 애니메이션

순수하게 CSS 애니메이션만 활용하여 SVG 패스에 애니메이션을 설정할 수 있습니다. 애니메이션 결과물 Geulrara Calli 핸드라이팅 애니메이션을 확인해보세요.

CSS로 애니메이션 되는 캘리그래피 SVG 패스 애니메이션

Gooey 이펙트

SVG 필터 이펙트를 HTML/CSS와 함께 사용하면 끈적한 느낌의 UI 를 구현할 수 있습니다. 이를 Gooey 이펙트라고 부릅니다. 애니메이션 결과물 SVG 필터를 사용한 구이(Gooey) 효과를 확인해보세요.

SVG 필터를 적용한 DOM 요소는 끈적한 느낌을 보여줍니다.

Gooey 효과가 반영된 UI 디자인

Ajax 로딩 스피너

Gooey 이펙트가 반영된 버튼 컴포넌트

Gooey 이펙트가 반영된 라디오 버튼 컴포넌트

Gooey 이펙트가 반영된 SNS 공유 버튼 컴포넌트

Gooey 이펙트를 활용한 스크린 장면전환

Music Runner App UI 디자인