SVG Text Draw
Un mot en SVG dont le contour des lettres se trace, puis se remplit de couleur : en boucle, une seule fois, ou au moment que vous choisissez.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. SVG comprend 30 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le mot est un élément <text> (classe .txd-text) centré dans un SVG de 220×80 unités, en corps 48 et graisse 800. Il reçoit un contour (--txd-line, épaisseur 1,5) découpé en tirets de 400 unités ; chaque lettre a son propre contour et le tiret repart au début de chacun, si bien que toutes les lettres se tracent en même temps.
L'animation txdDraw dure --txd-speed (3 s) : de 0 à 50 %, le décalage du tiret passe de 400 à 0 et le contour se dessine sur des lettres encore vides ; de 50 à 70 %, la couleur de remplissage (--txd-fill) apparaît ; le mot reste ensuite plein jusqu'à la fin du cycle. Par défaut, le cycle tourne en boucle et repart d'un mot vide ; --txd-repeat: 1 le joue une fois et laisse le mot rempli, --txd-play: paused le fait attendre.
Le tracé dépend de la police : le code demande Inter, puis la police système. Il ne télécharge aucune police ; si Inter n'est pas installée, c'est la police du système qui se dessine. Le mot est centré (x="110", text-anchor="middle") : il reste au milieu quand vous le changez.
Accessibilité
- Texte annoncé : le SVG porte
role="img"et un<title>qui reprend le mot ; c'est lui que lisent les lecteurs d'écran. Changez-le en même temps que le texte. - Titre de page : placé dans un
<h1>ou un<h2>, le SVG donne son nom au titre ; le mot reste aussi présent en texte dans le HTML. - Mouvement réduit : avec
prefers-reduced-motion: reduce, le mot s'affiche directement contour et remplissage compris, même réglé en attente (mesuré dans les trois moteurs : 0 animation en cours). - Contraste : l'indigo
#6366f1atteint 4,4:1 sur le fond livré ; pour un mot posé sur une photo, gardez un fond assez uni derrière les lettres.
Compatibilité navigateur
CSS seul. Le mouvement réduit demande Chrome 74, Firefox 63 et Safari 10.1. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 0 erreur, une seule animation par mot, deux copies indépendantes, rien qui déborde à 390 px. Le dessin exact varie avec la police installée sur l'appareil.
Sans animations CSS, le mot s'affiche rempli avec son contour. Sans la police demandée, il se dessine dans la police de repli du système.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0605-root">
<svg class="txd-svg" viewBox="0 0 220 80" role="img">
<title>SVG</title>
<text class="txd-text" x="110" y="58" text-anchor="middle">SVG</text>
</svg>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Le mot (<text> et <title>) |
SVG | Changez les deux ensemble ; élargissez le viewBox (et x, sa moitié) pour un mot plus long. |
--txd-repeat |
infinite |
1 : le mot se trace une fois et reste rempli. |
--txd-play |
running |
paused : rien n'apparaît avant le retour à running (par exemple quand le mot devient visible). |
--txd-speed |
3s |
Durée du cycle : la moitié pour le contour, un cinquième pour le remplissage. |
--txd-line et --txd-fill |
#6366f1 et #6366f1 |
Couleurs du contour et du remplissage final. |
--txd-font, --txd-weight, --txd-stroke |
Inter puis police système, 800, 1.5 |
Police, graisse et épaisseur du contour ; une police fine demande un contour plus fin. |
--txd-width, --txd-bg, --txd-min-h |
220px, #0a0a0f, 300px |
Largeur du dessin (la hauteur suit le viewBox), fond et hauteur minimale du cadre. |
FAQ
--txd-font.viewBox (par exemple 0 0 420 80), placez x à la moitié (210) et augmentez --txd-width pour garder la même taille à l'écran.
