What it generates
Smooth sinusoidal SVG waves that work as section dividers, hero-section bottoms, or decorative backgrounds. Drag sliders to adjust height (amplitude) and frequency (wave count). Pick a color. Flip vertically if you want the wave at the top instead of the bottom.
The output is plain SVG markup, paste into HTML, drop into Figma, or download as a .svg file.
Common use cases
- Section dividers: classic landing-page pattern. Hero on top, wave underneath, content section starts below the wave.
- Footer separators: smoother transition between body and footer.
- Card decorations: small waves inside hero cards for visual interest.
- Background patterns: tile multiple waves at different opacities for depth.
Why SVG over CSS or images
Three reasons:
- Resolution-independent: vector scales perfectly to any size, no Retina concerns.
- Tiny file size: a single wave SVG is ~200 bytes, smaller than a tiny PNG.
- CSS-controllable: SVGs can be inline-pasted and styled with CSS (color, opacity, transforms).
PNG/JPG waves are 10-100x larger and look soft on high-DPI displays. CSS-only waves with clip-path or border-radius tricks are limited in shape.
Embedding in a page
<section class="hero">
<h1>Title</h1>
<!-- ... hero content ... -->
<svg viewBox="0 0 1440 320" preserveAspectRatio="none" style="display: block; width: 100%; height: 80px;">
<path fill="white" d="M0 64..." />
</svg>
</section>The preserveAspectRatio="none" is the trick, without it, SVG scales proportionally and looks weird at narrow viewports. With it, the wave stretches to fill the container width.
Color choice tips
For section dividers, the wave color should match the next section’s background (so the wave appears to be “cutting” into that section). Hero backgrounds typically need a wave that matches the body background underneath.
For decorative backgrounds, low-opacity waves layered over each other create depth without dominating attention.
Frequently asked questions
Why doesn’t my wave fit the page width?
Set preserveAspectRatio="none" on the SVG element. The default preserveAspectRatio=“xMidYMid meet” letterboxes the SVG.
Can I animate the wave?
Yes, animate the d attribute via SMIL or CSS animations on path transforms. Common pattern: subtle horizontal translate to suggest motion.
Is this exporting a real
The download button gives you a real .svg file you can use anywhere. The “Copy SVG” button puts the markup on your clipboard for pasting into HTML.
Why use 1440×320 viewBox? Standard “hero” aspect for desktop section dividers. The actual rendered size depends on CSS, the viewBox is just the coordinate system.