Scalable Vector Graphics (SVG) è un formato di immagine scritto in XML. Con SVG, puoi codificare una grafica scalabile bidimensionale. Quindi, è possibile 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 realizzare animazioni complesse. Sono facili da installare, non perdono qualità quando vengono ridimensionati e non richiedono alcuna 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 SVG mediche di gattini

Questa animazione calda e fluida è l'ideale per qualsiasi sito Web relativo alla salute. Mentre elenchi i vari thread, le immagini appariranno sottilmente. L'autoambulanza 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 da SeanMcCaffery

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

collegamento

3. Tirare verso il basso per aggiornare (Paper Plane) di Nikolay Talanov

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

4. Continua ad andare avanti di Diaco M. Lotfollahi

Un'animazione SVG che mostra il potenziale del vettore in scala. Il movimento fluido 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 incredibili filtri visivi per mostrare che l'animazione SVG può essere un'ottima aggiunta a un video già pronto.

collegamento

6. Puzzle

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

collegamento

7. Liner Gradient di Patrick Young

Se ti piacciono le luci al neon e i bellissimi caratteri, ti godrai questa animazione. Questo lavoro mostra come non siano necessarie linee in movimento per un'animazione brillante, solo un font eccezionale e un codice colore adeguato con effetto sfumato.

collegamento

8. Viaggiamo di jjperezaguinaga

Due aeroplani e una mongolfiera che ruotano attorno ai monumenti più famosi 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

Passando con il mouse su queste icone, verranno attivate le animazioni, che sono semplici ma efficaci. Puoi vedere che non devi fare meraviglie per creare un'icona animata impressionante.

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

Un'animazione one-take che copre tutti i dispositivi intelligenti che utilizziamo nel modo più creativo. Il desktop si trasformerà in un laptop, un 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 fondale schiumoso a cascata. Il movimento dell'acqua è pulito e puoi vedere piccole gocce di spruzzi d'acqua che lasciano i bordi dell'animazione per rendere tutto più realistico.

collegamento

13. Generatore di piante di Blake Bowen

Ora questo è qualcos'altro. Quando fai clic sul pulsante "Crea", vedrai le piante che si alzano e crescono. 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 essa. Questo avvierà l'animazione "Invia" dopo aver fatto clic su di essa.

collegamento

15. New Cake di Marco Barría

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

16. Paper Shredder di Chris Gannon

Se ti piace guardare la distruzione della carta, ti godrai questa animazione che raffigura una macchina che distrugge la carta con la carta un numero illimitato di volte in una sequenza continua.

collegamento

17. Low PolyLion di GREYGHOST

Questa è un'illustrazione e un'animazione strabilianti che raffigura 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 capovolge e inizia un nuovo ciclo.

collegamento

19. Responsive Cow di Sarah Drasner

Questa è una divertente animazione interattiva che ti consente di fare clic su una mucca e trascinarla intorno alla 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 stanno girando ordinatamente. Nessun battito di ciglia da parte dello studente, ma questa è ancora 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!