How to make a responsive SVG background on a block? or not?

Question

Layout

Greetings, the task is to make a "curvy background", but when scaling the page, it is cut off at the edges...

This is how it turns out

should be something like this, but full width

Is it possible to do it the way it is on the second screen, but adaptively?
The option to color the block using css and insert an svg file above and below that creates the effect of such a wave will not work, since everything is done with a gradient there and it will be unrealistic to match the gradient of the block and the gradient of the svg file...

Answer 1

If you make a mask on SVG inside which you put another SVG, then maybe something will work out