Sine Wave Grid
An 8 × 15 grid of dots that swell and brighten in turn: a diagonal wave keeps crossing it, from the top-left corner to the bottom-right one.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. SVG has 30 effects, including 3 free. Explore the category →
3 usage examples
How it works
The HTML ships an empty .swg-grid container; for every .fx-0614-root on the page, the script fills it with data-rows rows of data-cols dots (8 × 15 = 120 by default). Each dot gets a single value, --swg-k, the sum of its row and column numbers. All dots on the same diagonal therefore share the same --swg-k.
The swgPulse animation takes a dot from half to one and a half times its size and from 30% to 100% opacity, then back, over 2 seconds with an eased start. The delay is --swg-k × 0.1 s: diagonals light up one after another and the wave moves at a slant. Because the easing curve is symmetrical, each dot follows a motion close to a sine. Delays are made negative in CSS (- 100 × duration), so the wave is already formed when it appears, without the jump of the first seconds.
The script adds no stylesheet to the page and builds the dots only once per root (flagged data-swg-ready). Animations, classes and variables all carry the swg prefix and hang off the root, so several grids live on one page without clashing. The grid keeps a fixed size (8 px dots, 8 px gaps) centred in a 300 px tall area.
Accessibility
- Hidden from screen readers: the grid carries
aria-hidden="true". Used as a waiting state, it needs text next to it ("Looking for available flights…") in anaria-live="polite"region. - Reduced motion: under
prefers-reduced-motion: reduce, the animations are paused; the grid shows a frozen wave, with its large bright dots and small pale ones, instead of 120 identical dots. - Nothing to activate: no focus, no click, no hover. The effect does not capture any event.
- Flashing: the wave moves one diagonal every tenth of a second with a soft, continuous opacity change, far from the sudden flashes accessibility rules guard against.
Browser compatibility
Pure CSS for the motion, JavaScript only to create the dots. The gap property in a flex box (Chrome 84, Firefox 63, Safari 14.1, MDN data) sets the minimum versions. Measured in Chromium 151, Firefox 153 and WebKit 26.5: 120 dots per copy, two independent copies, no stylesheet added to the page, frozen wave under reduced motion.
Without JavaScript the area stays empty. A browser without flexbox gap packs the dots edge to edge: the wave still shows, only denser.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0614-root" data-rows="8" data-cols="15">
<div class="swg-grid" aria-hidden="true"></div>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
data-rows / data-cols (root) |
8 / 15 | Grid size (1 to 60 each). The grid does not adapt to the width: use fewer columns or smaller dots on a narrow screen, anything wider is clipped. |
--swg-color |
#6366f1 | Dot colour. |
--swg-dot |
8px | Resting dot diameter; it ranges from half to 1.5 times this value. |
--swg-gap |
8px | Space between two dots, across and down. |
--swg-speed |
2s | Length of one dot's pulse. |
--swg-step |
0.1s | Delay of one diagonal behind the previous one. Larger stretches the wave; 0 pulses the whole grid together. |
--swg-height / --swg-bg |
300px / #0a0a0f | Height and background of the area; the grid sits in its centre. |
FAQ
r + c with r + (cols - 1 - c) to start from the top-right corner, or with c alone for a vertical wave sweeping left to right.hidden, display: none): the animations stop with it. To freeze it while keeping it visible, add animation-play-state: paused on .swg-dot.
