SVG Waves Generator

By Bogdan Sandu · Published 13 October 2025 · Last updated 14 September 2026

This SVG Waves Generator builds layered wave backgrounds for hero sections, section dividers, and cards, and hands you the SVG code. Every layer is a separate path you control with sliders. No design software, and nothing leaves your browser.

What you can set:

• Canvas: width from 400px to 2000px, height from 200px to 800px, and a background color
• Per layer: wave type (sine, triangle, sawtooth, or square), amplitude 10 to 100, wavelength 50 to 500, phase 0 to 360, opacity, and color
• Sine layers only: frequency 0.5 to 3 and variation 0 to 0.8, which bend the curve away from a clean sine
• Gradient: an optional linear or radial fill per layer, from the layer color to a second color
• Presets: Hero Section, Mint Fresh, Sunset Glow, Deep Ocean, Lavender Dreams, and Coral Reef, plus a Randomize button

Add as many layers as you like and remove any of them. The preview redraws on every change.

How to Use This SVG Waves Generator

1. Start from a preset, or click Randomize until something is close to what you want.
2. Set the canvas width and height to match the section the wave will sit in. The output uses a viewBox, so these numbers set the proportions, not the final pixel size.
3. Tune each layer. Lower opacity on the back layers and keep the front layer close to opaque for depth.
4. Pick an export: Copy SVG Code or Download SVG for the vector, or open Export for PNG, React, and CSS.

The SVG starts like this with the Hero Section preset:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 400" preserveAspectRatio="none">
  <defs>
    <linearGradient id="wg-gradient-0" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="1200" height="400" fill="#0f172a" />
  <path d="M 0,400 L 0,200 L 10,213.16 L 20,224.98 …" fill="url(#wg-gradient-0)" opacity="0.15" />
  …
</svg>

Three things in that markup matter once it is on a page:

• preserveAspectRatio="none" lets the wave stretch to any container width and height. Remove it if you want the proportions locked.
• The <rect> is the canvas background. Delete it for a transparent wave that sits over your own section color.
• Each path is a series of straight L segments sampled every 10px, not a Bézier curve. At normal sizes it looks smooth, but at very large widths on a short canvas you may see the facets.

To use the wave as a section divider, drop the SVG at the bottom of the section and give it a fluid width:

.hero svg {
  display: block;
  width: 100%;
  height: 160px;
}

Export options

• PNG at 800×600, 1920×1080, 3840×2160, or a custom size. This rasterizes the wave, so use it for email, social images, or tools that reject inline SVG.
• React copies a small component that injects the SVG string with dangerouslySetInnerHTML. It is a wrapper, not a parametric component, so edit the SVG here rather than through props.
• CSS copies a .wg-waves-background rule with the SVG as a base64 data URI, using background-size: cover.

What the tool does not do

• It does not animate. The output is a static SVG. See the animation section below for the CSS and SMIL options.
• It writes gradients and colors as inline style and fill attributes. Some CMS editors strip inline styles on paste, in which case move the fills to a stylesheet.
• A three-layer wave is around 10 KB of path data because of the 10px sampling. Run the file through SVGO if the size matters.

What Is an SVG Wave Generator

An SVG wave generator is a browser-based tool that turns height, frequency, and layer inputs into a ready-made wave shape.

It outputs that shape as SVG path code, the same vector format used for icons and logos across the web.

No bezier drawing required. You move a few sliders, click a button, and the tool writes the curve for you.

What it is not:

• Not a full illustration app for complex organic shapes
• Not a CSS-only trick built from border-radius or a pseudo-element
• Not a static library of pre-made wave images

Get Waves, one of the earliest and still most-copied tools in this category, keeps the whole workflow to three moves. Pick a shape style, drag two or three sliders, click the dice icon for a random variation.

Most generators keep this behind a simple visual interface, so nobody needs a code editor or a vector app just to get a usable curve.

How an SVG Wave Generator Builds the Wave Shape

Every wave a generator produces comes down to one thing: a string of coordinates inside a path element's d attribute.

Sliders for amplitude and frequency don't touch the curve directly. Most tools shift the control points of a series of cubic Bézier segments and let the browser draw a smooth line between them. This generator samples the wave function every 10px and joins the points with straight segments instead.

