Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
Wave shapes are a popular design element for section dividers, backgrounds, and decorative accents. This tool generates a smooth, ready-to-use SVG wave from a few simple parameters — no design software required.
How it works
Set the wave's width, height, amplitude (how tall the wave peaks are), frequency (how many wave cycles fit across the width), and a color. The tool builds a single smooth path using cubic Bézier curves and wraps it in ready-to-use SVG markup you can copy directly.
- Enter width (px).
- Enter height (px).
- Enter amplitude (px).
- Enter frequency (cycles).
- Enter color.
- Click Calculate to see your results.
Examples
A gentle section divider
A wide, low-amplitude, low-frequency wave (e.g. amplitude 20-40px, frequency 2-3) makes a subtle section-divider shape; a taller amplitude or higher frequency gives a bolder, busier pattern.
Who should use it
- Website section dividers and decorative backgrounds.
- Quick placeholder or prototype graphics.
Industry applications
- Web design and front-end development
- UI/UX prototyping
Advantages
- Instant, copy-paste-ready SVG markup — no design software needed.
- Fully deterministic and easy to regenerate with tweaked parameters.
Limitations
- Produces a single smooth wave shape — more complex multi-wave layering needs manual editing afterward.
Common mistakes to avoid
- Setting a very high frequency with a very high amplitude, which can make adjacent wave peaks visually crowd or flatten — try a lower frequency first if the shape looks off.
- Forgetting to set `width`/`height` on the surrounding container to match the SVG's own dimensions, causing unexpected scaling.
Best practices
- Preview a few frequency/amplitude combinations before settling on one — small changes can noticeably change the wave's character.
- Use the SVG's built-in `viewBox` to let it scale responsively in your page layout.
Tips
- Try setting the SVG's fill to a color and stroke to none for a solid wave "fill" shape instead of just an outlined line, by editing the copied markup directly.