SVG Path Follow
Un point violet lumineux fait l'aller-retour sur une courbe en S tracée en pointillés, en ralentissant à chaque bout, suivi de deux échos plus petits et plus pâles à 0,15 s et 0,3 s : une traînée fantôme qui se resserre aux arrêts et s'étire en pleine vitesse — CSS pur avec offset-path, figée en pleine course 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-0032-root fait au moins 300 px de haut, fond #0a0a0f. Il centre .mp-pathfollow-scene, une scène de 300 × 200 px qui contient deux choses : un <svg> de même taille (viewBox="0 0 300 200", donc 1 unité = 1 px) qui dessine la courbe en S en pointillés violets à 15 % (stroke-dasharray="6 4"), et trois ronds en position: absolute posés en haut à gauche de la scène : le point de 18 px et deux échos de 10 px, à 60 % et 30 % d'opacité.
Les trois ronds partagent la même trajectoire, offset-path: path("M 20 100 C 80 20 150 180 220 80 C 260 20 280 100 280 100"), copie exacte du tracé du SVG. Comme les coordonnées de path() se lisent en pixels depuis le coin de la scène, et que le SVG a la même taille que la scène, le centre du point passe exactement sur la ligne pointillée (mesuré : moins de 0,1 px d'écart dans Chromium, Firefox et WebKit). L'animation mpOrbit fait varier offset-distance de 0 à 100 % en 3 s, en ease-in-out et en alternate : 3 s à l'aller, 3 s au retour, lent aux deux bouts, rapide au milieu de la courbe (321 px de long).
Les échos ont la même animation avec un délai négatif : -5.85s et -5.7s. Un aller-retour complet dure 6 s ; démarrer 5,85 s « en avance » revient à être 0,15 s en retard, sans attendre au départ. Les échos suivent donc le point dans les deux sens. Comme ils sont décalés dans le temps et non dans l'espace, ils se tassent contre le point quand il ralentit et s'étirent quand il file (environ 25 px d'écart en pleine vitesse). Sous prefers-reduced-motion: reduce, un bloc limité à .fx-0032-root arrête tout et pose le point à 62 % de la courbe, les échos à 57 et 52 %, juste derrière lui.
Accessibilité
- Mouvement réduit : sous
prefers-reduced-motion: reduce, le point et ses deux échos s'arrêtent au milieu de la courbe, dans l'ordre de la course : on lit encore le sens du trajet. Mesuré dans Chromium, Firefox et WebKit : 0 animation en cours, 0 % des pixels changent en 800 ms. - Contenu décoratif : aucun texte dans l'effet. S'il illustre un trajet (un bac, un parcours), écrivez les horaires ou la distance en texte à côté et mettez
aria-hidden="true"sur la racine. - Contraste de la courbe : le pointillé violet à 15 % est un simple guide. Si le trajet est l'information, montez son opacité (exemple 1 : blanc à 75 % sur l'eau) ; le point, lui, ressort sur tous les fonds sombres.
- Aucune interaction : l'effet ne réagit ni à la souris, ni au doigt, ni au clavier.
Compatibilité navigateur
CSS pur : offset-path: path(), offset-distance animé, animation-delay négatif, SVG en ligne pour la courbe. Aucune dépendance, aucun JavaScript. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : point centré sur la ligne (écart inférieur à 0,1 px), échos derrière le point à l'aller comme au retour, arrêt sous mouvement réduit, deux copies indépendantes sur la page.
Sans offset-path (Safari avant 16), la courbe en pointillés s'affiche, mais le point et ses échos restent empilés, immobiles, dans le coin haut gauche de la scène (mesuré en retirant la propriété). Si ce public compte, masquez-les avec @supports not (offset-path: path("M 0 0")).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0032-root">
<div class="mp-pathfollow-scene"> <!-- 300 × 200 px -->
<svg viewBox="0 0 300 200" fill="none">
<path d="M20,100 C80,20 150,180 220,80 C260,20 280,100 280,100" … stroke-dasharray="6 4"></path>
</svg>
<div class="mp-pathfollow-trail mp-pathfollow-trail--2"></div> <!-- 0,3 s de retard -->
<div class="mp-pathfollow-trail mp-pathfollow-trail--1"></div> <!-- 0,15 s de retard -->
<div class="mp-pathfollow-dot"></div>
</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 du <path> et offset-path) |
courbe en S de (20, 100) à (280, 100) | Écrivez le même tracé aux deux endroits, en coordonnées de la scène de 300 × 200 px. Si vous changez la taille de la scène, changez le viewBox du SVG à l'identique, sinon la ligne et le point se séparent. |
Agrandir (CSS — transform: scale() sur .mp-pathfollow-scene) |
aucun | offset-path est en pixels : changer seulement la largeur de la scène étirerait la ligne SVG mais pas la trajectoire. Un scale(1.5) agrandit les deux ensemble. |
Durée (CSS — 3s dans animation) |
3 s par trajet | Si vous la changez, recalculez les délais des échos : délai = -(2 × durée - retard). Pour 4 s et 0,15 s de retard : -7.85s. |
Écart des échos (CSS — animation-delay de .mp-pathfollow-trail--1 et --2) |
-5.85s et -5.7s (0,15 et 0,3 s de retard) |
-5.7s et -5.4s doublent la traînée (0,3 et 0,6 s). Pour un aller simple sans retour, retirez alternate : un cycle dure alors 3 s et les délais deviennent -2.85s et -2.7s. |
Rythme (CSS — ease-in-out dans animation) |
ralenti aux deux bouts | linear donne une vitesse constante : les échos restent alors à distance égale du point tout le long. |
Couleurs (CSS — background, box-shadow ; SVG — stroke) |
violet #8b5cf6, échos violet à 30 % |
La couleur de la ligne se règle aussi en CSS : .mp-pathfollow-scene path { stroke: … } l'emporte sur l'attribut. |
FAQ
-0.15s mettrait l'écho devant le point.offset-rotate vaut auto par défaut, le point s'oriente selon la courbe. Sur un rond, ça ne se voit pas. Si vous remplacez le point par une icône (un bateau, une flèche), elle suivra les virages ; ajoutez offset-rotate: 0deg pour la garder droite.
