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 :
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
Need help with this tutorial? Join our Discord community!