Path Following
Un point lumineux qui parcourt en boucle un trajet courbe en pointillés, en SVG natif : remplacez le point par un bateau ou un ballon, il suit la courbe.
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 trajet est un <path class="pthf-track"> tracé en pointillés (trait de 2 unités, tirets 5,5) dans un SVG de 200 × 100 unités : deux vagues qui vont de (10,50) à (190,50). Le suiveur .pthf-dot est un cercle de rayon 8, indigo #6366f1, entouré d'un halo (drop-shadow de 8 px).
Le mouvement est en SMIL : <animateMotion dur="3s" repeatCount="indefinite" rotate="auto"> avec un <mpath> qui pointe vers le trajet. Le point part de la gauche, arrive à droite en 3 s, et repart du début. Comme le trajet est lu dans le d du chemin, il suffit de changer ce d pour changer la route. rotate="auto" tourne le suiveur dans le sens de la courbe : invisible sur un cercle, utile dès que vous mettez à sa place une forme orientée (flèche, bateau, avion).
Le script donne à chaque copie son propre identifiant de trajet (pthf-track-1, pthf-track-2…) et y rebranche son <mpath> : deux copies dans une même page suivent chacune leur route, même si l'une est modifiée ou masquée. Il gère aussi le mouvement réduit, que le CSS ne peut pas arrêter sur une animation SMIL.
Accessibilité
- Décoratif : le SVG porte
aria-hidden="true"etfocusable="false". Si le trajet transmet une information (un colis en route, une traversée), écrivez-la à côté : durée, heure d'arrivée, statut. - Mouvement réduit : avec
prefers-reduced-motion: reduce, le script met le dessin en pause (pauseAnimations()) avec le point posé au bout du chemin (arrivée), et relance si le réglage change pendant la visite. - Aucune interaction imposée : rien à survoler ni à cliquer, aucun élément focusable ajouté.
- Contraste : le trajet est volontairement discret (indigo à 30 % d'opacité) ; sur un fond clair, renforcez
--pthf-trackpour qu'on le voie.
Compatibilité navigateur
SMIL <animateMotion> + <mpath href> (sans xlink:), pauseAnimations() / setCurrentTime(), prefers-reduced-motion. Mesuré dans Chromium, Firefox et WebKit (Playwright) : 0 erreur, deux copies avec des identifiants distincts, la 2e copie suit sa propre courbe quand la 1re a un autre trajet et est masquée, point arrêté au bout du chemin en mouvement réduit. Les versions ci-dessous sont celles qui lisent href sans préfixe sur <mpath>.
Sans SMIL, le trajet en pointillés reste affiché et le suiveur se place en haut à gauche du dessin (0,0). Sans JavaScript, une seule copie par page fonctionne parfaitement ; avec plusieurs copies, elles suivent toutes le premier trajet.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0604-root">
<div class="pthf-stage">
<svg class="pthf-svg" viewBox="0 0 200 100" aria-hidden="true" focusable="false">
<path id="pthf-track" class="pthf-track" d="M10,50 C40,10 60,90 100,50 C140,10 160,90 190,50"/>
<circle class="pthf-dot" r="8">
<animateMotion dur="3s" repeatCount="indefinite" rotate="auto">
<mpath href="#pthf-track"/>
</animateMotion>
</circle>
</svg>
</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 |
|---|---|---|
Taille (CSS — --pthf-w / --pthf-h) |
200px / 100px | Taille du dessin ; le repère 200 × 100 garde ses proportions et se centre dans la boîte. |
Couleurs (CSS — --pthf-track, --pthf-dot, --pthf-glow) |
rgba(99,102,241,.3) / #6366f1 / rgba(99,102,241,.6) | Pointillés, suiveur et halo, réglables par copie avec un style sur la racine. |
Fond et hauteur du bloc (CSS — --pthf-page, --pthf-root-h) |
#0a0a0f / 300px | transparent et 0px pour poser le trajet sur une carte, une photo ou une ligne de liste. |
Trajet (HTML — d de .pthf-track) |
M10,50 C40,10 60,90 100,50 C140,10 160,90 190,50 | N'importe quel chemin SVG dans le repère 0-200 × 0-100 : le suiveur le parcourt du premier au dernier point. |
Durée du trajet (HTML — dur de <animateMotion>) |
3s | Temps pour aller du début à la fin ; repeatCount="1" et fill="freeze" pour un trajet unique qui s'arrête à l'arrivée. |
Suiveur (HTML — l'élément .pthf-dot) |
cercle de rayon 8 | Remplacez-le par un <g class="pthf-dot"> contenant votre dessin (centré sur 0,0) et gardez le <animateMotion> à l'intérieur. rotate="auto" l'oriente selon la courbe, rotate="0" le garde droit. |
FAQ
pthf-track-1, -2…) et y rattache son <mpath>. Sans ce renommage, les deux copies auraient le même identifiant et suivraient toutes la route de la première. Si vous ajoutez une copie après le chargement (contenu injecté), relancez le script ou donnez-lui vous-même un identifiant unique.svg.setCurrentTime(0) sur le .pthf-svg concerné : le suiveur revient au départ. Pour un trajet joué une seule fois, mettez begin="indefinite" repeatCount="1" fill="freeze" sur <animateMotion> et appelez animateMotion.beginElement() depuis un vrai <button>.rotate="auto" : il aligne le suiveur sur la direction de la courbe, ce qui convient à une flèche, un bateau ou un avion dessinés pointe vers la droite. Pour une montgolfière, un personnage ou un texte, remplacez-le par rotate="0".
