Wave Path
Une ligne ondulée en dégradé qui se balance doucement pendant que des tirets la parcourent — étirable en pleine largeur comme en simple soulignement, sans perdre l'épaisseur du trait.
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 dessin est un SVG de 220 × 80 unités qui contient deux fois la même vague (quatre arches, de x = 10 à x = 210) : .wavp-bg, un trait plein pâle (indigo à 20 %), et .wavp-line au-dessus, en tirets de 20 sur 10 colorés par un dégradé horizontal indigo #6366f1 → violet #8b5cf6 → magenta #d946ef.
Deux mouvements se superposent. Les tirets défilent le long de la courbe grâce à @keyframes wavpDash (le décalage des tirets passe de 0 à −30 en 1 s, en boucle). Et la vague elle-même se balance : un <animate attributeName="d"> en SMIL inverse la première arche (point de contrôle de y = 10 à y = 70), les arches suivantes suivent par symétrie, aller-retour en 2 s avec un départ et une arrivée en douceur. Le même balancement est appliqué au trait pâle, pour que tirets et fond restent superposés.
Le SVG s'étire à n'importe quelle boîte (preserveAspectRatio="none") et le trait garde ses 4 px grâce à vector-effect: non-scaling-stroke : la même vague sert de grande houle pleine largeur ou de soulignement de 16 px de haut. Le petit script donne à chaque copie son propre dégradé (wavp-grad-1, -2…), pour qu'une copie masquée n'emporte pas le dégradé des autres, et gère le mouvement réduit.
Accessibilité
- Décoratif : le SVG porte
aria-hidden="true"etfocusable="false". Utilisé comme indicateur (« Enregistrement »), doublez-le d'un texte visible, comme dans le deuxième exemple. - Mouvement réduit : avec
prefers-reduced-motion: reduce, le CSS arrête le défilement des tirets et le script met le balancement SMIL en pause sur sa position de départ : il reste une vague en tirets dégradés, immobile. Le réglage est suivi en direct. - Survol et clavier : l'effet ne réagit à rien par lui-même. En soulignement de lien, affichez-le sur
:hoveret:focus-visibledu lien, pour que la navigation au clavier donne le même repère. - Rythme doux : balancement de 2 s, défilement régulier, aucun clignotement.
Compatibilité navigateur
SMIL <animate> sur l'attribut d, animation CSS de stroke-dashoffset, vector-effect: non-scaling-stroke, stop-color en CSS, pauseAnimations(), prefers-reduced-motion. Mesuré dans Chromium, Firefox et WebKit (Playwright) : 0 erreur, deux copies avec deux dégradés distincts, 2e copie toujours colorée quand la 1re est masquée, vague qui se balance dans les trois moteurs, images figées en mouvement réduit.
Sans SMIL, la vague reste immobile et seuls les tirets défilent. Sans JavaScript, une seule copie par page s'affiche correctement ; avec plusieurs copies, elles partagent le dégradé de la première.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0608-root">
<div class="wavp-stage">
<svg class="wavp-svg" viewBox="0 0 220 80" preserveAspectRatio="none" aria-hidden="true" focusable="false">
<defs>
<linearGradient id="wavp-grad" gradientUnits="userSpaceOnUse" x1="10" y1="0" x2="210" y2="0">
<stop class="wavp-c1" offset="0"/>
<stop class="wavp-c2" offset=".5"/>
<stop class="wavp-c3" offset="1"/>
</linearGradient>
</defs>
<path class="wavp-bg" d="…"><animate attributeName="d" dur="2s" …/></path>
<path class="wavp-line" stroke="url(#wavp-grad)" d="…"><animate attributeName="d" dur="2s" …/></path>
</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 — --wavp-w / --wavp-h) |
200px / 73px | La vague s'étire à la boîte donnée, le trait reste à 4 px. 100% / 24px donne une fine ligne pleine largeur. |
Dégradé (CSS — --wavp-c1, --wavp-c2, --wavp-c3) |
#6366f1 / #8b5cf6 / #d946ef | Couleurs de gauche, du milieu et de droite des tirets. |
Trait de fond (CSS — --wavp-trace) |
rgba(99,102,241,.2) | La vague pâle visible entre les tirets ; transparent pour ne garder que les tirets. |
Défilement des tirets (CSS — --wavp-flow) |
1s | Temps pour avancer d'un tiret ; plus court = plus rapide. |
Balancement de la vague (HTML — dur des deux <animate>) |
2s | Mettez la même valeur sur les deux balises pour que le trait pâle et les tirets restent superposés. |
Fond et hauteur du bloc (CSS — --wavp-page, --wavp-root-h) |
#0a0a0f / 300px | transparent et 0px pour placer la vague sous un titre, dans un bouton ou sous un lien. |
FAQ
d, que Safari prend en charge comme Chrome et Firefox ; la propriété CSS d, elle, n'existe pas dans Safari, c'est pourquoi elle n'est pas utilisée.position:absolute; left:0; right:0; bottom:0), avec --wavp-w:100%, --wavp-h:16px, --wavp-page:transparent et --wavp-root-h:0px, en opacity:0 ; passez-la à 1 sur :hover et :focus-visible. Le trait garde 4 px même aplati.
