SVG Path Follow
Un point de 8 px de rayon qui parcourt une courbe SVG à vitesse constante, un tour en 5,5 s quelle que soit la fréquence de l'écran : getTotalLength() et getPointAtLength() à chaque image, n'importe quel tracé possible — 1,6 Ko de JavaScript, en pause hors de l'écran, posé à l'arrivée 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. Transitions comprend 52 effets, dont 9 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le cadre .md-path-stage (300 px de haut au minimum, fond #0a0a0f) contient .md-path-follow et un SVG en viewBox="0 0 400 250" qui prend toute la largeur. Deux éléments dedans : la courbe .md-path-trail, deux arcs de Bézier quadratiques (M 30 200 Q 100 30 200 125 Q 300 220 370 50), tracée en indigo #6366f1 de 2 px à 30 % d'opacité ; et le point .md-path-dot, un cercle de 8 px de rayon de la même couleur, avec un halo (drop-shadow de 6 px). Le point est placé au départ de la courbe dans le HTML (cx="30" cy="200") : sans script, il est déjà à sa place.
Le script parcourt chaque .md-path-follow de la page. Il mesure la courbe une fois (getTotalLength() : 471 unités pour le tracé fourni), puis, à chaque image, calcule l'avancement à partir de l'horloge — ((t - start) / duration) % 1, avec duration = 5500 ms — et demande au navigateur le point situé à cette distance le long du tracé (getPointAtLength()), dont il recopie x et y dans cx et cy. La distance étant mesurée sur la courbe elle-même, la vitesse est constante dans les virages comme dans les lignes droites : environ 86 unités par seconde. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : un tour en 5 500 ms dans les trois, que l'écran affiche 60 ou 120 images par seconde.
Un IntersectionObserver arrête la boucle quand le bloc sort de l'écran et la relance à son retour, là où le point s'était arrêté : mesuré, le point ne bouge plus hors de la vue, rien ne tourne pour rien. Le tracé est libre : remplacez l'attribut d par n'importe quel chemin (exporté d'un logiciel de dessin, une route, un réseau), le point le suivra. Le cadre a sa propre classe, préfixée comme le reste de l'effet : deux effets de la bibliothèque collés sur la même page ne se réécrivent pas.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le script ne lance pas la boucle et pose le point au bout du tracé. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : point fixe en (370, 50), à l'arrivée, aux deux relevés. - Arrêt : la boucle tourne sans fin tant que le bloc est visible. Si le trajet sert de décor, une boucle convient ; s'il représente un vrai déplacement (un colis, un véhicule), jouez-le une fois et tenez l'arrivée (voir la FAQ), ou proposez un bouton pause : un mouvement de plus de 5 secondes doit pouvoir s'arrêter.
- Lecteurs d'écran : le SVG n'a ni titre ni description, et le point ne dit rien de sa position. Si le trajet porte une information (« navire à mi-traversée »), écrivez-la en texte à côté, dans un élément
role="status"mis à jour aux étapes importantes, et masquez le dessin (aria-hidden="true"sur le SVG). - Contraste : le point indigo mesure 4,4:1 sur le fond
#0a0a0f; la courbe à 30 % d'opacité est volontairement discrète (environ 1,4:1) : si le tracé doit se lire, montez son opacité à 0,6.
Compatibilité navigateur
SVG + 1,6 Ko de JavaScript (getTotalLength(), getPointAtLength(), requestAnimationFrame, IntersectionObserver), aucune dépendance. Mesuré dans Chromium 151, Firefox 153 et WebKit 26 : même durée de tour (5 500 ms), même arrêt hors de l'écran, même pose à l'arrivée sous mouvement réduit. Les deux méthodes de mesure du tracé existent dans tous les navigateurs depuis plus de dix ans.
Sans IntersectionObserver, la boucle démarre au chargement et ne s'arrête plus. Sans JavaScript, le tracé et le point s'affichent, le point immobile au départ de la courbe.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="md-path-stage">
<div class="md-path-follow">
<svg viewBox="0 0 400 250">
<path class="md-path-trail" d="M 30 200 Q 100 30 200 125 Q 300 220 370 50"></path>
<circle class="md-path-dot" r="8" cx="30" cy="200"></circle>
</svg>
</div>
</div>Le code complet HTML + CSS + JS de SVG Path Follow, prêt à coller — et les 840 effets. Ou 299 € TTC une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Tracé (SVG — attribut d de .md-path-trail) |
deux arcs quadratiques dans un viewBox de 400 × 250 |
Tout chemin SVG marche : collez celui d'un logiciel de dessin. Gardez le viewBox qui va avec ; le point se recale tout seul, la longueur est mesurée au chargement. |
Durée d'un tour (JS — var duration = 5500) |
5,5 s, quelle que soit la fréquence de l'écran | Pour une vitesse fixe plutôt qu'une durée fixe, calculez duration = length / vitesse (ex. length / 0.1 pour 100 unités par seconde) : un tracé deux fois plus long prendra deux fois plus de temps. |
Trajet unique (JS — % 1) |
boucle : le point repart du début | Remplacez par Math.min(1, (t - start) / duration) et arrêtez la boucle quand l'avancement atteint 1 : le point s'arrête à l'arrivée et y reste. |
Point (SVG + CSS — .md-path-dot) |
cercle de 8 px de rayon, #6366f1, halo de 6 px |
r="12" pour un repère tactile ; une icône (<g> ou <use>) se déplace avec transform="translate(x y)" au lieu de cx / cy. |
Trait (CSS — .md-path-trail) |
2 px, indigo, 30 % d'opacité | stroke-dasharray: 7 6 pour une route maritime en pointillés ; stroke-linecap: round et 6 px pour un tuyau. |
FAQ
animate(), remplacez ((t - start) / duration) % 1 par Math.min(1, (t - start) / duration), et ne relancez requestAnimationFrame que tant que l'avancement est inférieur à 1. Le point s'arrête au bout du tracé et y reste ; pour rejouer, remettez start à null et relancez la boucle. C'est ce que font les trois exemples.offset-path: path('…') avec une animation de offset-distance fait suivre une courbe à un élément HTML, sans script. Mais le chemin y est exprimé en pixels de l'élément : il ne suit pas la mise à l'échelle d'un viewBox, et la courbe dessinée et le point se décalent dès que le SVG change de taille. Ici le point vit dans le même SVG que le tracé : ils restent superposés à toutes les tailles.IntersectionObserver annule la boucle dès que le bloc sort de l'écran (mesuré : le point ne bouge plus) et la relance au retour, en reprenant à l'endroit où le point s'était arrêté. Les onglets en arrière-plan suspendent de toute façon requestAnimationFrame.
