Will the wave stretch correctly at any screen width?
Yes, and that is deliberate. The generated svg element carries preserveAspectRatio="none", which tells the browser to stretch the path to fill the element's box rather than preserving the original 1440 by 320 proportions. For a section divider that is exactly what you want: the wave spans the full width at every breakpoint and becomes gentler or steeper. The distortion this introduces is imperceptible on a smooth curve, though it would be obvious on anything with a recognisable shape.
How do I use this as a divider between two sections?
Place the SVG at the boundary, set its width to 100%, and set the path's fill to the background colour of the section on the other side. Because the path closes down to the bottom corners, it is a solid shape, so it visually cuts the curve out of one section and into the next. Position it absolutely at the bottom of the upper section, with the lower section's colour as the fill, and give it a negative margin if you want the sections to overlap cleanly.
How do I make the layered, multi-coloured wave effect?
Generate two or three separate waves, stack them in the same absolutely positioned container, and give each a different colour or opacity with a small vertical offset. The eye reads the overlapping translucent curves as depth, and the whole effect costs a few hundred bytes of markup. Varying the amplitude slightly between the layers helps more than varying the colour.
Can I flip the wave upside down?
Yes, with CSS rather than by regenerating. Apply transform: scaleY(-1) to the svg element and the curve inverts, so a single generated path serves as both the top and the bottom divider of a section. Combining that with scaleX(-1) mirrors it horizontally, which is a cheap way to get variety out of one shape.
Is the SVG generated locally?
Yes. The path is computed by bezier maths in your browser and the markup is assembled in the page, so nothing is rendered on a server or transmitted.