Loading…
8 glyphs · static · click to copy one
Freeshapes · flat · static · light
Wave Shapes
Eight filled wave bands on a 200×100 box, from a single slow swell to tight ripples, each a different frequency and amplitude pair so they stack into layered water or hills. Flip, mirror or stretch them as section edges and hero backdrops.
The grid
Each wave is one path: a sine sampled every 5 units with its own frequency, amplitude and phase, closed along the bottom edge. Fill only; every fourth wave carries the accent.
How to use it
From sprite to icons in your project.
- 01Look at the grid
Every glyph of the pack, drawn to one grid in one style. Hover one to see its animation when the pack has one.
- 02Recolour it
The colour roles are CSS variables the sprite reads. Swatches and pickers set them live; the prompt carries your values.
- 03Pick your stack
A snippet with the sprite inline, or a typed icon component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt, or one glyph
The prompt ships the whole sprite verbatim with the mounting rules. Click a glyph to copy it as a standalone SVG.
- 05Download the sprite
One .svg file, every glyph a <symbol>. Inline it once, reference by id.
