20 exemples d'animation SVG fantastiques

Scalable Vector Graphics (SVG) est 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 autorise 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 capacités, les concepteurs 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 toujours en popularité, la plupart ne les connaissent pas. Cet article mettra en lumière 20 animations SVG fantastiques qui montrent le potentiel de ce format.

1. Icônes médicales SVG par kittons

Cette animation chaleureuse et fluide est idéale pour tout site Web lié à la santé. Pendant que vous énumérez les différents fils de discussion, les images apparaîtront subtilement. La voiture d'ambulance ou l'atome se construira, l'œil s'ouvrira et le médecin sautera. Cette animation montre tout le fun et le dynamisme du 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. Tirez vers le bas pour actualiser (avion en papier) par Nikolay Talanov

Habituellement, les pages s'actualisent lorsque vous les « tirez vers le bas ». Cette animation amène cela à un nouveau niveau. Lorsque vous tirez vers le bas pour le relâcher, 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 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 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 d'incroyables puzzles interactifs avec une animation SVG. Dans cet exemple, nous pouvons choisir l'une des nombreuses images et voir comment elle se déconstruit en plusieurs petites pièces du puzzle. Vous pouvez également 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 comment vous n'avez pas besoin de lignes mobiles pour une animation brillante, juste une excellente police et un code de couleur approprié avec un effet de dégradé.

Lien

8. Voyageons par jjperezaguinaga

Deux avions et une montgolfière tournant autour de monuments populaires du monde. Cette animation est colorée, optimiste et époustouflante. Il montre tout ce que vous pouvez faire si vous êtes doué en SVG.

Lien

9. Horloge de Mohamad Mohebifar

Une simple animation SVG d'une horloge mobile qui affiche 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 besoin de 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 seule prise qui passe en revue tous les appareils intelligents que nous utilisons de la manière la plus créative. L'ordinateur de bureau se transformera en ordinateur portable, l'ordinateur portable en tablette, puis en smartphone.

Lien

12. Cascade de Chris Gannon

Un autre de Chris Gannon, c'est une démonstration soignée d'un fond de cascade écumant. Le mouvement de l'eau est soigné et vous pouvez voir de petites gouttes d'eau éclabousser quitter les bordures de l'animation pour que tout semble 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 pousser. 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 de papier par Chris Gannon

Si vous aimez regarder le déchiquetage de papier, vous apprécierez cette animation qui représente une machine déchiquetant papier par papier un nombre illimité de fois dans une séquence continue.

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. 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. Vache réactive 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 superbe animation où les pages du livre tournent proprement. Pas de clignement des yeux de l'élève, mais c'est tout de même une animation parfaitement rangée pour conclure cette liste.

Lien

À ton tour

Quelles sont vos animations SVG préférées qui ne figurent pas dans cette liste ? Partagez vos choix dans les commentaires ci-dessous!