Loading…
Loading sprite…
8 glyphs · static
Premiumdividers · flat · static · light
Wave Divider
Eight wave edges on a 1440×120 strip: one swell, two crests, a tall curl, three ripples, four fine ripples, and three two-layer versions with a translucent accent wave behind. Place one at the top or bottom of a section (flip it with `scale(1,-1)`) so adjacent blocks meet on water rather than a line.
The grid
Each divider is a 1440-wide strip, 120 tall, filled from a smoothed sine edge down to the bottom. Preserve aspect with `preserveAspectRatio="none"` when stretching to a section width. `fill` is the section colour below; `accent` the second layer.
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.
