20 de exemple fantastice de animație SVG

Scalable Vector Graphics (SVG) este un format de imagine scris în XML. Cu SVG, puteți codifica o grafică scalabilă bidimensională. Apoi, le puteți implementa și modifica în CSS și JavaScript.

SVG permite trei tipuri de grafică: forme vectoriale (linii drepte și curbe în toate direcțiile și formele), imagini și text. Datorită diferitelor sale capacități, designerii web apelează la SVG pentru a realiza animații complexe. Sunt ușor de instalat, nu își pierd calitatea atunci când sunt redimensionate și nu necesită aplicații terțe pentru a funcționa.

Deoarece animațiile sunt încă în creștere în popularitate, majoritatea nu sunt familiarizați cu ele. Acest articol va evidenția 20 de animații SVG fantastice care arată potențialul acestui format.

1. Medical SVG Icons by Kittons

Această animație caldă și netedă este grozavă pentru orice site web legat de sănătate. În timp ce enumerați diferitele fire, imaginile vor apărea subtil. Mașina ambulanței sau atomul se va construi, ochiul se va deschide și medicul va sări afară. Această animație arată toată distracția și dinamismul SVG.

Legătură

2. Hover de SeanMcCaffery

Animație universală pe care o poți pune pe orice site interactiv. Aspectul subtil al marginilor atunci când treceți cu mouse-ul vă lasă o senzație satisfăcătoare și vă invită să faceți clic pe link.

Legătură

3. Pull Down to Refresh (Avion de hârtie) de Nikolay Talanov

De obicei, paginile se vor reîmprospăta atunci când „tragi în jos” pe ele. Această animație aduce acest lucru la un nou nivel. Când tragi în jos pentru a-l elibera, vei lansa un avion de hârtie pe cer. Dacă doriți ca vizitatorii să vă reîmprospăteze aplicația des, ar trebui să luați în considerare adăugarea unei animații ca aceasta.

4. Just Keep Going de Diaco M. Lotfollahi

O animație SVG care arată potențialul vectorului de scalare. Mișcarea lină și precisă a corpului uman este hipnotizantă.

Legătură

5. Filtre SVG adăugate la videoclipul HTML5

Paul Irish de la echipa Google Chrome a analizat modul în care SVG poate modifica conținutul în afara graficii vectoriale. El a combinat CSS și SVG pentru a crea filtre vizuale uimitoare pentru a arăta că animația SVG poate fi un plus bun pentru un videoclip gata făcut.

Legătură

6. Jigsaw Puzzle

Puteți realiza puzzle-uri interactive uimitoare cu animație SVG. În acest exemplu, putem alege una dintre multele imagini și putem vedea cum se deconstruiește în multe piese mici ale puzzle-ului. Îl poți reconstrui și tu!

Legătură

7. Liner Gradient de Patrick Young

Dacă vă plac luminile neon și fonturile frumoase, vă veți bucura de această animație. Această lucrare arată că nu aveți nevoie de linii în mișcare pentru o animație strălucitoare, doar un font grozav și un cod de culoare adecvat cu efect de gradient.

Legătură

8. Să călătorim de jjperezaguinaga

Două avioane și un balon cu aer cald care se învârt în jurul reperelor populare ale lumii. Această animație este plină de culoare, optimistă și uluitoare. Arată tot ce poți face dacă ești priceput în SVG.

Legătură

9. Ceas de Mohamad Mohebifar

O animație SVG simplă a unui ceas în mișcare care arată ora curentă. Mișcarea liniștitoare a indicatoarelor și designul minimalist fac minuni pentru această animație.

Legătură

10. Icoane animate de Luigi De Rosa

Dacă treceți cu mouse-ul peste aceste pictograme, veți declanșa animațiile, care sunt simple, dar eficiente. Puteți vedea că nu trebuie să faceți minuni pentru a realiza o pictogramă animată impresionantă.

11. Toate dispozitivele în SVG de Chris Gannon

O animație cu o singură luare care trece peste toate dispozitivele inteligente pe care le folosim în cel mai creativ mod. Desktop-ul se va transforma într-un laptop, laptopul într-o tabletă, apoi într-un smartphone.

Legătură

12. Cascada de Chris Gannon

Un altul de Chris Gannon, aceasta este o demonstrație clară a fundului unei cascade spumante. Mișcarea apei este îngrijită și puteți vedea mici picături de apă stropită care părăsesc granițele animației pentru a face totul să pară mai realist.

Legătură

13. Generator de plante de Blake Bowen

Acum acesta este altceva. Când faceți clic pe butonul „Creați”, veți vedea plantele crescând și crescând. Dar de fiecare dată când dați clic, se vor forma modele diferite.

Legătură

14. Pictogramă pe care se poate face clic de Hamish Williams

Un alt SVG interactiv care declanșează o animație odată ce faceți clic pe el. Acesta va iniția animația „Trimite” după ce faceți clic pe ea.

Legătură

15. Tort nou de Marco Barría

Animație interesantă care arată realizarea unui tort strat cu strat. Este o animație SVG impresionantă, potrivită pentru o felicitare de ziua de naștere.

16. Tocător de hârtie de Chris Gannon

Dacă vă place să vizionați mărunțirea hârtiei, vă veți bucura de această animație care înfățișează o mașină care distruge hârtie cu hârtie de nelimitat ori într-o secvență fără sudură.

Legătură

17. Low PolyLion de la GRAYGHOST

Aceasta este o ilustrație și o animație uimitoare care înfățișează un cap de leu apărând și dispărând sub formă de poligoane animate.

Legătură

18. Hourglass Loader de Leela

O altă animație eficientă care folosește doar SVG. La fiecare 5 secunde, clepsidra se va întoarce cu susul în jos și va începe un nou ciclu.

Legătură

19. Vaca receptivă de Sarah Drasner

Aceasta este o animație interactivă amuzantă care vă permite să faceți clic pe o vacă și să o trageți în jurul lunii în timp ce un astronaut nedumerit se uită la ea.

20. Student by Domany

Un student entuziast pare gata să învețe! Este o animație grozavă în care paginile cărții se întorc frumos. Fără clipi din partea studentului, dar aceasta este încă o animație perfect ordonată pentru a încheia această listă.

Legătură

Randul tau

Care sunt animațiile tale SVG preferate care nu sunt incluse în această listă? Împărtășește-ți alegerile în comentariile de mai jos!