Key figures:

• SVG image use grew 16% year over year in 2022, per the HTTP Archive Web Almanac
• Most generators default to a 1440 by 320 pixel canvas, matching common desktop breakpoint widths. This one starts at 1200 by 400
• Curve smoothness on most tools is set with a single cubic Bézier control per segment, not a full node editor

A viewBox attribute defines the coordinate space the wave sits inside, independent of however large or small the element renders on the page.

That's what makes a generated wave scale cleanly instead of pixelating like a raster export.

The "shuffle" or "randomize" button most tools ship with runs on a small JavaScript routine that picks new values for every slider at once. Some tools seed it so the same seed reproduces the same curve. This one does not, so copy the code when you land on a shape you like.

SVG Wave Generator vs Coding a Wave by Hand

A generator wins on speed. Hand-coding wins on precision.

That's the trade most teams are actually weighing, not "which is better" in the abstract.

Generator, pros:

• Usable curve in under a minute
• No bezier math required
• Works for non-technical team members

Generator, cons:

• Curves rarely match an exact brand shape on the first try
• Limited control over individual point placement
• Style options stop where the tool's presets stop

Hand-coding, pros:

• Full point-by-point control over the curve
• Can match a specific mockup or brand curvature exactly
• No dependency on a third-party tool staying online

Hand-coding, cons:

• Slow if you're not already comfortable with Bézier curves
• Easy to introduce a broken path or an unclosed shape
• Usually means opening a vector editor just for one shape

Teams with a strict design system, where the wave has to sit flush against a specific logo curvature, tend to hand-tune the path once and reuse it everywhere. Everyone else reaches for a generator first. They open an editor only if the output needs edits afterward.

A generated wave still runs through normal CSS for fill color and positioning once it's on the page. The "hand-coding" step is often just touch-ups, not a full rebuild.

Best SVG Wave Generators Compared

Four tools cover most of what people search for when they want a wave without writing path data by hand.

Tool	Layering	Export Formats	Price
Get Waves	Multiple stacked layers with color control	SVG or PNG	Free, open source
Haikei	Layered and stacked wave modes	SVG or PNG	Free tier, paid pro tier
SVGwave	Multiple stacked waves	SVG or PNG	Free
Shape Divider	Single shape per export	SVG with matching CSS	Free
This generator	Unlimited layers, four wave shapes, gradients	SVG, PNG, React, CSS	Free

Skip the file-naming and manual file creation altogether: every tool in this table generates a working file for you and lets you copy the code straight into a project.

Haikei bundles waves with a dozen other generators, layered-wave mode included, and keeps the more advanced shape sets behind a paid tier.

SVGwave is worth a mention for a different reason. It was built by a then-12-year-old developer, Bereket Semagn, and still holds up as one of the more flexible free options for stacking multiple wave colors.

Shape Divider trades flexibility for simplicity. One shape, one export, paired CSS included, which is often exactly enough for a section divider that doesn't need layering.

Choosing between a raw SVG or PNG export matters here too. PNG fallbacks exist mainly for older email clients or design tools that choke on inline vector code.

Layering, Color, and Gradient Controls in an SVG Wave Generator

Depth in a wave graphic comes from stacking, not from the curve itself.

A single flat wave looks like a shape. Three or four semi-transparent layers, each slightly offset, start to look like water.

Stacking Multiple Wave Layers

How layering works:

• Each layer is its own path element, stacked in the SVG's natural z-order
• Later paths in the markup render on top of earlier ones
• Opacity is usually reduced on back layers to fake distance

Most generators cap the useful range at four or five layers. Past that, the curves overlap so much the extra layers stop reading as separate shapes. This tool has no hard cap, but the same limit applies to the eye.

Applying Gradient Fills and Opacity

A flat fill color reads as flat. A gradient fill reads as light hitting water, which is why most generators default to one.

Gradient stops need at least two colors and a direction, and getting that pairing right by eye is slower than it sounds. Here each layer has one gradient color paired with its base color, running top to bottom for linear or from the center for radial.

If you're building the fill separately from the wave shape itself, a dedicated gradient tool makes it faster to land on stop colors that match the rest of the page.

