C’est relativement simple, à partir du moment où vous avez votre tracé SVG. Je ne vais pas vous apprendre à faire du dessin vectoriel :p

1. Téléchargez l’archive zippée depuis Github
2. Placez les fichiers se trouvant dans le dossier « src » de l’archive dans votre projet web
3. Avant la balise </body> chargez les deux fichiers comme suit :

   <script src="assets/js/vivus.js"></script>

4. Puis en dessous de cet appel JS, initialisez l’animation comme suit :

   <script>
   var anim1 = new Vivus(
      'animation-id', 
      {
         type:     'delayed',
         duration: 150,
         start:    'autostart',
         delay:    10, //seulement pour le type "delayed"
         selfDestroy: false
      },
      function() {
         // fonction de callback
      }
   );
   </script>

Une fois l’animation initialisée vous avez accès à 3 méthodes pour contrôler l’animation : play, stop et reset à utiliser comme suit :

anim1.reset();
anim1.play();

Les types scenario permettent également de jouer avec un scénario plus précis dont les étapes sont définies directement dans des attributs data-* posés sur les composants du SVG directement.

Trouver des images svg (path)
intégrer vos image svg