Spiral Path
Un point cyan part du centre et s'enroule vers l'extérieur, dans le sens horaire, sur un tour et quart de plus en plus large, en 6 s à vitesse constante, puis repart du centre : la seule trajectoire de la catégorie qui grandit en tournant — CSS pur avec offset-path, arrêté au bout de la spirale quand le visiteur limite 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
Haut d'au moins 300 px, sur fond #0a0a0f, .fx-0035-root centre une scène carrée de 260 px, .mp-spiral-scene. Un <svg> la recouvre (viewBox="0 0 260 260", une unité par pixel) et y trace la spirale en cyan à 12 % sur 1,5 px : un repère à peine visible. Huit courbes de Bézier partent de (130, 130), montent vers la droite, bouclent une première fois de près, puis une seconde fois plus au large pour finir en haut à droite, en (210, 70). Longueur : 432 px, dans un rectangle de 120 × 90 px décalé vers le haut et la droite.
Le point cyan de 12 px, auréolé d'un box-shadow, part du coin supérieur gauche de la scène et emprunte ce même dessin, repris tel quel dans son offset-path: path(…) : il ne s'écarte jamais du trait de plus de 0,1 px, dans les trois navigateurs testés. En 6 s, mpOrbit mène son offset-distance de 0 à 100 % en linear, soit environ 72 px par seconde du cœur au tour extérieur. Au bout, il réapparaît au centre et recommence : le tracé est ouvert et ne revient pas à son départ.
Ni JavaScript ni id : chaque copie du bloc sur une page tourne pour elle-même. Lorsque le visiteur limite les animations, une media query restreinte à .fx-0035-root supprime l'animation et laisse le point sur le tour extérieur, au bout de la spirale (offset-distance: 100%) : l'image fixe montre où mène le mouvement.
Accessibilité
- Animations limitées : avec
prefers-reduced-motion: reduce, le point se fige au bout de la spirale. Vérifié dans Chromium, Firefox et WebKit : aucune animation active, aucun pixel modifié pendant 800 ms. - Tracé peu visible : la spirale en cyan à 12 % se devine à peine sur le fond sombre ; seul le point se voit franchement. Si la forme de la spirale porte le sens (une coquille, un escalier), donnez-lui de l'épaisseur et du contraste, comme dans les exemples.
- Saut au centre : à chaque tour, le point disparaît du bout de la spirale et réapparaît au centre. Ce saut est net mais rare (toutes les 6 s) ; il n'y a aucun clignotement.
- Rien à cliquer : ni la souris, ni le doigt, ni le clavier n'agissent sur la spirale. Si le texte voisin dit l'essentiel, masquez la racine aux lecteurs d'écran avec
aria-hidden="true".
Compatibilité navigateur
CSS pur : offset-path: path(), offset-distance animé, SVG en ligne pour le tracé. 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), même durée, arrêt sous mouvement réduit, deux copies indépendantes.
Sans offset-path (Safari avant 16), le point reste immobile dans le coin haut gauche de la scène et la spirale s'affiche seule (mesuré en retirant la propriété). @supports not (offset-path: path("M 0 0")) permet de le masquer.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0035-root">
<div class="mp-spiral-scene"> <!-- 260 × 260 px -->
<svg viewBox="0 0 260 260" fill="none">
<path d="M130,130 C130,110 150,90 160,80 … C165,50 195,55 210,70" …></path>
</svg>
<div class="mp-spiral-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 |
|---|---|---|
Durée (CSS — 6s dans animation) |
6 s | Plus long, le point s'enroule plus calmement ; le saut au centre devient plus rare. |
Tracé (HTML + CSS — attribut d et offset-path) |
un tour et quart, de (130, 130) à (210, 70) | Écrivez la même spirale aux deux endroits, dans le repère de 260 × 260 px. Pour une spirale centrée ou plus régulière, un générateur de spirale en SVG donne un d à recopier tel quel dans path("…"). |
Visibilité du tracé (CSS — .mp-spiral-scene path { stroke: …; stroke-width: … }) |
cyan à 12 %, 1,5 px | La règle CSS l'emporte sur les attributs du SVG : 3 à 9 px et une couleur franche font de la spirale un dessin (coquille, pâte). |
Agrandir (CSS — transform: scale() sur .mp-spiral-scene) |
aucun | offset-path est en pixels : un scale() agrandit ligne et trajectoire ensemble. |
Sens (CSS — reverse dans animation) |
du centre vers l'extérieur | Avec reverse, le point part du bout et s'enroule vers le centre : un tourbillon qui aspire, une vidange. |
Couleur (CSS — background et box-shadow de .mp-spiral-dot) |
cyan #06b6d4 |
Le halo est un box-shadow de 12 px de la même teinte à 60 % : changez les deux ensemble. |
FAQ
alternate à l'animation : le point repart en arrière, du bord vers le centre, avant de ressortir.