Opacity on gradient layers behaves differently than opacity on flat fills: lower the opacity too far on a gradient and the color transition disappears before the shape does.

Making a Generated SVG Wave Responsive

A wave built at a fixed pixel width breaks the moment the screen gets narrower.

The fix is built into SVG already. The viewBox attribute plus a percentage-based width lets the browser rescale the curve to whatever container it's dropped into.

Mobile devices accounted for 49.4% of website traffic worldwide in August 2026, level with desktop at 49.1%, according to StatCounter Global Stats.

That split alone is reason enough to check how a wave behaves below 480 pixels wide, not just at desktop size.

Common responsiveness settings:

• preserveAspectRatio set to keep the curve's proportions intact, or set to none, as this tool does, to let the wave stretch
• A fixed height in pixels paired with a fluid, percentage-based width
• A minimum height rule so the wave doesn't flatten into a straight line on small screens

Media queries come in for the edge cases a fluid SVG can't handle on its own. The usual one is swapping in a shorter wave height once the viewport drops below a tablet breakpoint.

This is standard responsive design practice applied to one specific graphic, not a special SVG-only technique.

Animating an SVG Wave

A static wave sits still. An animated one shifts left to right in a loop, which is closer to how water moves. The generator above outputs static SVG, so animation is a step you add afterwards.

Two methods handle this, and they don't overlap much in practice.

CSS Keyframe Animation

Most implementations move the path's transform property back and forth using standard CSS keyframes, looping the animation infinitely.

The trick to a clean loop is duplicating the wave shape at double width, then animating exactly one shape-width of horizontal movement so the seam is invisible.

Get this wrong by even a few pixels and the loop visibly jumps every cycle. It's one of the more common mistakes in animating SVG with CSS, and easy to miss until you watch the loop for more than a few seconds. The CSS Keyframe Animation Generator writes the keyframes for you.

SMIL Animation

SMIL is the native SVG animation method, written directly inside the SVG's own XML markup using an animate element.

Chrome proposed dropping SMIL support back in 2015, then reversed course in 2016 after developer pushback over missing replacements.

Current status: SMIL SVG animation is Baseline widely available, meaning every major browser now supports it without a polyfill.

Most developers still reach for CSS keyframes first anyway. Better tooling familiarity, easier debugging in browser dev tools, and no separate syntax to remember.

SMIL still wins for one specific case: animating a shape's path data itself, not just its position. CSS can only do that where the d property is supported, which is still uneven across browsers.

How to Add a Generated SVG Wave to a Website

Getting a generated wave onto a page takes one of four routes, depending on the stack you're working in.

Pick based on how much control you need over the shape after it's placed, not just what's fastest to copy. The Export panel above covers the first three.

1. Copy the SVG code straight from the generator and paste it inline into your HTML markup, right where the divider needs to sit.
2. Download the file instead and reference it as a CSS background image, using background-size: cover to fill the container.
3. Install a wave component as an npm package if you're working in React or Vue, rather than managing raw path strings by hand.
4. Export directly from a Figma plugin when the wave needs to live inside a design file before it ever reaches code.

Inline versus background image: inline SVG lets you target the path with CSS or JavaScript later (for color changes, hover states, animation). A background image is simpler but locks the shape's styling at export time.

The react-wavify component on GitHub has picked up over 360 stars, a rough signal of how many teams would rather install a package than hand-wire the SVG integration themselves.

Some platforms can't render inline vector code cleanly, such as certain email clients or older CMS themes. There, converting it to a PNG first avoids a broken layout.

When an SVG Wave Generator Does Not Work Well

A generator earns its keep on speed, not on precision.

Three situations regularly push people toward hand-coding or a different tool entirely.

Brand-locked curvature:

• A logo or mascot shape needs to sit flush against the wave with pixel-exact alignment
• Design guidelines specify a curvature ratio no generator preset matches

Text placed over a decorative wave background runs into a real problem. Low-contrast text is the single most common accessibility failure WebAIM finds, present on 83.9% of the top one million home pages in its 2026 report.

WCAG's own contrast rule requires at least a 4.5:1 ratio between text and its background. A busy gradient wave can quietly fail that even when it looks fine to the designer who picked the colors.

