Flags
The same surf four ways. They stack.
Use it
One script, then a canvas. Height is the size; a wider canvas gives the sea more room.
<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/swell@v0.1.0/dist/swell.min.js"></script>
<canvas class="water" width="300" height="200" data-water-body="surf"></canvas>| attribute | value | what it does |
|---|---|---|
| data-water-body | name | any name above |
| data-water-form | open · wide · tall · fountain | open water for surf (nothing breaks); a wide curtain or a tall thin drop for a waterfall; a fountain instead of a geyser |
| data-water-height | number | surf: how big the waves get (1); geyser: how high it throws, as a fraction of the height (0.7) |
| data-water-break / -sets | number | surf: how far in the waves break, 0 horizon to 1 sand (0.6); how many wave trains fit in (1) |
| data-water-drop / -top / -width / -mist | number | waterfall: the drop and where the lip sits as fractions of the height, half the curtain's width, and how much mist |
| data-water-period / -burst / -jets / -dance | number | geyser: seconds between eruptions (14) and the fraction spent erupting (0.35); fountain: how many jets (5), 1 to make them dance |
| data-water-spin / -eye / -reach / -dir | number | whirlpool: how fast it turns (1), the eye's size (0.1), the whole thing's size (1), -1 to turn the other way |
| data-water-slots / -period / -reach | number | pond: drops in the air at once (6), seconds between them (2.4), how far the rings run (0.25) |
| data-water-n / -tempo | number | how many dots at a 64px height, scaled up with size · how fast it all happens (1) |
| data-water-ink / -lite / -ground | 1 | monochrome dots that follow the page theme · half the dots · a dusk behind |
| data-water-glow | 0 | no soft glow, just the dots on a clear canvas |