Graphical Vector Graphics (SVG) és un format d'imatge escrit en XML. Amb SVG, podeu codificar un gràfic escalable bidimensional. Després, podeu implementar-les i modificar-les en CSS i JavaScript.
SVG permet tres tipus de gràfics: formes vectorials (línies rectes i corbes en totes les direccions i formes), imatges i text. A causa de les seves diverses capacitats, els dissenyadors web recorren a SVG per realitzar animacions complexes. Són fàcils d’instal·lar, no perden qualitat quan es redimensionen i no requereixen que cap aplicació de tercers funcioni.
Com que les animacions segueixen creixent en popularitat, la majoria no les coneix. Aquest article destacarà 20 fantàstiques animacions SVG que mostren el potencial d’aquest format.
1. Icones de SVG mèdic per gatets
Links ràpids
- 1. Icones de SVG mèdic per gatets
- 2. Passa el ratolí per SeanMcCaffery
- 3. Tire down to refresh (Paper Plane) de Nikolay Talanov
- 4. Necessiteu continuar amb Diaco M. Lotfollahi
- 5. Filtres SVG afegits al vídeo HTML5
- 6. Trencaclosques
- 7. Liner Gradient de Patrick Young
- 8. Let's Travel by jjperezaguinaga
- 9. Rellotge de Mohamad Mohebifar
- 10. Icones animades de Luigi De Rosa
- 11. Tots els dispositius en SVG de Chris Gannon
- 12. Cascada de Chris Gannon
- 13. Generador de plantes de Blake Bowen
- 14. Icona clicable de Hamish Williams
- 15. Nou pastís de Marco Barría
- 16. Trituradora de paper de Chris Gannon
- 17. Low PolyLion by GREYGHOST
- 18. Carregador de rellotge de vidre de Leela
- 19. Vaca responsiva de Sarah Drasner
- 20. Estudiant de Domany
- El teu torn
Aquesta animació càlida i suau és ideal per a qualsevol lloc web relacionat amb la salut. Mentre llisteu els diferents fils, les imatges apareixeran subtilment. El cotxe de l’ambulància o l’àtom es construirà, l’ull s’obrirà i el metge saltarà. Aquesta animació mostra tota la diversió i el dinamisme de SVG.
Enllaç
2. Passa el ratolí per SeanMcCaffery
Animació universal que podeu posar a qualsevol lloc web interactiu. L'aparença subtil de les sanefes quan es mena el ratolí us deixa molt agradable i us convida a fer clic a l'enllaç.
Enllaç
3. Tire down to refresh (Paper Plane) de Nikolay Talanov
Normalment, les pàgines s’actualitzaran quan les dónes al capdavant. Aquesta animació arriba a un nou nivell. Quan es tira cap avall per alliberar-lo, llançareu un avió de paper al cel. Si voleu que els vostres visitants refresquin l'aplicació sovint, haureu de plantejar afegir una animació com aquesta.
4. Necessiteu continuar amb Diaco M. Lotfollahi
Una animació SVG que mostra el potencial del vector d'escalació. El bon moviment i precisió del cos humà és hipnotitzant.
Enllaç
5. Filtres SVG afegits al vídeo HTML5
Paul Irish, de l’equip de Google Chrome, va veure com SVG pot modificar contingut fora dels gràfics vectorials. Va combinar CSS i SVG per fer filtres visuals increïbles per demostrar que l’animació SVG pot ser una bona incorporació a un vídeo preparat.
Enllaç
6. Trencaclosques
Podeu crear increïbles trencaclosques interactius amb animació SVG. En aquest exemple, podem triar una de moltes imatges i veure com es deconstrueix a moltes petites peces del trencaclosques. També es pot reconstruir.
Enllaç
7. Liner Gradient de Patrick Young
Si us plau amb llums de neó i belles fonts, gaudireu d’aquesta animació. Aquest treball mostra com no necessiteu cap línia en moviment per a una animació brillant, només un tipus de lletra excel·lent i un codi de colors adequat amb efecte de degradat.
Enllaç
8. Let's Travel by jjperezaguinaga
Dos avions i un globus d'aire calent girant al voltant de fites populars del món. Aquesta animació és acolorida, optimista i interessant. Mostra tot el que podeu fer si esteu hàbils en SVG.
Enllaç
9. Rellotge de Mohamad Mohebifar
Una senzilla animació SVG d’un rellotge en moviment que mostra l’hora actual. El moviment calmant dels apunts i el disseny minimalista fan meravelles per a aquesta animació.
Enllaç
10. Icones animades de Luigi De Rosa
Si passeu aquestes icones activareu les animacions, que són simples però efectives. Podeu veure que no heu de fer meravelles per fer una impressionant icona animada.
11. Tots els dispositius en SVG de Chris Gannon
Una animació única que recorre tots els dispositius intel·ligents que utilitzem de la manera més creativa. L’escriptori es convertirà en un portàtil, un portàtil en una tauleta, després en un telèfon intel·ligent.
Enllaç
12. Cascada de Chris Gannon
Un altre de Chris Gannon, es tracta d'una demostració neta d'un fons espumós espumós. El moviment de l’aigua és net i es poden veure petites gotes de l’aigua que esquitxa deixant les vores de l’animació per fer que tot sembli més realista.
Enllaç
13. Generador de plantes de Blake Bowen
Ara, aquesta és una altra cosa. Quan feu clic al botó "Crear", veureu que les plantes creixen i creixen. Però cada vegada que feu clic, es formaran diferents patrons.
Enllaç
14. Icona clicable de Hamish Williams
Un altre SVG interactiu que desencadena una animació un cop feu clic sobre ella. Aquest iniciarà l'animació "Enviar" un cop el faci clic.
Enllaç
15. Nou pastís de Marco Barría
Interessant animació que mostra la confecció d’un pastís capa per capa. Es tracta d’una impressionant animació SVG adequada per a una targeta d’aniversari.
16. Trituradora de paper de Chris Gannon
Si us agrada veure la trituració de paper, gaudireu d’aquesta animació que representa una màquina triturant paper per paper vegades il·limitadament en una seqüència perfecta.
Enllaç
17. Low PolyLion by GREYGHOST
Aquesta és una il·lustració i una animació impressionants que representen un cap de lleó que apareix i desapareix en forma de polígons animats.
Enllaç
18. Carregador de rellotge de vidre de Leela
Una altra animació efectiva que utilitza només SVG. Cada 5 segons, la rellotgeria es posarà al revés i s’iniciarà un nou cicle.
Enllaç
19. Vaca responsiva de Sarah Drasner
Aquesta és una divertida animació interactiva que permet fer clic sobre una vaca i arrossegar-la per la lluna mentre un astronauta desconcertat la mira.
20. Estudiant de Domany
Un estudiant entusiasta sembla disposat a aprendre. És una fantàstica animació on les pàgines de llibres es giren perfectament. No parpadeu de l’estudiant, però no deixa de ser una animació perfectament ordenada per concloure aquesta llista.
Enllaç
El teu torn
Quines animacions SVG preferides no estan incloses en aquesta llista? Compartiu les vostres fotografies als comentaris següents!
