Tide
Two SVG paths at different speeds and directions. Offsetting the speeds is what stops them reading as one shape.
Usage
Meant for
Examples
On a Card
Two wave paths sliding at different speeds in opposite directions — offsetting the speeds is what stops them reading as one shape. The SVG has to be at least the window plus one wave wide, and --wm-period exactly one wave, or the loop shows a seam.
The class is wm wm-tide — the first half is the marker the trigger and reduced-motion rules hook into, the second is the effect.