Graphics ARIA Guidebook
  • 사람을 위한 정보 그래픽 디자인
  • SVG 그래픽
    • SVG 디자인 도구
    • HTML 문서에 SVG 포함하기
    • SVG 레이아웃
    • SVG 기본 도형 그리기
    • SVG 패스 도형 그리기
    • SVG 컨테이너 요소
    • SVG 요소의 쌓이는 순서
    • SVG 하이퍼링크
    • SVG 텍스트
    • SVG 이미지
    • SVG 마스크
    • SVG 클립 패스
    • SVG 그레디언트
    • SVG 패턴
    • SVG 필터
    • SVG 접근성
    • SVG 아이콘 접근성
    • SVG 최적화
    • SVG 스프라이트
    • SVG 애니메이션
    • SVG 레퍼런스
  • 그래픽 접근성 모듈
    • 역할
      • 그래픽 문서(Document)
      • 그래픽 객체(Object)
      • 그래픽 심볼(Symbol)
      • 그외 다른 역할(Other Roles)
    • 상태와 속성
    • Graphics ARIA 실습 데모
Powered by GitBook
On this page
  • SVG Path 애니메이션
  • Hand writing 애니메이션
  • Gooey 이펙트
  1. SVG 그래픽

SVG 애니메이션

PreviousSVG 스프라이트NextSVG 레퍼런스

Last updated 6 years ago

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

SVG Path 애니메이션

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

Hand writing 애니메이션

Gooey 이펙트

Gooey 효과가 반영된 UI 디자인

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

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

Geulrara Calli 핸드라이팅 애니메이션
SVG 필터를 사용한 구이(Gooey) 효과
PathAnimate.js
SVG Path Icon Animation
클릭 이벤트에 따라 반응하는 SVG 패스 애니메이션
CSS로 애니메이션 되는 캘리그래피 SVG 패스 애니메이션
SVG 필터를 적용한 DOM 요소는 끈적한 느낌을 보여줍니다.
Ajax 로딩 스피너
Gooey 이펙트가 반영된 버튼 컴포넌트
Gooey 이펙트가 반영된 라디오 버튼 컴포넌트
Gooey 이펙트가 반영된 SNS 공유 버튼 컴포넌트
Gooey 이펙트를 활용한 스크린 장면전환
Music Runner App UI 디자인