How to make a really responsive wave between blocks (svg, clip-path)?

Question

css

There are 2 blocks, the border between them is in the form of a wave.
https://jsfiddle.net/031xL8re/
If you set clipPathUnits="objectBoundingBox" for clipPath and recalculate all sizes in vw, then everything seems to be not bad.

But if you remember about the overflow and add, for example, 2 times more text to the first block, then everything falls apart and a white field appears between the blocks.
How to remake so that the overflow does not break the idea?

Answer 1

It is better to put the background image in svg and make a mask.
Or like this:
(with proportional increase)

either:
(with fixed height)

Also, using media queries, you can combine both of these options.