SVG Wave & Section Divider Generator

A flat horizontal line between two page sections can feel abrupt. A wave softens the join, and because it is an SVG it stays sharp at any width, costs a few hundred bytes and takes its colour from your design. This generator draws the wave for you, with a live preview, and gives you both the standalone SVG and the HTML and CSS to place it.

How the shape is made

The generator picks control points across the 1440 unit width and passes a smooth curve through them, using cubic Bézier segments. The path starts at the left edge, follows the curve to the right edge and then closes along the bottom: after the last curve it adds L1440 200 and L0 200 and Z. The filled area below the curve gets your colour; above it the page behind shows through. With the Fill above toggle on, the path closes along the top instead, which is the shape you need at the top of a section.

A worked example

Press Sample for the default: style Organic, five control points, wave height 55%, box height 200, shape number 7 and fill #4f46e5. The SVG is <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 200" preserveAspectRatio="none"> followed by one path beginning M0 46.29C48 47.21 192 34.12 288 51.82 … and ending L1440 200L0 200Z. Switch to Regular waves and the points follow a sine curve with a smooth rhythm; the path is longer because every half-period is its own curve. Use New shape to try other seeds and keep the one you like.

Stretching and sizing

preserveAspectRatio="none" tells the browser to stretch the drawing to fill whatever box it is given, ignoring the original proportions. That is what makes one SVG span a phone and a wide monitor. The exported CSS sets display: block, width: 100% and a fixed height, one quarter of the box height you chose, 50 pixels for the default 200. Change that height to make the wave shallower or taller on screen; the shape scales vertically with it. For a stronger rise, increase the wave height slider instead.

Placing it

Put the SVG at the bottom of a section and set its fill to the colour of the next section, so the wave looks like the edge of that next block. Use the flip option for a wave at the top of a section. The background version in the CSS block uses a data URI, url("data:image/svg+xml,...") bottom / 100% auto no-repeat, which avoids an extra request and needs no HTML element. Note that a background scaled by 100% auto keeps its aspect ratio instead of stretching, so the inline SVG gives more control over height.

Edge cases

A hairline can appear between the wave and its neighbour on fractional pixel positions; overlap them by one pixel to hide it. If the wave sits on a gradient section, use a matching gradient fill or place it on a solid band. Decorative dividers should be hidden from assistive technology with aria-hidden="true" on the inline SVG.

Limits

The wave has one colour and no stroke, shadow or animation. Only the bottom or top edge can be filled, not both sides. Randomness is seeded and repeatable but you cannot edit individual points here; use the Bézier editor to adjust a path by hand. Everything is generated in your browser.

Related tools

• SVG Blob Shape Generator draws organic shapes instead of dividers.
• SVG Bezier Curve Editor lets you reshape a curve by dragging points.
• SVG to CSS Converter turns a wave into a background-image rule.
• SVG Optimizer trims the file further.