••
< if title: />

Day12 : Curved text along a path with svg

projet : one experiment per day

< 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/


< if thumbnail: />

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