20 fantastici esempi di animazione SVG

Scalable Vector Graphics (SVG) è un formato immagine scritto in XML. Con SVG, puoi codificare una grafica scalabile bidimensionale. Quindi, puoi implementarli e modificarli in CSS e JavaScript.

SVG consente tre tipi di grafica: forme vettoriali (linee rette e curve in tutte le direzioni e forme), immagini e testo. A causa delle sue varie capacità, i web designer si rivolgono a SVG per creare animazioni complesse. Sono facili da installare, non perdono qualità quando vengono ridimensionati e non richiedono app di terze parti per funzionare.

Poiché le animazioni stanno ancora crescendo in popolarità, la maggior parte non le conosce. Questo articolo metterà in evidenza 20 fantastiche animazioni SVG che mostrano il potenziale di questo formato.

1. Icone mediche SVG di kittons

Questa animazione calda e fluida è ottima per qualsiasi sito Web relativo alla salute. Mentre elenchi i diversi thread, le immagini appariranno sottilmente. L'auto dell'ambulanza o l'atomo si costruiranno, l'occhio si aprirà e il dottore salterà fuori. Questa animazione mostra tutto il divertimento e il dinamismo di SVG.

Collegamento

2. Passa il mouse di SeanMcCaffery

Animazione universale che puoi inserire in qualsiasi sito Web interattivo. L'aspetto sottile dei bordi quando passi il mouse ti lascia con una sensazione soddisfacente e ti invita a fare clic sul collegamento.

Collegamento

3. Tirare giù per aggiornare (aereo di carta) di Nikolay Talanov

Di solito, le pagine si aggiorneranno quando "tiri giù" su di esse. Questa animazione porta questo a un nuovo livello. Quando abbassi per rilasciarlo, lancerai un aeroplano di carta nel cielo. Se vuoi che i tuoi visitatori aggiornino spesso la tua app, dovresti considerare di aggiungere un'animazione come questa.

4. Continua così di Diaco M. Lotfollahi

Un'animazione SVG che mostra il potenziale di Scaling Vector. Il movimento regolare e preciso del corpo umano è ipnotizzante.

Collegamento

5. Filtri SVG aggiunti al video HTML5

Paul Irish del team di Google Chrome ha esaminato come SVG può modificare i contenuti al di fuori della grafica vettoriale. Ha combinato CSS e SVG per creare fantastici filtri visivi per mostrare che l'animazione SVG può essere un'ottima aggiunta a un video già pronto.

Collegamento

6. Puzzle

Puoi creare fantastici puzzle interattivi con l'animazione SVG. In questo esempio, possiamo scegliere una delle tante immagini e vedere come si scompone in tanti piccoli pezzi del puzzle. Puoi anche ricostruirlo!

Collegamento

7. Gradiente di rivestimento di Patrick Young

Se ti piacciono le luci al neon e i bei caratteri, apprezzerai questa animazione. Questo lavoro mostra come non hai bisogno di linee mobili per un'animazione brillante, solo un ottimo font e un codice colore adeguato con effetto sfumato.

Collegamento

8. Viaggiamo di jjperezguinaga

Due aeroplani e una mongolfiera che ruotano attorno a famosi punti di riferimento del mondo. Questa animazione è colorata, ottimista e strabiliante. Mostra tutto ciò che puoi fare se sei abile in SVG.

Collegamento

9. Orologio di Mohamad Mohebifar

Una semplice animazione SVG di un orologio in movimento che mostra l'ora corrente. Il movimento rilassante dei puntatori e il design minimalista fanno miracoli per questa animazione.

Collegamento

10. Icone animate di Luigi De Rosa

Se passi il mouse su queste icone attiverai le animazioni, che sono semplici ma efficaci. Puoi vedere che non devi fare miracoli per creare un'icona animata impressionante.

11. Tutti i dispositivi in ​​SVG di Chris Gannon

Un'animazione one-take che ripercorre tutti i dispositivi intelligenti che utilizziamo nel modo più creativo. Il desktop si trasformerà in un laptop, il laptop in un tablet, quindi in uno smartphone.

Collegamento

12. Cascata di Chris Gannon

Un altro di Chris Gannon, questa è una chiara dimostrazione di un fondo di cascata schiumoso. Il movimento dell'acqua è pulito e puoi vedere piccole gocce dell'acqua che spruzzano lasciare i bordi dell'animazione per far sembrare tutto più realistico.

Collegamento

13. Generatore di piante di Blake Bowen

Ora questo è qualcos'altro. Quando fai clic sul pulsante "Crea", vedrai le piante crescere e crescere. Ma ogni volta che fai clic, si formeranno modelli diversi.

Collegamento

14. Icona cliccabile di Hamish Williams

Un altro SVG interattivo che attiva un'animazione dopo aver fatto clic su di esso. Questo avvierà l'animazione "Invia" dopo aver fatto clic su di essa.

Collegamento

15. Nuova torta di Marco Barría

Interessante animazione che mostra la realizzazione di una torta strato per strato. È un'impressionante animazione SVG adatta per un biglietto d'auguri.

16. Distruggi documenti di Chris Gannon

Se ti piace guardare la distruzione della carta, apprezzerai questa animazione che raffigura una macchina che distrugge carta per carta un numero illimitato di volte in una sequenza senza interruzioni.

Collegamento

17. Low PolyLion di GRAYGHOST

Questa è un'illustrazione e un'animazione strabilianti che raffigurano la testa di un leone che appare e scompare sotto forma di poligoni animati.

Collegamento

18. Caricatore a clessidra di Leela

Un'altra animazione efficace che utilizza solo SVG. Ogni 5 secondi, la clessidra si capovolgerà e inizierà un nuovo ciclo.

Collegamento

19. Mucca reattiva di Sarah Drasner

Questa è una divertente animazione interattiva che ti permette di cliccare su una mucca e trascinarla sulla luna mentre un astronauta sconcertato la guarda.

20. Studente di Domany

Uno studente entusiasta sembra pronto per imparare! È una grande animazione in cui le pagine del libro girano ordinatamente. Nessun battito di ciglia da parte dello studente, ma questa è comunque un'animazione perfettamente ordinata per concludere questo elenco.

Collegamento

Il tuo turno

Quali sono le tue animazioni SVG preferite non incluse in questo elenco? Condividi le tue scelte nei commenti qui sotto!