Les graphiques vectoriels évolutifs (SVG) sont un format d'image écrit en XML. Avec SVG, vous pouvez coder un graphique évolutif en deux dimensions. Ensuite, vous pouvez les implémenter et les modifier en CSS et JavaScript.

SVG permet trois types de graphiques: formes vectorielles (lignes droites et courbes dans toutes les directions et formes), images et texte. En raison de ses diverses capacités, les concepteurs de sites Web se tournent vers SVG pour créer des animations complexes. Ils sont faciles à installer, ne perdent pas en qualité lorsqu'ils sont redimensionnés et ne nécessitent aucune application tierce pour fonctionner.

Étant donné que les animations gagnent en popularité, la plupart ne les connaissent pas. Cet article présentera 20 fantastiques animations SVG qui montrent le potentiel de ce format.

1. Icônes médicales SVG par chatons

Cette animation chaleureuse et fluide est idéale pour tout site Web lié à la santé. Pendant que vous faites la liste des différents fils, les images apparaissent subtilement. La voiture d'ambulance ou l'atome se construira, l'œil s'ouvrira et le médecin sautera. 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 satisfaisante et vous invite à cliquer sur le lien.

Lien

3. Pull Down to Refresh (Paper Plane) par Nikolay Talanov

Habituellement, les pages sont actualisées lorsque vous les «tirez vers le bas». Cette animation amène cela à un nouveau niveau. Lorsque vous tirez vers le bas pour le libérer, vous lancerez un avion en papier dans le ciel. Si vous souhaitez que vos visiteurs actualisent souvent votre application, vous devriez envisager d'ajouter une animation comme celle-ci.

4. Continuez simplement par Diaco M. Lotfollahi

Une animation SVG qui montre le potentiel du vecteur de mise à l'échelle. Le mouvement précis et en douceur du corps humain est hypnotisant.

Lien

5. Filtres SVG ajoutés à la vidéo HTML5

Paul Irish de l'équipe Google Chrome a examiné comment SVG peut modifier le contenu en dehors des graphiques vectoriels. Il a combiné CSS et SVG pour créer des filtres visuels incroyables pour montrer que l'animation SVG peut être un excellent ajout à une vidéo prête à l'emploi.

Lien

6. Puzzle

Vous pouvez créer des puzzles interactifs incroyables avec une animation SVG. Dans cet exemple, nous pouvons choisir l'une des nombreuses images et voir comment elle se décompose en plusieurs petites pièces du puzzle. Vous pouvez également le reconstruire!

Lien

7. Liner Gradient par Patrick Young

Si vous aimez les néons et les belles polices, vous apprécierez cette animation. Ce travail montre comment vous n'avez pas besoin de lignes en mouvement pour une animation brillante, juste une grande police et un code de couleur approprié avec effet de dégradé.

Lien

8. Voyons voyage par jjperezaguinaga

Deux avions et une montgolfière gravitant autour des monuments 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 animation SVG simple d'une horloge en mouvement qui montre l'heure actuelle. Le mouvement apaisant des pointeurs et le design minimaliste font des merveilles pour cette animation.

Lien

10. Icônes animées par Luigi De Rosa

Si vous survolez ces icônes, vous déclencherez les animations, qui sont simples mais efficaces. Vous pouvez voir que vous n’avez pas à faire de 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 recouvre tous les appareils intelligents que nous utilisons de la manière la plus créative. Le bureau se transformera en ordinateur portable, ordinateur portable en tablette, puis en smartphone.

Lien

12. Waterfall par Chris Gannon

Un autre de Chris Gannon, c'est une démonstration soignée d'un fond de cascade moussant. Le mouvement de l'eau est net, et vous pouvez voir de petites gouttes d'eau éclabousser quittant les bordures de l'animation pour que tout apparaisse plus réaliste.

Lien

13. Générateur de plantes par Blake Bowen

Maintenant, celui-ci est autre chose. Lorsque vous cliquez sur le bouton «Créer», vous verrez des plantes pousser et grandir. Mais chaque fois que vous cliquez, des motifs différents se forment.

Lien

14. Icône cliquable par 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 adaptée à une carte d'anniversaire.

16. Déchiqueteuse par Chris Gannon

Si vous aimez regarder le déchiquetage du papier, vous apprécierez cette animation qui représente une machine déchiquetant du papier par du papier de façon illimitée dans une séquence transparente.

Lien

17. Low PolyLion par GRAYGHOST

Il s'agit d'une illustration et d'une animation époustouflantes qui représentent une tête de lion apparaissant et disparaissant sous la forme de polygones animés.

Lien

18. Hourglass Loader par Leela

Une autre animation efficace qui utilise uniquement SVG. Toutes les 5 secondes, le sablier se retourne et commence 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 déconcerté la regarde.

20. Étudiant par Domany

Un étudiant enthousiaste semble prêt à apprendre! C'est une excellente animation où les pages du livre tournent proprement. Pas de clignement des yeux de l'élève, mais c'est toujours une animation parfaitement rangé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!