Path Drawing on Scroll
Une courbe SVG de 364 unités qui se trace au défilement — stroke-dashoffset 600 → 0 sur une timeline nommée, 1 200 px de course — et quatre jalons qui grossissent (r 0 → 5 px) chacun sur sa propre plage animation-range : 0-15 %, 25-40 %, 50-65 %, 75-90 %. CSS seul, zéro JavaScript.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Scroll comprend 70 effets, dont 12 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Cinq boîtes : le cadre .demo-preview (flex centré, min-height: 300px, position: relative, fond #0a0a0f), le bloc défilant .pathdraw-container (width:100%;height:300px en style en ligne, overflow: hidden auto) qui déclare scroll-timeline: --pathScroll y, le plateau .pathdraw-spacer de 500 % (1 500 px, padding-top: 10px), le collant .pathdraw-sticky (top: 10px, width: 90%, max-width: 360px) et le svg.pathdraw-svg en viewBox 0 0 260 200, width: 100%; height: auto — 360 × 277 px dès que le cadre dépasse 400 px de large, 337 × 259 px à 390 px. Dedans : un linearGradient#pathGradient à trois arrêts (#6366f1, #d946ef, #f59e0b), le tracé M 20 180 Q 60 20, 130 100 T 240 30 (mesuré getTotalLength() = 364,42 unités, trait de 3, bouts ronds) et quatre circle avec cx/cy mais sans r. Course : 1 500 − 300 = 1 200 px. Le tracé et les cercles prennent animation-timeline: --pathScroll, écrit en propriétés longues (animation-duration: auto, linear, fill-mode: both) parce que le CSS a été relevé depuis les styles calculés. Sous le cadre, l'indice .slr-scroll-hint « Scrollez pour dessiner » (absolu, 8 px du bas, 11,2 px, blanc à 40 %) rebondit de 4 px toutes les 2 s. HTML 1,2 Ko, CSS 2,4 Ko, champ JS vide, aucune variable du site, aucune erreur console.
La ligne : stroke-dasharray: 600, stroke-dashoffset: 600, et @keyframes drawPath ramène l'offset à 0, linéairement sur toute la course — 0,5 unité par pixel défilé. Mesuré par crans de 150 px : 525, 450, 375, 300, 225, 150, 75, 0. La longueur visible vaut 600 − offset ; le tracé ne faisant que 364,42 unités, il est complet à l'offset 235,6, soit 60,7 % de la course (728 px) — les 39 % restants ne changent plus la ligne. Le dégradé est posé sur la boîte englobante (diagonale 0,0 → 100 %,100 %), pas le long du stylo : mesuré en fin de course, départ et arrivée sont magenta rgb(217, 70, 239), le sommet violet rgb(178, 81, 240), le creux rose rgb(226, 97, 169) — ni le bleu ni l'ambre des arrêts n'apparaissent sur la ligne.
Les jalons : @keyframes dotAppear fait passer r de 0 à 5px et fill de #6366f1 à #d946ef, et chaque .pathdraw-dot:nth-of-type(n) reçoit sa plage animation-range — 15 % de course, 180 px par jalon. Mesuré à mi-plage (7,5 / 32,5 / 57,5 / 82,5 %) : r 2,5 px, fill rgb(158, 86, 240). Rapporté au stylo : le jalon 1 est au départ, le stylo passe à l'abscisse du jalon 2 à 23,2 % (allumé de 25 à 40 %), à celle du jalon 3 à 38,3 % (50-65 %) et arrive au bout à 60,7 % quand le jalon 4 n'apparaît qu'entre 75 et 90 % — la ligne devance les jalons, de plus en plus, et les 10 % de course après le dernier ne changent rien. Les jalons 2 et 3 ne sont pas sur la courbe : 14 et 17 unités au-dessus (points les plus proches (92,5 ; 73,9) et (165 ; 126,2)). Deux copies sur une page : timelines indépendantes (mesuré 600 et 300 px d'offset) ; le doublon id="pathGradient" est sans effet tant que les deux dégradés sont identiques.
Accessibilité
- prefers-reduced-motion absent du code : mesuré sous la préférence, le rebond de l'indice tourne (
hintBounce running) et le tracé suit le défilement comme avant. Rien n'est caché : le dessin ne bouge que sous le geste du lecteur (WCAG 2.3.3, animation déclenchée par l'interaction). Ajoutez@media (prefers-reduced-motion: reduce) { .slr-scroll-hint { animation: none } }; pour livrer le tracé fini sans défiler, reprenez sous cette media query les cinq règles du bloc@supports not. - Clavier : mesuré dans Chromium, Tab donne le focus au conteneur sans
tabindex(anneauoutline: auto 1px), flèche bas avance de 40 px (3,3 % de course, 20 unités de tiret), PageDown de 302 px, Fin va au bout — le tracé suit chaque touche. Safari et Firefox ne focalisent pas un bloc défilant sanstabindex="0": ajoutez-le avecrole="region", unaria-labelet un:focus-visible. Au doigt, défilement imbriqué natif : le geste doit commencer dans le bloc, etoverscroll-behavior: containévite d'entraîner la page en bout de course. - Contraste : l'indice de 11,2 px en blanc à 40 % vaut 3,77:1 sur
#0a0a0f(seuil 4,5:1), en français en dur, absolu par rapport au cadre — posezaria-hidden="true"dessus ou remplacez-le par une consigne lisible. Tracé et jalons sont des composants graphiques (seuil 3:1) :#6366f14,42:1,#d946ef5,71:1,#f59e0b9,2:1 sur le fond du cadre ; sans ce fond, sur blanc : 4,47 / 3,46 / 2,15:1, l'ambre passe sous le seuil. Un jalon de 5 unités fait 6,9 px de rayon à 360 px de large. - Lecteurs d'écran : le SVG n'a ni
roleni<title>, rien n'est annoncé. Décoratif :aria-hidden="true". Porteur d'information :role="img"etaria-label, et surtout les étapes en texte dans le DOM, à côté — les cercles ne contiennent aucun texte et n'existent visuellement qu'après défilement. Là où la timeline manque, le repli@supportsaffiche le tracé fini et les quatre jalons sans défiler. Aucun JavaScript : rien à désactiver.
Compatibilité navigateur
CSS seul, 2,4 Ko : scroll-timeline nommée sur le conteneur, animation-timeline, animation-range par jalon, propriété CSS r animée, stroke-dasharray/stroke-dashoffset, position: sticky, overflow: hidden auto. Les trois premières fixent le seuil : Chrome et Edge 115+, Safari et iOS 26 (mesuré dans WebKit 26.5 : rendu identique à Chromium, offset 525 px et r 4,17 px après 150 px). Firefox : aucune version n'exécute animation-timeline (mesuré dans Firefox 153 : CSS.supports('animation-timeline: scroll()') = false). Zéro dépendance, zéro JavaScript.
Le bloc @supports not (animation-timeline: scroll()) prend la main partout où la timeline manque (Firefox, Safari et iOS avant 26, Chrome avant 115) : animation: none sur le tracé et les jalons, stroke-dashoffset: 0, r: 5px et fill: #d946ef sur les quatre cercles, height: auto sur le plateau, display: none sur l'indice. Mesuré dans Firefox 153 : ligne complète, quatre jalons de 13,9 px, scrollHeight 300 = clientHeight (rien à faire défiler), indice masqué — le visiteur voit le dessin fini, à plat, sans une consigne « Scrollez pour dessiner » qui ne dessinerait rien. Sans ce bloc, Firefox arrivait au même offset 0 par une animation de 0 s, mais avec 1 200 px de course morte et l'indice qui rebondit. L'unité de r: 5px n'est pas décorative : CSS.supports('r: 5') vaut false dans WebKit et Firefox — seul Chrome accepte la valeur nue — et sans elle les jalons restent à r: 0, invisibles (mesuré dans WebKit 26.5 : ligne tracée, aucun jalon).
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec Premium) :
<div class="demo-preview">
<div class="pathdraw-container">
<div class="pathdraw-spacer">
<div class="pathdraw-sticky">
<svg class="pathdraw-svg" viewBox="0 0 260 200">
<defs>
<linearGradient id="pathGradient">…</linearGradient>
</defs>
<path class="pathdraw-path" d="…"></path>
<circle class="pathdraw-dot" cx="…" cy="…"></circle>
<circle class="pathdraw-dot" cx="…" cy="…"></circle>
<circle class="pathdraw-dot" cx="…" cy="…"></circle>
<circle class="pathdraw-dot" cx="…" cy="…"></circle>
</svg>
</div>
</div>
</div>
<span class="slr-scroll-hint">…</span>
</div>Le code complet HTML + CSS + JS de Path Drawing on Scroll, prêt à coller — et les 811 effets. Ou 299 € une fois, accès à vie.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Tracé (HTML — attribut d de .pathdraw-path) |
M 20 180 Q 60 20, 130 100 T 240 30 (364 unités) | N'importe quel chemin SVG. Au-delà de 600 unités, la ligne ne finit jamais : montez stroke-dasharray, stroke-dashoffset et le 600 de drawPath, ou posez pathLength="600" sur le tracé (mesuré dans Chromium, WebKit et Firefox : le tiret est alors compté sur 600 quelle que soit la longueur réelle). |
Longueur de tiret (CSS — stroke-dasharray: 600, stroke-dashoffset: 600, @keyframes drawPath) |
600 → ligne complète à 60,7 % de la course | La ligne finit quand 600 − offset atteint la longueur du tracé. Avec 365 aux trois endroits (ou pathLength="600"), le stylo arrive au bout à 100 % et passe les abscisses des jalons 2 et 3 à 38 et 63 % au lieu de 23 et 38. |
Course (HTML — height:300px en ligne sur le conteneur ; CSS — .pathdraw-spacer { height: 500% }) |
1 200 px (0,5 unité par pixel) | Course = plateau − conteneur. 300% donne 600 px, deux fois plus vif. Le plateau est aussi le bloc conteneur du collant : avec 277 px de SVG et top: 10px, le dessin reste fixé jusqu'à 1 203 px, donc sur toute la course livrée. |
Plages des jalons (CSS — .pathdraw-dot:nth-of-type(n) { animation-range }) |
0% 15% · 25% 40% · 50% 65% · 75% 90% | Chaque plage vaut 180 px de course ; 10 % restent inertes après le dernier jalon. Resserrez (75% 80%) pour un allumage sec, ou 60% 75% sur le quatrième pour qu'il coïncide avec l'arrivée du stylo à 60,7 %. |
Jalons (HTML — cx/cy ; CSS — @keyframes dotAppear) |
r 0 → 5px, fill #6366f1 → #d946ef | 5 unités = 6,9 px de rayon à 360 px. Gardez l'unité sur r : la valeur nue n'est acceptée que par Chrome. Les jalons 2 et 3 livrés sont 14 et 17 unités au-dessus de la courbe ; path.getPointAtLength(l) dans la console donne le point exact à poser en cx/cy. |
Dégradé (SVG — #pathGradient, trois arrêts) |
#6366f1 → #d946ef → #f59e0b, diagonale de la boîte englobante | Le dégradé suit la boîte, pas le stylo : sur la courbe livrée on ne voit que violet → rose. Pour un dégradé le long du trajet, gradientUnits="userSpaceOnUse" x1="20" x2="240" ; pour une couleur unie, stroke: #d946ef. L'id est global : deux instances aux couleurs différentes exigent deux ids. |
Taille et point de fixation (CSS — .pathdraw-sticky { width: 90%; max-width: 360px; top: 10px }, stroke-width: 3) |
360 × 277 px au plus, fixé à 10 px du haut | Le max-width borne le dessin à la fenêtre de 300 px : sans lui, à 1 280 px de large, le SVG fait 875 px de haut et seul un tiers du tracé est visible. Pour un conteneur plus haut, montez les deux ensemble (hauteur du SVG = largeur × 200 ÷ 260, à garder sous conteneur − 20). Le trait de 3 unités mesure 4,2 px à 360 px. |
FAQ
600 − offset, donc la ligne est finie dès l'offset 235,6 — 60,7 % de la course, 728 px — et plus rien ne change sur elle pendant les 472 px suivants, le temps que les jalons 3 et 4 s'allument. Deux façons de resynchroniser, mesurées : écrire 365 dans stroke-dasharray, stroke-dashoffset et le 0% de drawPath, ou poser pathLength="600" sur le path — l'attribut normalise la longueur du tracé à 600 pour le calcul du tiret (à l'offset 300, le stylo est à mi-chemin dans Chromium, WebKit et Firefox). Le stylo arrive alors au bout à 100 % et passe les jalons 2 et 3 à 38 et 63 %, juste avant leur allumage complet à 40 et 65 %. Les trois scènes de cette page utilisent pathLength.scroll sous requestAnimationFrame écrit la progression dans une variable --p, et cinq anneaux calculent leur stroke-dasharray en calc() depuis cette variable, tournent leur teinte en oklch et affichent un pourcentage — tout avance ensemble, proportionnellement, et cela fonctionne dans Firefox puisqu'aucune scroll-timeline n'intervient. fx-0572 n'a pas une ligne de script : la timeline nommée est déclarée sur le conteneur et, surtout, chaque jalon reçoit sa propre plage animation-range — des événements ponctuels (0-15, 25-40, 50-65, 75-90 %) posés sur une ligne continue, ce qu'un seul --p ne donne pas sans une condition par anneau. Le prix : Firefox n'exécute aucune version de la timeline (repli à plat, dessin fini) et la page ne dispose d'aucun nombre à lire — pas de compteur, pas de bouton à débloquer. fx-0781 pour une progression globale et chiffrée qui doit tourner partout ; fx-0572 pour des étapes datées sur un trajet.circle de plus avec ses cx/cy (sans r, le CSS le porte) et une règle .pathdraw-dot:nth-of-type(5) { animation-range: … } ; les plages sont libres, il suffit qu'elles se suivent — cinq créneaux de 12 % séparés de 10 % : 0% 12%, 22% 34%, 44% 56%, 66% 78%, 88% 100%. Le compteur nth-of-type ne compte que les circle : le path ne décale rien. Pour les positions, les cx/cy sont des attributs posés à la main — les jalons 2 et 3 livrés flottent 14 et 17 unités au-dessus de la courbe. Dans la console, const p = document.querySelector('.pathdraw-path'); p.getPointAtLength(p.getTotalLength() * 0.38) renvoie le point à 38 % du tracé (celui que le stylo atteint à 38 % avec pathLength="600") : recopiez x et y. Si le nouveau tracé dépasse 600 unités, montez le tiret ou posez pathLength, sinon la ligne s'arrête avant le dernier jalon.
