••
< if title: />

Day13 : svg animation with css

projet : one experiment per day

< if content: />

Jour 13 de mon autochallenge #1day1code, On parle encore de svg ? Oui mais avec une animation, et ce n’est pas de mince affaire!

On va réaliser la lettre Q avec une stroke qui la remplie tout doucement.

Pour ca tout commence sur illustrator où l’on va créer notre lettre à partir d’une font Baskerville, on la véctorise en gardant uniquement le contour pour ensuite créer un masque et ajouter un “stroke-dasharray()” qui donnera la ligne directrice de notre animation. (C’est quand on dessine à la plume)

On reprend le tout dans notre feuille css où l’on animera la fonction stroke-dashoffset() de notre Path avec une animation simple sur 10 secondes qui remplira donc doucement notre lettre.

(J’ai aussi ajouté un passage du blanc au noir)

C’était un peu galère car il faut bien comprendre le code qui va sortir de notre SVG et qu’est ce que l’on doit animé, avec un peu de patience et d’acharnement on peut arriver à tout. On s’est donc focus sur une seule lettre aujourd’hui mais on peut aller bien plus loin:

Voici le résultat : quentinrenaux.com/xp/1day1code/lettre-Q

Demain on fait tout mon nom en hand writing ? 🙂


< if thumbnail: />

quentinrenaux accueil
quentinrenaux mail
quentinrenaux insta
••
••
••
••
••