Path Drawing
Une courbe violette se dessine de gauche à droite sous un point qui la parcourt, puis s'efface quand il revient, en 3 s dans chaque sens : le trait naît exactement sous le point, à tout instant — CSS pur (stroke-dashoffset + offset-path) calé par pathLength="1", tracé complet et immobile si l'utilisateur réduit les animations.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. 3D comprend 50 effets, dont 8 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le bloc .fx-0039-root fait au moins 300 px de haut, fond #0a0a0f, et centre .mp-drawing-scene (300 × 220 px). La scène contient un <svg> de même taille (viewBox="0 0 300 220", 1 unité = 1 px) avec un seul tracé, M30,180 Q80,30 150,110 Q220,190 270,60 : deux arcs qui montent, redescendent et remontent, en violet #8b5cf6, 2 px, bouts arrondis. Il mesure 358 px. Par-dessus, un point violet de 10 px avec un halo, en position: absolute dans le coin haut gauche.
Le trait est dessiné par la technique du tiret : stroke-dasharray: 1 découpe la ligne en un tiret plein et un vide de même longueur, et stroke-dashoffset fait glisser ce motif. À 1, on ne voit que le vide ; à 0, le tiret couvre toute la ligne. L'attribut pathLength="1" sur le <path> fixe la longueur du tracé à 1, quelle que soit sa taille réelle : le tiret mesure donc exactement la ligne, sans calcul ni JavaScript, et une valeur de stroke-dashoffset de 0,4 veut dire « 60 % dessinés ».
Le point suit le même tracé, recopié dans offset-path: path(…), avec offset-distance de 0 à 100 %. Les deux animations, mpDraw pour le trait et mpOrbit pour le point, ont la même durée (3 s), la même courbe (ease-in-out) et le même aller-retour (alternate) : à chaque image, la part dessinée vaut la part parcourue. Mesuré dans Chromium, Firefox et WebKit : le bout du trait et le point avancent du même pourcentage (écart inférieur à 0,1 %), et le centre du point reste sur la ligne (moins de 0,1 px). Au retour, le trait s'efface derrière le point qui revient. Sous prefers-reduced-motion: reduce, un bloc limité à .fx-0039-root affiche le tracé entier et pose le point à l'arrivée.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, la courbe est entière et le point posé au bout, comme à la fin d'un tracé. Mesuré dans Chromium, Firefox et WebKit : 0 animation en cours, 0 % des pixels changent en 800 ms. - Information du tracé : si la ligne représente un trajet ou un itinéraire, donnez son départ, son arrivée et ses chiffres en texte (comme « Orléans → Rouen, 3 h 12 » dans le premier exemple) et mettez
aria-hidden="true"sur la racine : un lecteur d'écran ne lit pas un dessin. - Contraste : le trait violet de 2 px sur
#0a0a0fse voit bien ; sur un fond clair ou une carte, épaississez-le (3 à 5 px) et choisissez une couleur franche, en CSS (stroke,stroke-width). - Aucune interaction : l'effet ne réagit ni à la souris, ni au doigt, ni au clavier.
Compatibilité navigateur
CSS pur : stroke-dasharray et stroke-dashoffset animés, attribut SVG pathLength, offset-path: path(). Aucune dépendance, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : trait et point synchronisés (écart inférieur à 0,1 %), point centré sur la ligne, arrêt sous mouvement réduit, deux copies indépendantes sur la page.
Sans offset-path (Safari avant 16), la courbe se dessine et s'efface normalement, mais le point reste immobile dans le coin haut gauche de la scène (mesuré en retirant la propriété) ; @supports not (offset-path: path("M 0 0")) permet de le masquer pour ne garder que le trait.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0039-root">
<div class="mp-drawing-scene"> <!-- 300 × 220 px -->
<svg viewBox="0 0 300 220" fill="none">
<path class="mp-drawing-path" pathLength="1"
d="M30,180 Q80,30 150,110 Q220,190 270,60" …></path>
</svg>
<div class="mp-drawing-dot"></div> <!-- même tracé dans offset-path -->
</div>
</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 |
|---|---|---|
Tracé (HTML + CSS — attribut d et offset-path) |
M30,180 Q80,30 150,110 Q220,190 270,60 |
Écrivez le même tracé aux deux endroits, en coordonnées de la scène de 300 × 220 px. Grâce à pathLength="1", le trait reste calé sur le point sans rien recalculer, quelle que soit la longueur du nouveau tracé. |
Durée (CSS — 3s dans les deux animation) |
3 s par sens | Changez-la sur le trait ET sur le point, sinon ils se décalent. Même règle pour la courbe de vitesse (ease-in-out). |
Dessin sans effacement (CSS — alternate dans les deux animation) |
aller-retour | Sans alternate, le trait se dessine puis disparaît d'un coup au début de chaque tour. Pour qu'il reste dessiné, utilisez animation-iteration-count: 1 et animation-fill-mode: forwards sur les deux. |
Couleur et épaisseur du trait (CSS — .mp-drawing-path { stroke: …; stroke-width: … }) |
violet #8b5cf6, 2 px |
La règle CSS l'emporte sur les attributs du SVG. N'ajoutez pas votre propre stroke-dasharray : c'est lui qui dessine le trait. |
Agrandir ou retourner (CSS — transform sur .mp-drawing-scene) |
aucun | scale(1.5) agrandit ligne et trajectoire ensemble ; scale(-1, 1) fait partir le tracé de la droite. Ne changez pas seulement la largeur : offset-path est en pixels. |
Point (CSS — .mp-drawing-dot) |
10 px violet avec halo | Le point s'oriente selon la courbe (offset-rotate: auto) : une icône de crayon ou d'oiseau suivra les virages ; offset-rotate: 0deg la garde droite. |
FAQ
pathLength="1" demande au navigateur de compter la ligne comme valant 1 : stroke-dasharray: 1 la couvre exactement, et le trait avance du même pourcentage que offset-distance, pour n'importe quel tracé.animation-play-state: paused sur le trait et le point, puis, avec un IntersectionObserver, passez-les à running quand le bloc entre à l'écran ; ajoutez animation-iteration-count: 1 et animation-fill-mode: forwards pour que le tracé reste dessiné.
