SVG Wave Generator — make web wave dividers online (free)

That 'wavy dividing line' you see on landing pages — where a color block's bottom edge isn't straight but ripples smoothly — is really just an SVG path. It connects a row of control points with cubic Bézier curves into a smooth line, then a fill block colors in everything below it. Hand-writing that path's d attribute is nearly impossible to tune by eye, which is why people reach for tools like Haikei or Get Waves, or rip the shape out of a design file. Design Cat computes the path from amplitude and count right in your browser, so it's what-you-see-is-what-you-get, and the copy is a clean inline SVG.

Tuning a good wave comes down to balancing amplitude and count. Amplitude is the height from crest to trough: too little and it reads as a straight line with no presence; too much and it eats your layout and feels noisy. Count is how many full ripples fit across: 1–2 waves feel open and spacious — good for a big divider under a hero — while 3–4 feel livelier and suit cards or accent strips. A handy trick is to stack the same wave in two or three layers, each with a little transparency and a slight offset, to fake a sense of depth — the signature 'layered ocean' look on many SaaS pages.

When you ship, SVG beats PNG here: it scales losslessly and stays crisp at any pixel density, often weighs just a few hundred bytes, and you can recolor it with CSS fill or even animate it. Inline the generated SVG into your HTML and absolutely position it to the top or bottom of a section (keep preserveAspectRatio="none" so it stretches to full width). If your workflow needs a bitmap — pasting into slides or some CMS — use Download PNG for a transparent-background raster. It all runs locally in Design Cat: no upload, no account, no limits.