SVG Wave Generator — Smooth Section Dividers, Reproducible by Seed

Real-world use cases

• Soft divider between a coloured hero and the section below

  The most common use: a coloured hero band that melts into the white content section under it. Workflow: set waves to 2 or 3, amplitude to about 0.4, irregularity low (around 0.2) for a calm corporate curve, keep Flip off, and match the fill colour to your hero background. Copy the SVG, then position it absolutely at the bottom of the hero with `bottom: 0; width: 100%` and a small negative margin so it overlaps the seam. Because the seed is in the markup, you can regenerate the exact same divider later if the brand colour changes.

• Curved top edge sitting under a hero headline

  For a coloured band that the hero text sits on top of, you want the wave arcing up into the section above. Generate the wave, turn Flip on, and the same shape mirrors vertically. Stack it at the top of the band with `top: 0`. Pair it with the non-flipped version of the SAME seed at the bottom and you get a symmetric coloured ribbon — top and bottom edges that mirror each other — from a single generated shape.

• Layered parallax waves at a page footer

  The "ocean" footer — three or four translucent wave layers in tints of one brand colour, the kind you see on SaaS pricing pages. Set layers to 3 or 4, pick a gradient fill, and the tool stacks each layer behind the last at lower opacity with a shifted seed so the crests do not line up. Export the SVG and drop it as the footer background. For a living footer, animate each layer's `transform: translateX` at a different speed in CSS to fake depth.

• Decorative wave behind feature cards

  Instead of a flat background, export a low-amplitude wave in a very light tint and place it behind a row of feature cards as an ambient shape. Set amplitude around 0.25 and irregularity around 0.4 so it reads as a gentle organic band rather than a rigid sine wave. Because each download is a standalone .svg, you can hand the file to a designer or drop it straight into Figma, Webflow or Framer as an image asset without writing any code.

• Matching wave variations for a multi-section page

  A long landing page often alternates coloured sections, and using the identical wave on every seam looks mechanical. Lock waves, amplitude and layers, then step the seed by hand (seed 2001, 2002, 2003). Each seed yields a distinct but tonally consistent divider, and the seeds are documented right in your design tokens so any teammate can regenerate the exact same set of dividers months later.

Common pitfalls

• Forgetting `preserveAspectRatio="none"` when you stretch the wave. A divider almost always spans 100% width but a fixed height, which distorts the viewBox. This tool already emits `preserveAspectRatio="none"` so the wave stretches edge to edge instead of letterboxing — keep it if you edit the markup by hand, or the wave will refuse to fill the width.

• Leaving a hairline gap at the seam. The wave path closes to the bottom (or top) edge of its own viewBox, not to your section. If you place it flush at `bottom: 0` you can get a 1px sub-pixel gap on some zoom levels. Nudge it with a small negative margin (for example `margin-bottom: -1px`) so the filled edge overlaps the section colour underneath.

• Mismatching the fill colour to the wrong section. For a bottom divider the wave's fill must match the section ABOVE it (the wave is the trailing edge of that section dipping down). It is easy to colour it like the section below by mistake, which inverts the effect. Check which section the curve belongs to before picking the fill.

Privacy