Animation facile d'un SVG en CSS (effet dessiné à la main) #Shorts

Coucou, bienvenue dans ce nouvel épisode de Pimp My Site ! Le format où t'apprends à réaliser un effet cool/sympa et facilement !
Aujourd'hui tu vas apprendre à dessiner et à animer un SVG simplement en CSS.
Si tu as des questions, des remarques, des suggestions de vidéos t'es plus que le bienvenue à en discuter dans l'espace de commantaire.

Le résultat final de l'effet de signature dessiné à la main :

https://www.wawasensei.dev/tutos/svg-animation/handwriting/

Son code source :

https://github.com/wass08/svg-animation-handwriting

Le résultat final du spinner de chargement avec l'effet de vagues :

https://www.wawasensei.dev/tutos/svg-animation/waves/

Son code source :

https://github.com/wass08/svg-animation-waves

Pour le dessin j'utilise le super service en ligne Figma :

https://www.figma.com/

Les propriétés CSS que l'on va aborder sont :

Animation : https://developer.mozilla.org/fr/docs/Web/CSS/animation

Stroke-dasharray : https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-dasharray

Stroke-dashoffset : https://developer.mozilla.org/fr/docs/Web/SVG/Attribute/stroke-dashoffset

La méthode Javascript pour récupérer la taille de l'élément SVG :
https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength

La vidéo du grand Fireship que j'ai traduite et revisitée façon Wawa Sensei :
https://www.youtube.com/watch?v=LuWdeuPMHps