Sine Wave Grid
Grille de 8 × 15 points qui gonflent et s'éclairent tour à tour : une onde diagonale la traverse sans fin, du coin haut gauche au coin bas droit.
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 HTML livre un conteneur .swg-grid vide ; le script le remplit pour chaque .fx-0614-root de la page avec data-rows rangées de data-cols points (8 × 15 = 120 par défaut). Chaque point reçoit une seule valeur, --swg-k, la somme de son numéro de rangée et de son numéro de colonne. Tous les points d'une même diagonale ont donc le même --swg-k.
L'animation swgPulse fait passer un point de la moitié à une fois et demie sa taille et de 30 % à 100 % d'opacité, puis l'inverse, en 2 secondes, avec un départ adouci. Le retard vaut --swg-k × 0,1 s : les diagonales s'allument l'une après l'autre et l'onde avance en biais. Comme la courbe d'animation est symétrique, chaque point suit un mouvement proche d'une sinusoïde. Les délais sont rendus négatifs en CSS (- 100 × durée) : l'onde est déjà formée à l'affichage, sans le saut des premières secondes.
Le script n'ajoute aucune feuille de style à la page et ne crée les points qu'une fois par racine (marquée data-swg-ready). Les animations, classes et variables portent toutes le préfixe swg et sont rattachées à la racine : plusieurs grilles cohabitent dans une page sans se gêner. La grille garde une taille fixe (points de 8 px, écart de 8 px) au centre d'une zone de 300 px de haut.
Accessibilité
- Masquée aux lecteurs d'écran : la grille porte
aria-hidden="true". Utilisée comme attente, elle doit être accompagnée d'un texte (« Recherche des vols disponibles… ») dans une zonearia-live="polite". - Mouvement réduit : sous
prefers-reduced-motion: reduce, les animations sont mises en pause ; la grille montre une onde figée, avec ses gros points clairs et ses petits points pâles, au lieu de 120 points identiques. - Rien à activer : pas de focus, pas de clic, pas de survol. L'effet n'intercepte aucun événement.
- Clignotement : l'onde avance au rythme d'une diagonale tous les dixièmes de seconde, avec une variation d'opacité douce et continue, loin des flashs brusques visés par les règles d'accessibilité.
Compatibilité navigateur
CSS seul pour le mouvement, JavaScript seulement pour créer les points. La propriété gap dans une boîte flex (Chrome 84, Firefox 63, Safari 14.1, données MDN) fixe les versions minimales. Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 120 points par copie, deux copies indépendantes, aucune feuille de style ajoutée à la page, onde figée en mouvement réduit.
Sans JavaScript, la zone reste vide. Un navigateur sans gap pour flexbox colle les points les uns aux autres : l'onde se voit toujours, en plus dense.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0614-root" data-rows="8" data-cols="15">
<div class="swg-grid" aria-hidden="true"></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 |
|---|---|---|
data-rows / data-cols (racine) |
8 / 15 | Taille de la grille (1 à 60 chacun). La grille ne s'adapte pas à la largeur : réduisez les colonnes ou les points pour un écran étroit, ce qui dépasse est coupé. |
--swg-color |
#6366f1 | Couleur des points. |
--swg-dot |
8px | Diamètre d'un point au repos ; il varie de la moitié à 1,5 fois cette valeur. |
--swg-gap |
8px | Écart entre deux points, en ligne comme en colonne. |
--swg-speed |
2s | Durée d'une pulsation d'un point. |
--swg-step |
0.1s | Retard d'une diagonale sur la précédente. Plus grand, l'onde s'étire ; 0 fait pulser toute la grille ensemble. |
--swg-height / --swg-bg |
300px / #0a0a0f | Hauteur et fond de la zone ; la grille y est centrée. |
FAQ
r + c par r + (cols - 1 - c) pour partir du coin haut droit, ou par c seul pour une onde verticale qui balaie de gauche à droite.hidden, display: none) : les animations s'arrêtent avec elle. Pour la figer sans la cacher, ajoutez animation-play-state: paused sur .swg-dot.
