20가지 환상적인 SVG 애니메이션 예제

SVG(Scalable Vector Graphics)는 XML로 작성된 이미지 형식입니다. SVG를 사용하면 2차원 확장 가능한 그래픽을 코딩할 수 있습니다. 그런 다음 CSS 및 JavaScript에서 구현 및 수정할 수 있습니다.

SVG는 벡터 모양(모든 방향과 모양의 직선 및 곡선), 이미지 및 텍스트의 세 가지 유형의 그래픽을 허용합니다. 다양한 기능으로 인해 웹 디자이너는 SVG를 사용하여 복잡한 애니메이션을 만듭니다. 설치가 쉽고 크기를 조정해도 품질이 저하되지 않으며 작동하는 타사 앱이 필요하지 않습니다.

애니메이션은 여전히 ​​인기를 얻고 있기 때문에 대부분은 애니메이션에 익숙하지 않습니다. 이 기사에서는 이 형식의 잠재력을 보여주는 20개의 환상적인 SVG 애니메이션을 강조합니다.

1. kitton의 의료 SVG 아이콘

이 따뜻하고 부드러운 애니메이션은 모든 건강 관련 웹사이트에 적합합니다. 다른 스레드를 통해 나열하는 동안 이미지가 미묘하게 나타납니다. 구급차 또는 원자가 건설하고 눈이 열리고 의사가 뛰어 내립니다. 이 애니메이션은 SVG의 모든 재미와 역동성을 보여줍니다.

링크

2. SeanMcCaffery의 호버

모든 대화형 웹 사이트에 넣을 수 있는 범용 애니메이션입니다. 호버링할 때 테두리의 미묘한 모양은 만족스러운 느낌을 주고 링크를 클릭하도록 초대합니다.

링크

3. Nikolay Talanov의 새로 고침(종이 비행기)을 위해 아래로 당겨

일반적으로 페이지를 "풀다운"하면 페이지가 새로 고쳐집니다. 이 애니메이션은 이를 새로운 차원으로 끌어 올립니다. 아래로 당겨서 놓으면 종이 비행기가 하늘로 날아갑니다. 방문자가 앱을 자주 새로고침하게 하려면 이와 같은 애니메이션을 추가하는 것을 고려해야 합니다.

4. Diaco M. Lotfollahi의 Just Keep Go

Scaling Vector의 잠재력을 보여주는 SVG 애니메이션. 인체의 부드럽고 정확한 움직임은 최면입니다.

링크

5. HTML5 비디오에 SVG 필터 추가

Google Chrome 팀의 Paul Irish는 SVG가 벡터 그래픽 외부의 콘텐츠를 수정할 수 있는 방법을 살펴보았습니다. 그는 CSS와 SVG를 결합하여 SVG 애니메이션이 기성품 비디오에 훌륭하게 추가될 수 있음을 보여주기 위해 놀라운 시각적 필터를 만들었습니다.

링크

6. 직소 퍼즐

SVG 애니메이션으로 놀라운 대화형 직소 퍼즐을 만들 수 있습니다. 이 예에서 우리는 많은 그림 중 하나를 선택하고 그것이 퍼즐의 많은 작은 조각으로 어떻게 분해되는지 볼 수 있습니다. 당신도 그것을 재구성 할 수 있습니다!

링크

7. Patrick Young의 라이너 그라디언트

네온 불빛과 아름다운 글꼴을 좋아한다면 이 애니메이션을 즐길 수 있습니다. 이 작업은 멋진 애니메이션을 위해 움직이는 선이 필요하지 않고 그라디언트 효과가 있는 멋진 글꼴과 적절한 색상 코드만 필요하다는 것을 보여줍니다.

링크

8. Let's Travel by 쩨페레자귀나가

두 대의 비행기와 세계의 유명 랜드마크 주위를 도는 열기구. 이 애니메이션은 다채롭고 낙관적이며 감동적입니다. SVG에 능숙하다면 할 수 있는 모든 것을 보여줍니다.

링크

9. 모하마드 모헤비파르의 시계

현재 시간을 보여주는 움직이는 시계의 간단한 SVG 애니메이션. 포인터의 부드러운 움직임과 최소한의 디자인은 이 애니메이션에 경이로움을 선사합니다.

링크

10. Luigi De Rosa의 애니메이션 아이콘

이 아이콘 위로 마우스를 가져가면 간단하지만 효과적인 애니메이션이 실행됩니다. 인상적인 애니메이션 아이콘을 만들기 위해 놀라운 일을 할 필요가 없다는 것을 알 수 있습니다.

11. SVG의 모든 장치(Chris Gannon)

우리가 가장 창의적인 방식으로 사용하는 모든 스마트 장치를 다루는 원 테이크 애니메이션. 데스크탑은 랩탑으로, 랩탑은 태블릿으로, 그리고 나서 스마트폰으로 바뀔 것입니다.

링크

12. 크리스 개넌의 폭포

Chris Gannon의 또 다른 작품인 이것은 거품이 나는 폭포 바닥의 깔끔한 시연입니다. 물의 움직임은 깔끔하고 모든 것이 더 사실적으로 보이도록 애니메이션의 경계를 떠나는 튀는 물의 작은 방울을 볼 수 있습니다.

링크

13. 블레이크 보웬의 식물 생성기

이제 이것은 다른 것입니다. '만들기' 버튼을 클릭하면 식물이 자라고 자라는 것을 볼 수 있습니다. 그러나 클릭할 때마다 다른 패턴이 형성됩니다.

링크

14. Hamish Williams의 클릭 가능한 아이콘

클릭하면 애니메이션을 트리거하는 또 다른 대화형 SVG입니다. 클릭하면 "보내기" 애니메이션이 시작됩니다.

링크

15. Marco Barría의 새로운 케이크

레이어별로 케이크를 만드는 과정을 보여주는 재미있는 애니메이션. 생일 카드에 적합한 인상적인 SVG 애니메이션입니다.

16. Chris Gannon의 종이 분쇄기

종이 파쇄를 즐기는 분들이라면 종이를 종이에 무제한으로 파쇄하는 기계를 끊김 없이 연속적으로 보여주는 이 애니메이션을 즐기게 될 것입니다.

링크

17. GRAYGHOST의 Low PolyLion

애니메이션 폴리곤의 형태로 나타났다 사라지는 사자의 머리를 묘사한 감동적인 일러스트와 애니메이션입니다.

링크

18. Leela의 모래시계 로더

SVG만을 사용하는 또 다른 효과적인 애니메이션. 5초마다 모래시계가 뒤집어지고 새로운 주기가 시작됩니다.

링크

19. 사라 드라스너의 반응하는 암소

이것은 소를 클릭하고 당황한 우주 비행사가 그것을 바라보는 동안 달 주위를 끌 수 있는 재미있는 대화형 애니메이션입니다.

20. 학생 by Domany

열정적인 학생이 배울 준비가 된 것처럼 보입니다! 책 페이지가 깔끔하게 넘어가는 멋진 애니메이션입니다. 학생은 눈을 깜박이지 않았지만 이 목록을 마무리하기에는 여전히 완벽하게 깔끔한 애니메이션입니다.

링크

네 차례 야

이 목록에 포함되지 않은 가장 좋아하는 SVG 애니메이션은 무엇입니까? 아래 의견에서 선택 사항을 공유하십시오!