septembre 2020 | Quentin Renaux

handwriting svg animation par catégories

< if content: />

Jour 15, Ça fait quelques jours maintenant que je dig ce qu’on peut faire avec le svg associé à notre adoré css.

Aujourd’hui j’ai donc animé mon Nom et prénom comme si je l’écrivais moi meme en SVG, responsive et avec un fond de couleur.

Après quelques essais sur illustrator que je ne connaissais que trop mal (merci Jessie James) et quelques tutorials pour comprendre la fonction stroke-dashoffset() et l’animé à la bonne vitesse pour un effet naturel.

(Animation sur le Hover donc à voir sur un ordinateur pour jouer avec le curseur de votre souris)

Voici le résultat: quentinrenaux.com/xp/1day1code/handwriting-svg-qr-speed3.html

Day14 : moving gradient background in css par catégories

< if content: />

Jour 14, pour preparer les backgrounds de futur réalisations j’ai coder un fond simple mais en mouvement, avec « background linear gradient ».

On trouve de très bon générateurs de background dégradé sur internet comme par exemple : mycolor.space ou cssgradient.io pour mes préférés, par contre, aucun ne permet de mettre en mouvement ces fonds.

Un exemple de fond en mouvement serait de créer un fond » agrandi » avec plusieurs couleurs en dégradées le tout en mouvement, ca donnerait ca :

background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 
background-size: 400% 400%;
background-position();

Le résultat : quentinrenaux.com/xp/1day1code/moving-gradient-animation-css/

ps: j’ai ajouté un oeil en mouvement au centre pour rendre le tout plus psyché/trippy

Day13 : svg animation with css par catégories

< 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 ? 🙂

Day12 : Curved text along a path with svg par catégories

< if content: />

Jour 12, j’ai reçu une maquette il y a quelques jours d’un projet de site dans le quel il y avait des textes incurvés. La premiere idée serait d’utilisé du javascript comme arctext.js le faisait. Pour se moderniser et jouer avec le svg et le css j’ai découvert que l’on pouvait faire suivre un texte le long d’une forme svg (n’importe quelle forme), ici on va faire ca sur un demie cercle:

Réalisons notre texte incurvé :

On crée notre path svg (forme)

On ajoute notre texte

On met une petite animation d’apparition

Le résultat : https://quentinrenaux.com/xp/1day1code/curved-text/