Scalable Vector Graphics (SVG) est un format d'image écrit en XML. Avec SVG, vous pouvez coder un graphique évolutif à deux dimensions. Ensuite, vous pouvez les implémenter et les modifier en CSS et JavaScript.
SVG permet trois types de graphiques: les formes vectorielles (lignes droites et courbes dans toutes les directions et formes), les images et le texte. En raison de ses diverses fonctionnalités, les concepteurs Web se tournent vers SVG pour créer des animations complexes. Elles sont faciles à installer, ne perdent pas en qualité lors du redimensionnement et ne nécessitent aucune application tierce pour fonctionner.
Comme la popularité des animations ne cesse de croître, la plupart ne les connaissent pas. Cet article mettra en évidence 20 superbes animations SVG qui montrent le potentiel de ce format.
1. Icônes médicales SVG par chatons
Liens rapides
- 1. Icônes médicales SVG par chatons
- 2. Survolez par SeanMcCaffery
- 3. Tirez vers le bas pour actualiser (plan de papier) par Nikolay Talanov
- 4. Continuez comme ça par Diaco M. Lotfollahi
- 5. Filtres SVG ajoutés à la vidéo HTML5
- 6. puzzle
- 7. Liner Gradient de Patrick Young
- 8. Let's Travel de jjperezaguinaga
- 9. Horloge de Mohamad Mohebifar
- 10. Icônes animées de Luigi De Rosa
- 11. Tous les appareils en SVG par Chris Gannon
- 12. cascade de Chris Gannon
- 13. Plant Generator de Blake Bowen
- 14. Icône cliquable de Hamish Williams
- 15. Nouveau gâteau de Marco Barría
- 16. Déchiqueteuse de Chris Gannon
- 17. Low PolyLion de GRAYGHOST
- 18. Chargeur de sablier par Leela
- 19. Responsive Cow par Sarah Drasner
- 20. Étudiant de Domany
- À ton tour
Cette animation chaleureuse et fluide convient parfaitement à tout site Web consacré à la santé. Pendant que vous listez les différents fils, les images apparaîtront subtilement. La voiture d'ambulance ou l'atome va se construire, l'œil va s'ouvrir et le médecin sauter. Cette animation montre tout le plaisir et le dynamisme de SVG.
Lien
2. Survolez par SeanMcCaffery
Animation universelle que vous pouvez mettre sur n'importe quel site Web interactif. L'apparence subtile des bordures lorsque vous survolez vous laisse une sensation de satisfaction et vous invite à cliquer sur le lien.
Lien
3. Tirez vers le bas pour actualiser (plan de papier) par Nikolay Talanov
Habituellement, les pages s'actualisent lorsque vous les "déroulez". Cette animation amène cela à un nouveau niveau. Lorsque vous tirez pour le libérer, vous allez lancer un avion en papier dans le ciel. Si vous souhaitez que vos visiteurs actualisent souvent votre application, vous devez envisager d'ajouter une animation comme celle-ci.
4. Continuez comme ça par Diaco M. Lotfollahi
Une animation SVG qui montre le potentiel du vecteur de mise à l'échelle. Le mouvement fluide et précis du corps humain est hypnotisant.
Lien
5. Filtres SVG ajoutés à la vidéo HTML5
Paul Irish de l'équipe Google Chrome a expliqué comment SVG peut modifier du contenu en dehors des graphiques vectoriels. Il a combiné CSS et SVG pour créer d’incroyables filtres visuels montrant que l’animation SVG peut être un ajout précieux à une vidéo prête à l'emploi.
Lien
6. puzzle
Vous pouvez réaliser de superbes puzzles interactifs avec l'animation SVG. Dans cet exemple, nous pouvons choisir l'une des nombreuses images et voir comment elle se déconstruit en de nombreux petits morceaux du puzzle. Vous pouvez aussi le reconstruire!
Lien
7. Liner Gradient de Patrick Young
Si vous aimez les néons et les belles polices, vous apprécierez cette animation. Ce travail montre à quel point vous n'avez pas besoin de lignes en mouvement pour une animation brillante, mais seulement une police de caractères géniale et un code de couleur approprié avec effet de dégradé.
Lien
8. Let's Travel de jjperezaguinaga
Deux avions et une montgolfière gravitant autour de points de repère populaires du monde. Cette animation est colorée, optimiste et époustouflante. Il montre tout ce que vous pouvez faire si vous êtes habile en SVG.
Lien
9. Horloge de Mohamad Mohebifar
Une simple animation SVG d'une horloge en mouvement indiquant l'heure actuelle. Le mouvement apaisant des pointeurs et le design minimaliste font des merveilles pour cette animation.
Lien
10. Icônes animées de Luigi De Rosa
Si vous survolez ces icônes, vous déclencherez des animations simples mais efficaces. Vous pouvez voir que vous n'avez pas à faire des merveilles pour créer une icône animée impressionnante.
11. Tous les appareils en SVG par Chris Gannon
Une animation en une prise qui couvre tous les appareils intelligents que nous utilisons de la manière la plus créative. Le bureau deviendra un ordinateur portable, un ordinateur portable en une tablette, puis en un smartphone.
Lien
12. cascade de Chris Gannon
Une autre par Chris Gannon, ceci est une démonstration nette d'un fond d'écume moussant. Le mouvement de l'eau est soigné, et vous pouvez voir de petites gouttes d'eau éclabousser sortant des limites de l'animation pour que tout semble plus réaliste.
Lien
13. Plant Generator de Blake Bowen
Maintenant, celui-ci est autre chose. Lorsque vous cliquez sur le bouton "Créer", vous verrez des plantes en croissance et en croissance. Mais chaque fois que vous cliquez, différents motifs se formeront.
Lien
14. Icône cliquable de Hamish Williams
Un autre SVG interactif qui déclenche une animation une fois que vous cliquez dessus. Celui-ci lancera l'animation "Envoyer" une fois que vous aurez cliqué dessus.
Lien
15. Nouveau gâteau de Marco Barría
Animation intéressante qui montre la fabrication d'un gâteau couche par couche. C'est une animation SVG impressionnante qui convient à une carte d'anniversaire.
16. Déchiqueteuse de Chris Gannon
Si vous aimez regarder le déchiquetage de papier, vous apprécierez cette animation qui représente une machine à déchiqueter du papier par le papier sans limite de temps et dans une séquence homogène.
Lien
17. Low PolyLion de GRAYGHOST
C'est une illustration et une animation époustouflantes qui représentent une tête de lion apparaissant et disparaissant sous la forme de polygones animés.
Lien
18. Chargeur de sablier par Leela
Une autre animation efficace qui utilise uniquement SVG. Toutes les 5 secondes, le sablier se retournera et commencera un nouveau cycle.
Lien
19. Responsive Cow par Sarah Drasner
Il s’agit d’une animation interactive amusante qui vous permet de cliquer sur une vache et de la faire glisser autour de la lune pendant qu’un astronaute perplexe la regarde.
20. Étudiant de Domany
Un étudiant enthousiaste semble prêt à apprendre! C'est une excellente animation où les pages du livre tournent proprement. Aucun clignotement de l'étudiant, mais c'est toujours une animation parfaitement ordonnée pour conclure cette liste.
Lien
À ton tour
Quelles sont vos animations SVG préférées non incluses dans cette liste? Partagez vos choix dans les commentaires ci-dessous!
