CSS - jak wywołać taki efekt?

Question

Cześć, chciałbym osiągnąć taki efekt jak na stronie mozilli - https://mozilladevelopers.github.io/playground/css-grid/?utm_source=desktop-snippet&utm_campaign=CSSgrid&utm_medium=snippet&utm_term=7443&utm_content=night&sample_rate=0.001&snippet_name=7443 mam na myśli taką falę pomiędzy nagłówkiem a sekcją na treść strony, za pomocą SVG potrafie jedynie stworzyć pojedyńczy łuk.

Answer 1

Za całość odpowida ten fragment kodu: pobaw się:

<svg width="100%" height="47px" viewBox="0 0 1440 47" version="1.1" xmlns="http://www.w3.org/2000/svg" class="hero__div" preserveAspectRatio="none" data-reactid="21"><defs data-reactid="22"></defs>
	<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" data-reactid="23"><path id="Path-9" data-reactid="24" d="M0,0.0577405639 C117.504588,18.44359 269.602477,22.1720696 456.293666,11.2431795 C562.076057,5.05068514 	730.784198,0.911127653 885.297232,3.27366179 C1157.17617,7.43074321 1386.98062,21.3276838 1440,38.3891927 L1440,46.9388979 L0,46.9388979 L0,0.0577405639 Z" fill="#aaaaaa"></path>
	</g>
</svg>