TTULAKITO
Designer

SVG Wave Generator

Generate SVG waves and dividers for hero sections.

All tools

Controls

SVG

<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="#0f766e" d="M0,120 C322.7740156756593,240 255.14826299396728,80 1440,180 L1440,320 L0,320 Z"/></svg>

Frequently asked questions

Why use SVG waves instead of PNG dividers?
SVG scales to any screen width without blurring, weighs a few hundred bytes, and can be recolored with CSS or fill attributes. PNGs lose quality on retina displays and need multiple sizes.
How do I make an SVG wave responsive?
Use preserveAspectRatio="none" with a viewBox and set width: 100% on the SVG. The wave will stretch to fill the container width while keeping a fixed height.
Should I inline SVG waves or use them as background-image?
Inline SVG is faster to style and animate with CSS, but background-image works better for purely decorative dividers and keeps your markup clean. URL-encode the SVG for background usage to avoid base64 bloat.