Stacking four or five animated layers on a low-powered phone is where performance, not aesthetics, decides the outcome. Each additional animated path adds a repaint cost, and older mobile GPUs feel that faster than desktop machines do.

Complex organic illustration work, textured brush strokes, or scenes with dozens of distinct shapes sit outside what any wave-specific generator is built for. That's blob or full illustration tool territory. For a cut-out shape rather than a filled wave, the Clip Path Generator is the closer fit.

None of this makes the tool a bad choice generally. It just means the decorative wave stops being the right call once accessibility or exact brand matching enters the picture. Contrast checking becomes worth doing before shipping.

Common Problems After Exporting an SVG Wave

Most export problems trace back to one of four causes, and all four are easy to check for before the wave ships.

Problem	Cause	Fix
Wave renders at wrong scale	Missing viewBox attribute	Re-add viewBox manually or re-export
Fill color ignored in CMS	Inline style stripped on paste	Move color to an external stylesheet
Curve looks broken or jagged	Unclosed path data	Re-export or close the path manually
Animation loop visibly jumps	Duplicate shape width mismatch	Match animation distance to shape width exactly

The viewBox issue deserves its own mention. SVGO's optimizer used to strip it by default through a plugin called removeViewBox. Enough developers reported broken scaling that the maintainers opened a pull request to disable it.

Rendering differences across browsers show up too, usually in how gradients or opacity stack when several wave layers overlap.

Testing the exported wave for cross-browser compatibility catches most of these before a client or teammate does.

One more default worth knowing: preserveAspectRatio is Baseline widely available, and its default value is xMidYMid meet unless you set it otherwise. This generator sets it to none.

A wave that looks slightly off-center after export is usually this default doing exactly what it's supposed to, not a bug.

Purely decorative waves that carry no information should stay out of the accessibility tree entirely. Add aria-hidden="true" to the inline SVG. Screen reader users don't need to hear "image" announced for a shape that's just visual texture, which is the kind of gap covered in guides on making SVG files accessible.

FAQ on SVG Waves Generators

What is the difference between an SVG wave and a CSS-only wave?

A CSS-only wave shapes a pseudo-element with border-radius or clip-path directly in HTML and CSS, with no vector markup involved. An SVG wave uses real path data, a Bézier curve or a sampled polyline, giving finer control over amplitude and frequency.

What is a wave divider compared to an SVG wave generator?

A wave divider is the finished shape sitting between two page sections. An SVG wave generator is the tool that produces it. It outputs the path code and viewBox that make the shape scale correctly across screen sizes.

Is there a real difference between free and paid generators?

Free tiers usually cap layer count, shape variety, or export resolution. Paid tiers, like Haikei's pro generator set, unlock more shape categories and higher-resolution PNG exports. A single wave divider rarely needs them, and this generator is free with no caps.

Do SVG wave generators work with React or Vue components?

Yes. Several open-source components wrap the generated path data into a React or Vue component, exposing props for fill color, amplitude, and animation speed. The React export above is simpler: a component that renders the SVG string as-is.

Do SVG waves slow down page load speed?

Rarely. A single hand-drawn wave path is typically a few hundred bytes, and a three-layer wave from this tool is around 10 KB. Both are far lighter than a JPEG or PNG background image. Page weight only becomes a concern once several animated layers stack on an already heavy page.

Can an exported wave be edited later in Figma or Illustrator?

Yes. Both accept pasted SVG code or an imported file, and the path stays fully editable as vector points. Illustrator suits precise anchor-point edits, while Figma works better for quick color and layer changes.

Where Should You Test an SVG Wave Generator's Output First?

An SVG wave generator's output deserves its first check on a phone screen, not a desktop monitor. Mobile devices render the wave at the narrowest viewport width, where scaling errors surface fastest and most visibly.

Three checks matter, in order.

• ViewBox scaling at narrow widths
• Text contrast over the fill
• Animation smoothness on a phone

A broken viewBox wrecks the layout, weak contrast blocks reading, and choppy animation only dulls the impression. Scaling comes first and polish comes last.

StatCounter's Global Stats put mobile at 49.4% of worldwide website traffic in August 2026, on par with desktop. Half of the people who see a generated wave see it first on the narrow viewport where a missed check breaks the layout. The mobile pass pairs well with a full web accessibility checklist before the page ships.