Как сделать реально адаптивную волну между блоками (svg, clip-path)?

Question

[HelpSophie]

Есть 2 блока, граница между ними в форме волны.
https://jsfiddle.net/031xL8re/
Если задать для clipPath clipPathUnits="objectBoundingBox" и пересчитать все размеры в vw, то вроде всё и не плохо.

Но если вспомнить про переполнение и добавить, например, в 2 раза больше текста в первый блок, то всё рассыпается и появляется белое поле между блоками.
Как переделать, чтобы переполнение не ломало затею?

Comments

[Максим]

а если текст поместить в svg ? типа foreignObject или же через text ?

[HelpSophie]

Много Чего, текст это всё таки контент сайта, заголовки, стронги...

p.s. вы круто переименовались, мне нравится

Answer 1

[RAX7]

Лучше фоновое изображение засунуть в svg и сделать маску.
Либо так:
(с пропорциональным увеличением)

либо:
(с фиксированной высотой)

Также с помощью медиа-запросов можно совместить оба эти варианта

Comments

[HelpSophie]

Так не хотелось картинку засовывать внуть svg.
Спасибо!

Немножко подожду, вдруг кто-нибудь еще полезных мыслей принесет и отмечу.