How the Wave Math Works
To create a smooth curve instead of jagged lines, we use the Cubic Bezier path command ($C$).
The path logic follows these steps:
Move To ($M$): We start at one corner of the SVG (e.g., $0, 320$).
Line To ($L$): We move to the first random vertical height point.
Cubic Bezier ($C$): For every segment, we calculate a "Control Point" ($cpX$) that sits exactly in the middle of two horizontal points. By keeping the control point's $y$ value aligned with the start and end points, we ensure the curve transitions smoothly without sharp corners.
Close Path ($Z$): We draw lines back to the corners to create a solid shape that can be filled with color.
Key Features
Adaptive Complexity: Increasing the "Steps" adds more random anchor points, creating a more "jittery" or detailed wave.
Flipping: This allows you to generate waves for both the top (header) and bottom (footer) of a webpage.
Real-time SVG Output: The code box updates instantly, providing a clean
<svg>string you can paste directly into your HTML or Figma.