SVG Wave Generator creates customizable SVG wave shapes for use as section dividers, background textures, and decorative elements. Adjust the wave amplitude, frequency, and layers — plus color gradients and fill opacity — and export as SVG code ready to embed in HTML, or download as an SVG file. Generate layered waves for depth effects or simple single-wave dividers.
SVG (Scalable Vector Graphics) waves are created using bezier curves — specifically cubic bezier curves defined with M (move to), C (cubic bezier to), and L (line to) path commands. A smooth wave is built by stringing together multiple S-shaped curves with control points set to create smooth transitions. The wave is fully responsive (scales without pixelation), can be animated with CSS, and adds no image HTTP requests when inline in HTML.
Common uses for SVG waves: hero section dividers (transitioning between background colors), footer decorations, loader animations (animated wave patterns), card backgrounds, and timeline connectors. For animated waves: use CSS animation or JavaScript to increment the wave path's d attribute or use a translateX animation to create a looping ocean-wave illusion with two identical waves stacked and shifted.
Section divider
Result: Single wave, amplitude 80, frequency 1.5, fill #0d1117 → separates light header from dark body
Layered ocean waves
Result: 3 layers, amplitude 40/60/80, same color, opacity 0.3/0.5/1.0 → depth effect
Animated wave CSS
Result: Add animation: translateX(-50%) on wrapper → infinite scrolling ocean wave effect
How are SVG waves created mathematically?
Smooth waves are built using SVG cubic bezier curves. The key insight: a single S-curve is created with two control points at the wave's amplitude height/depth. Multiple S-curves are strung together with the control points mirrored to ensure smoothness. The path: M 0 midY C cp1x cp1y cp2x cp2y p2x p2y S cp2x cp2y p3x p3y ... fills the width. Adjusting amplitude changes the control point Y positions; frequency changes the spacing between curve endpoints.
How do I animate an SVG wave?
Method 1 — translateX: duplicate the wave path, make the container twice as wide, and animate translateX(-50%) with a linear infinite animation. Method 2 — animateTransform: use SVG's built-in animation:
Should I use SVG or CSS gradients for wave backgrounds?
SVG: better for complex wave shapes with multiple layers and curves. SVG waves are resolution-independent. Can be easily animated. HTML-embeddable. File size depends on path complexity (typically 200-2000 bytes for a simple wave). CSS: works for simpler wave shapes using border-radius tricks or pseudo-elements. No SVG knowledge required. Limited to simple curves. For production wave dividers, SVG is the clear winner due to flexibility and performance.
How do I make an SVG wave responsive?
Set the SVG element's viewBox attribute (viewBox='0 0 1440 100') and don't set a fixed width/height — use CSS: svg { width: 100%; height: auto; display: block; }. The preserveAspectRatio='none' attribute (instead of the default meet) stretches the wave to fill any width without letterboxing. This is typically what you want for section dividers — the wave fills the full width and adjusts height proportionally.
What are the performance implications of inline SVG?
Inline SVG (embedded directly in HTML) renders via the browser's SVG engine — it's GPU-composited for simple paths. Complex paths with many control points can increase paint time. Inline SVG has no HTTP request overhead (unlike external .svg files). SVG DOM elements are accessible to CSS and JavaScript — you can animate, style, or interact with paths. Animated SVGs should use CSS transforms (composited) rather than attributing changes to path d values (triggers paint each frame).