SVG Code

The Geometry of Flowing Dividers

A wave section divider replaces the hard horizontal line between two page sections with a smooth, organic curve. The path is defined by control points connected through cubic Bézier curves, where each point influences the curvature of neighboring segments. Randomizing these points produces a unique wave on every generation. Layering multiple waves at different opacities and vertical offsets creates depth and richness, the visual equivalent of ocean swells overlapping near shore.

Catmull-Rom Smoothing

This tool generates wave paths using Catmull-Rom spline interpolation converted to cubic Bézier curves. Catmull-Rom splines pass exactly through every control point (interpolating, unlike B-splines which approximate). The conversion produces four Bézier control points from each group of four sequential Catmull-Rom points, resulting in a path that flows naturally through its randomized peaks and troughs without sharp corners or discontinuities.

Color Harmony

Each generation picks a random base hue on the HSL color wheel. The top section receives a deep, saturated version. Each wave layer shifts the hue slightly (analogous harmony), with back layers at lower opacity and lightness, front layers brighter and more opaque. This produces naturally harmonious compositions because all colors derive from the same region of the color wheel, a technique painters and designers have relied on for centuries.

Using the Output

Copy the SVG code and paste it directly into your HTML between two sections. Set the SVG to width:100% and a fixed height, with preserveAspectRatio="none" so it stretches to fill any viewport width. The generated SVG is self-contained with inline fill colors, requiring no external CSS. For background usage, encode the SVG as a data URI in a CSS background-image property.