SVG wave and section divider generator
Generate layered SVG section dividers (waves, peaks, steps, low-poly) and export SVG or a React component. Free to use, no account.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this generator
Generate a layered divider for the bottom of a hero or between sections: stacked waves, mountain peaks, steps, low-poly triangles, or scattered circles and blobs. Set the layer count, flip it vertically and randomise it with a seed.
Layer colours are blended from two theme tokens, so the divider follows light and dark mode. Export an SVG file or a SceneDivider React component.
How to use it
- Choose waves, peaks, steps or low-poly.
- Set the layer count and the two colours.
- Randomise with a seed until it looks right.
- Copy the SVG or the React component.
This generator is also a component of the kit: Generator Svg Scenes, installed as source in your project.
Want this inside your project?
Agentic UI Kit installs this generator and the other 1156 components as source files, with one theme for all of them. One-time license, unlimited projects.