Generate smooth, layered wave patterns as SVG with color, amplitude, frequency, and layer controls.
Parameter-driven SVG generator: set an amplitude, a frequency, colors, and a layer count, and it returns ready-to-paste SVG markup of smooth, filled wave shapes stacked vertically. Each layer is one closed path - the curve across the top, straight edges down and across the bottom - so the result is a solid, banner-like band, not a stroked line. The usual surprise is that amplitude is measured from each layer's own baseline, not from the canvas edges: raise it too far and the wave runs outside the viewBox and is clipped, with no warning. The output is plain, self-contained SVG, so it drops into any page and scales without losing quality.
A concrete input and expected output from the current implementation.
Input
Set amplitude to 0, keeping any frequency and layer count.
Expected output
Every layer renders as a straight horizontal band with no curve. A sine with zero amplitude is the flat zero line, so each path runs along its baseline and the frequency control has no visible effect: 2 oscillations or 10 produce the same flat band.
Amplitude multiplies the vertical offset of the curve at every point, and zero times a sine is zero everywhere, so the path data is straight. It is a useful sanity check: if changing the frequency still changes the picture at amplitude 0, the controls are not mapped the way you think.
Amplitude and frequency drive the geometry. Amplitude sets how far the curve swings above and below its baseline; frequency sets how many complete oscillations fit across the canvas width. Each layer becomes a filled path: the smooth curve across the top, then straight segments down each side and across the bottom. The curve is drawn as smooth curved segments, not a point-by-point polyline, so it stays crisp at any scale.
Layers stack vertically: each additional layer sits below the previous one, offset by roughly the layer thickness, and carries its own fill color. SVG paints later elements over earlier ones, so the output lists the backmost layer first. Giving adjacent layers slightly different frequencies or amplitudes produces the drifting, interleaved look used in hero backgrounds; identical settings produce a tidy, uniform stack.
Amplitude is measured from the layer's baseline, not from the canvas edge, and the viewBox is fixed to the canvas. Lower the amplitude, or if the generator offers a baseline or vertical-offset control, move the layers toward the center of the canvas. Regenerating at a taller canvas also fixes it. The clipping produces no error, so check the preview after any amplitude change.
The output is static SVG markup; this generator does not animate. After export, animating is on you, but it is straightforward: a slow horizontal translation of the wave group, via CSS or SMIL, is the standard way to make it drift, and plain self-contained SVG supports both. No built-in keyframing or playback controls are included.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.