Build layered SVG waves for website hero sections and dividers — adjust amplitude, frequency, layers and colors. Animate them or keep them static. Copy the SVG or CSS background instantly.
SVG waves used as section dividers are generated with <path> elements using cubic bezier curves. The wave shape is defined by control points that determine amplitude and frequency. As an inline SVG or background image, waves scale perfectly at any resolution without blurring. Layering multiple slightly offset waves at different opacities creates depth. For CSS animation, the path can be translated horizontally using @keyframes — the pattern repeats seamlessly by making the SVG viewBox wider than the screen. SVG files are typically under 1KB for a single wave, making them far lighter than image alternatives.