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 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
Link veloci
- 1. Icone SVG mediche di gattini
- 2. Passa il mouse su SeanMcCaffery
- 3. Tirare verso il basso per aggiornare (Paper Plane) di Nikolay Talanov
- 4. Continua ad andare avanti di Diaco M. Lotfollahi
- 5. Filtri SVG aggiunti al video HTML5
- 6. Puzzle
- 7. Liner Gradient di Patrick Young
- 8. Let's Travel di jjperezaguinaga
- 9. Orologio di Mohamad Mohebifar
- 10. Icone animate di Luigi De Rosa
- 11. Tutti i dispositivi in SVG di Chris Gannon
- 12. Cascata di Chris Gannon
- 13. Generatore di piante di Blake Bowen
- 14. Icona cliccabile di Hamish Williams
- 15. New Cake di Marco Barría
- 16. Paper Shredder di Chris Gannon
- 17. Low PolyLion di GREYGHOST
- 18. Caricatore a clessidra di Leela
- 19. Responsive Cow di Sarah Drasner
- 20. Studente di Domany
- Il tuo turno
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 su 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. Let's Travel 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 dell'acqua che spruzza lasciando 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, godrai di 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 si stanno girando in modo ordinato. 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!
