Ce codepen est inspiré du travail de Sten Hougaard

Les préparatifs

Créons deux conteneurs pour différentes implémentations d'animation :

 
Animated text
  



 
Click on me!
  

J'ai créé un svg à l'aide d'Adobe Illustrator, la caractéristique principale doit être une petite hauteur et une grande largeur.
Il est important de mentionner que svg est un enfant d'un élément d'en-tête puisque nous positionnerons svg par rapport à lui.

CSS

Nous transformons nos conteneurs en flexbox pour tout positionner gracieusement au centre.

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline est utilisé pour simplement réduire la largeur de l'élément à son contenu puisque svg en dépendra

Ensuite, nous devons positionner svg par rapport à un en-tête :

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

Nous utilisons la méthode standard pour positionner l'élément relatif au centre du parent. Pour ajuster le svg au texte, nous devons appliquer min-width et min-height.

Logique d'animation avec javascript

Pour animer des éléments en javascript, nous pouvons utiliser la merveilleuse méthode d'animation (images clés, options).

Images clés

Disséquons la fonction getDrawingParameters, qui donne des propriétés sur lesquelles itérer :

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

Tout d'abord, nous devons savoir quelle est la longueur réelle de notre chemin, en utilisant la méthode svg getTotalLength:

const length = path.getTotalLength();

Maintenant, nous devons utiliser notre longueur calculée pour simuler le dessin. Définissons notre point de départ. Nous avons besoin de l'attribut StrokeDasharray :

path.style.strokeDasharray = length;

Ici, nous disons à cet attribut de tracer un chemin avec alternance d'un tiret (taille=longueur) et d'un espace (taille=longueur).

L'attribut suivant, où nous avons besoin de longueur, est stroke-dashoffset :

path.style.strokeDashoffset = length;

Cette valeur indique que le calcul du tableau de tirets est extrait par valeur de longueur. Et puisque nous définissons notre tableau de tirets sur « dash-length gap-length dash-length gap-length… », le chemin de départ sera vide (gap).

Nous définissons donc nos propriétés itérables dans un tableau :

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

Nous utilisons offset pour définir l'heure relative à laquelle cette propriété doit être atteinte. Il a été conçu pour imiter le retard à chaque itération.

Possibilités

Le deuxième argument de la méthode animate est les options :

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

Nous définissons notre animation sur des itérations infinies et une durée de 10 secondes. Vous vous souvenez du décalage ? notre animation "active" ne prend que 1,5 seconde.