Zone 407:42
152bpm
32:146,2 km
Cardélys
Séance en cours
Fractionné 6 × 800 m
Bloc 4 sur 6 · encore 440 m
Allure4'05"/km
Max161 bpm
Récup.1:12
Calories418
SVGGratuit
Line Draw
Une ligne brisée SVG qui se trace puis s'efface en boucle, en CSS seul : remplacez le chemin pour dessiner un pouls, un itinéraire ou un geste.
Mis à jour le
Survolez ou cliquez la scène pour interagir
Cet effet est gratuit — la catégorie SVG en contient 30 au total, dont 3 gratuits. Effect.Labs regroupe 840 effets vanilla. Découvrir la catégorie →
Exemples d'usage
Coursiers à vélo
Vos plis livrés à vélo en 25 minutes
Retrait et livraison partout en ville, du lundi au samedi, de 8 h à 20 h.
9:41100 %
Clavendre
Tracez votre motif
Regardez, puis faites pareil
Étape 1 sur 2
Coffre-fort de mots de passe
Un motif plutôt qu'un code à six chiffres
- 1Reliez au moins 4 points
- 2Gardez le doigt sur l'écran
- 3Refaites-le pour confirmer
Comment ça marche
Le dessin est un seul <path> (classe .lnd-path) dans un SVG de 150×150 unités. L'attribut pathLength="100" ramène sa longueur à 100, quelle que soit sa taille réelle : un tiret de 100 (stroke-dasharray: 100) couvre alors tout le chemin, et il suffit de décaler ce tiret avec stroke-dashoffset pour faire apparaître ou disparaître le trait.
L'animation lndDraw (3 s, en boucle, courbe ease) fait passer ce décalage de 100 (rien de visible) à 0 (trait complet) pendant les premiers 45 % du cycle, le garde à 0 jusqu'à 55 %, puis le pousse à −100 : le trait s'efface depuis son point de départ, dans le sens où il s'est dessiné. Le chemin livré contient deux lignes brisées (deux commandes M) ; le tiret repart au début de chacune, si bien qu'elles se tracent ensemble et que la plus courte est complète avant l'autre.
Pour votre propre forme, remplacez l'attribut d (et le viewBox si elle déborde de 150×150) en gardant pathLength="100" : le cycle reste juste, que le chemin mesure 40 ou 4 000 unités. Aucun JavaScript, aucune interaction ; le cadre .fx-0599-root fait 250 px de haut sur un fond bleu nuit, réglables par variables.
Accessibilité
- Décoratif par défaut : le SVG porte
aria-hidden="true". Si le tracé représente une donnée (un rythme cardiaque, un trajet), écrivez cette donnée en texte à côté : le lecteur d'écran lira le texte, pas la ligne. - Mouvement réduit : avec
prefers-reduced-motion: reduce, l'animation est retirée et la ligne reste entièrement dessinée (mesuré dans Chromium, Firefox et WebKit : aucune animation en cours, image identique à 0,7 s d'écart). - Aucune interaction : rien à survoler, à cliquer ni à atteindre au clavier ; l'effet se comporte de la même façon à la souris, au doigt et au clavier.
- Contraste : l'indigo
#6366f1atteint 3,9:1 sur le fond livré et 4,5:1 sur du blanc, au-dessus du minimum de 3:1 demandé pour un élément graphique.
Compatibilité navigateur
CSS seul. pathLength agit sur les tirets depuis Chrome 50, Firefox 6 et Safari 14 ; la règle de mouvement réduit demande Chrome 74, Firefox 63 et Safari 10.1. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 0 erreur, deux copies indépendantes, rien qui déborde à 390 px.
Chrome 74+✓ Complet (mesuré)
Firefox 63+✓ Complet (mesuré)
Safari 14+✓ Complet (mesuré dans WebKit 26.5)
Edge 79+✓ Complet (moteur Chromium)
Safari iOS 14+✓ Complet (moteur WebKit, non testé sur appareil)
Chrome Android 74+✓ Complet (moteur Chromium)
Avant Safari 14, pathLength est ignoré pour les tirets : le trait se dessine par morceaux. Sans animations CSS, la ligne s'affiche simplement, complète.
Le code
Copiez les deux blocs (HTML et CSS) dans votre page. Aucun JavaScript, aucune dépendance.
HTML
<div class="fx-0599-root">
<svg class="lnd-svg" viewBox="0 0 150 150" aria-hidden="true">
<path class="lnd-path" pathLength="100" d="M20,75 L50,30 L80,60 L110,20 L130,50 M20,130 L60,90 L100,110 L130,80"/>
</svg>
</div>
CSS
.fx-0599-root,.fx-0599-root *,.fx-0599-root *::before,.fx-0599-root *::after{box-sizing:border-box}
.fx-0599-root{--lnd-color:#6366f1;--lnd-stroke:3;--lnd-size:150px;--lnd-speed:3s;--lnd-repeat:infinite;--lnd-bg:rgb(26,26,36);--lnd-height:250px;display:flex;align-items:center;justify-content:center;width:100%;position:relative;color:#fff;font-family:sans-serif;height:var(--lnd-height);overflow:hidden;background:var(--lnd-bg)}
.fx-0599-root .lnd-svg{display:block;width:var(--lnd-size);max-width:100%;height:auto}
.fx-0599-root .lnd-path{fill:none;stroke:var(--lnd-color);stroke-width:var(--lnd-stroke);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0;animation:lndDraw var(--lnd-speed) ease var(--lnd-repeat) both}
@keyframes lndDraw{0%{stroke-dashoffset:100}45%,55%{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@media (prefers-reduced-motion:reduce){.fx-0599-root .lnd-path{animation:none}}
JavaScript
CSS pur — aucun JavaScript requis.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
d du chemin (et viewBox) |
deux lignes brisées dans 150×150 | La forme dessinée. Gardez pathLength="100" sur le chemin pour que le cycle reste juste. |
--lnd-color |
#6366f1 |
Couleur du trait. |
--lnd-stroke |
3 |
Épaisseur du trait, en unités du viewBox (elle grandit avec le dessin). |
--lnd-speed |
3s |
Durée d'un cycle complet : dessin, pause, effacement. |
--lnd-repeat |
infinite |
Nombre de cycles. .5 : le trait se dessine une fois et reste affiché ; 1 : il se dessine, s'efface et ne revient plus. |
--lnd-size |
150px |
Largeur du dessin ; la hauteur suit les proportions du viewBox. 100% pour remplir le cadre. |
--lnd-height et --lnd-bg |
250px et rgb(26,26,36) |
Hauteur et fond du cadre ; transparent pour poser le tracé sur votre propre décor. |
FAQ
Comment dessiner le trait une seule fois et le laisser affiché ?
Mettez --lnd-repeat: .5 sur .fx-0599-root : l'animation s'arrête au milieu de son cycle, quand le trait est complet, et il reste affiché. Pour le rejouer, masquez puis réaffichez la racine.
Pourquoi une de mes lignes est-elle complète avant l'autre ?
Le tiret repart au début de chaque sous-chemin (chaque M) : les lignes démarrent ensemble et la plus courte finit la première. Pour qu'elles se suivent, faites-en un seul trait continu ou deux chemins avec des durées différentes.
Puis-je reprendre un tracé exporté d'un logiciel de dessin vectoriel ?
Oui : copiez l'attribut d du chemin et son viewBox. Le tracé doit être un contour (pas une forme pleine) ; si l'export contient plusieurs chemins, donnez à chacun la classe lnd-path et pathLength="100".
