SVG Onda

Simple SVG wave: a 1-cycle sine for section dividers and headers

A simple SVG wave is a single-cycle sinusoidal curve — no stacked layers, no animation, no JavaScript loop. It is the building block behind the Stripe-style section dividers, the gentle dip under a header, the subtle audio mock placeholder, and the breathing meditation app background. Because it is one <path> element with a closed shape, it ships in under 200 bytes and renders crisp at any resolution. The typical viewBox is compact, like 0 0 100 20, then stretched to full width with preserveAspectRatio="none".

How the path is built

The minimal one-cycle wave path uses two quadratic Bézier commands and a smooth continuation:

<svg viewBox="0 0 100 20" preserveAspectRatio="none">
  <path d="M0,10 Q25,0 50,10 T100,10 L100,20 L0,20 Z"
        fill="#3b82f6"/>
</svg>

The Q command is a quadratic Bézier with one control point — perfect for a soft half-cycle. The T command is a smooth quadratic continuation that reflects the previous control automatically, producing the second half of the sine. Compared to cubic C (two control points), Q + T is simpler, shorter and matches a real sine within a couple of percent.

Math: deriving exact points from Math.sin()

If you want a mathematically exact wave, sample y = amplitude * Math.sin(2 * Math.PI * x / wavelength) at 20-40 x-values and chain them with L (line) or C commands. For most decorative work the Q+T approximation is indistinguishable to the eye and 5x smaller in markup.

SVG vs canvas vs CSS background

SVG wins for static waves: vector-crisp, tiny, accessible via DOM. Canvas wins for dynamic waves such as audio visualisers or live ocean simulations — you redraw the wave on every requestAnimationFrame. CSS background with a tileable wave SVG-data-URI wins when you need the wave to repeat indefinitely under a long page without inflating the DOM.

Use cases and quick-gen tools

• Stripe-style section dividers between hero and content.
• Audio waveform mocks for media-player placeholders.
• Breathing meditation app background that gently scales with @keyframes.
• Music streaming UI equaliser placeholders.
• getwaves.io by Z Creative Labs and shapedivider.app — sliders for amplitude, frequency, and number of layers if you later want a more complex wave.

Simple animation

For a parallax feel without redrawing the path, animate transform: translateX in a loop and duplicate the wave horizontally. The browser composites the transform on the GPU, so even on a low-end mobile the animation stays at 60 fps.

FAQ

How do I make the wave stretch full-screen? Set a compact viewBox like 0 0 100 20 and add preserveAspectRatio="none" on the <svg>. The wave will scale to fill any container width without breaking.

How do I stack multiple waves? Combine several <path> elements with different fill colours and slight phase offsets within the same SVG. Each path is <200 bytes, so even 5 layers stay tiny.

Can I apply a gradient? Yes — define a <linearGradient> inside <defs> and use fill="url(#g)". This is the standard pattern in 2026 hero backgrounds.

SVG or canvas for an audio visualiser? Canvas. SVG parsing on every frame becomes expensive once you exceed ~30 path commands per second; the canvas immediate-mode API is much cheaper for that scenario.