FormatterHQ
JSON Tools XML Tools YAML Tools CSV & TSV Tools HTML Tools CSS Tools JavaScript Tools SQL Tools Code Formatters & Beautifiers Minifiers Validators Data Converters Data to Class Generators Escape & Unescape Encode & Decode Base64 Tools Hash & Cryptography String & Text Utilities Number Converters Color Converters Unit Converters IP & Network Tools Random Data Generators Diff & Compare Viewers & Editors Image Tools PDF Tools Markdown Tools SEO & Webmaster Tools Developer Utilities JSON Formatter PDF Tools XML Formatter Beautifiers Converters Blog

SVG Wave Generator

Generate a wave-shaped SVG divider for section breaks. Tune complexity, amplitude, style, layers and color, and copy the SVG or a ready-to-use CSS background.

Loading tool…
Ready.

How to use the SVG Wave Generator

  1. Press Randomize until you like the shape, or type a Seed number to get a specific wave again.
  2. Adjust Complexity (points), Amplitude, Height and Style (Smooth, Peaks or Steps).
  3. Set the number of Layers, the Colour and Opacity; tick Flip (top divider) for a wave that hangs from the top, and change Preview background to match the section above.
  4. Copy or download the SVG tab, or the CSS background tab to use the wave as a background image.

An SVG wave generator for section dividers

This SVG wave generator creates the curved dividers often placed between page sections. Each wave is a single filled <path> in a 1440 × 320 viewBox, generated from random points that pass through a seeded random number generator. The same seed and settings always give the same wave, so you can note the seed and come back to it later.

Example output

The default wave (seed 7, 5 points, 50% amplitude, smooth style):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><g>
  <path fill="#0f766e" fill-opacity="1" d="M0,81.9C48,83.2 192,64.2 288,89.9C384,115.7 480,219.3 576,236.3C672,253.3 768,204 864,191.8C960,179.7 1056,171.3 1152,163.4C1248,155.6 1392,148 1440,144.9 L1440,320 L0,320 Z"/>
</g></svg>

The curve is built with Catmull-Rom interpolation converted to cubic Bézier segments (C commands), then closed along the bottom edge so the area under the wave is filled.

Options explained

  • Seed – the starting value for the random points. Randomize picks a new one.
  • Complexity (points) – 2 to 20 segments across the width. More points mean more, narrower waves.
  • Amplitude – how far points may move up or down from the baseline.
  • Height – where the baseline sits; higher values fill more of the SVG.
  • Style – Smooth curves, Peaks (straight lines between points) or Steps (horizontal and vertical lines only).
  • Layers – up to three copies of the wave, each shifted 40 units up with lower opacity (1, 0.7, 0.4), for a layered look in one color.
  • Flip – rotates the wave 180° so it hangs from the top of a section. Rotation also mirrors it left to right.
  • Preview background – only for the preview; it is not written into the SVG.

Using the wave

Place the SVG inline at the bottom of a section and give it display: block; width: 100%; height: 120px;. The preserveAspectRatio="none" attribute lets it stretch to any width and height, and display: block removes the small gap under inline SVGs. Set the section below to the same background color as the wave so they join seamlessly.

The CSS background tab wraps the SVG in a URL-encoded data URI on a .hero class with background-size: cover. That keeps the markup clean, but the color can no longer be changed with CSS. Use background-position: bottom and background-size: 100% 120px if you want the wave only along the bottom edge.

Tips

  • Use fill="currentColor" in the copied SVG to control the color from CSS.
  • Inspect or tidy the markup in the SVG viewer, or encode it with SVG to Base64.
  • For a softer look, combine the wave with a background from the CSS gradient generator.

Privacy

Waves are generated in your browser from the seed; no data is sent to a server.

Frequently asked questions

How do I remove the gap below an SVG wave?
Inline SVGs sit on the text baseline, which leaves a few pixels of space for descenders. Set display: block on the SVG, or line-height: 0 on its container, to remove it.
Can I animate an SVG wave?
Yes. A simple approach is to make the SVG wider than its container and animate transform: translateX() in a loop. You can also morph between two paths with the same number of commands using SMIL or JavaScript.
Why does my wave look stretched?
The SVG uses preserveAspectRatio="none" so it fills whatever box you give it. A very short height on a wide screen flattens the curves; increase the height or lower the complexity for gentler waves.
Is the generated SVG free to use commercially?
The wave is generated from your own settings in the browser, so you can use it in personal and commercial projects without attribution.

Last updated October 3, 2026

Related tools

SVG Blob Generator Create random organic SVG blob shapes for backgrounds and illustrations. Adjust complexity and randomness, add a gradient and download the SVG. SVG Optimizer (SVGO) Optimize and minify SVG files with SVGO in your browser: remove metadata, comments and editor cruft, round numbers and shorten paths. SVG to Base64 Convert SVG markup or an .svg file to a Base64 data URI for CSS backgrounds, img tags and JSON. SVG to CSS Data URI Encode SVG as an optimized URL-encoded data URI for CSS background-image or mask, with a Base64 version for comparison. SVG to JPG Converter Convert SVG graphics to JPG images with a chosen background colour, scale and quality — directly in your browser. SVG to JSX / React Component Turn SVG markup into a React component: camelCase attributes, className, style objects and {...props}, with optional TypeScript. CSS Animation Generator Generate CSS @keyframes animations — fade, slide, zoom, bounce, pulse, shake, spin and more — with duration, delay, easing and loop controls. CSS Background Pattern Generator Generate repeating CSS background patterns — stripes, polka dots, checkerboard, grid, zigzag and more — using only gradients, no images. CSS Border Radius Generator Set border-radius per corner in px or %, or shape organic blobs with the 8-value "fancy" border-radius syntax. Live preview and copyable CSS. CSS Box Shadow Generator Design layered CSS box-shadows with sliders for offset, blur, spread, colour and opacity. Supports inset shadows, presets and a Tailwind class. CSS Button Generator Design a CSS button with colours, gradient, padding, radius, border, shadow and hover/focus states, then copy clean HTML and CSS. CSS Clamp Generator (Fluid Typography) Calculate a CSS clamp() value that scales font size or spacing smoothly between two viewport widths, with a table of computed sizes.