Wave

by Simon Hi

HTML

<div id="wrapper">
</div>
<!--
The svg below is a modification of wave-brush.svg that can be found at https://github.com/pojome/elementor, GNU General Public License v3.0 license: https://github.com/pojome/elementor/blob/master/license.txt
-->
<svg height="0" width="0">
	<defs>
		<clipPath id="wave" clipPathUnits="objectBoundingBox">
			<path d="M1.000188 0.349006c0 0 -0.0257544 0.154714 -0.049392 0.165508c-0.0239904 0.010794 -0.0444528 0 -0.07373519999999999 -0.05397c-0.0398664 -0.07196 -0.1167768 -0.36339799999999994 -0.1577016 -0.205086s-0.0426888 0.165508 -0.063504 0.266252c-0.023284799999999998 0.115136 -0.07056 0.345408 -0.1291248 0.334614C0.46428479999999994 0.84553 0.351036 0.259056 0.30446639999999997 0.28784c-0.0049391999999999995 0.003598 -0.023284799999999998 0.028784 -0.037044 0.07196c-0.013406399999999999 0.043176 -0.0331632 0.13672399999999998 -0.059976 0.169106c-0.0112896 0.014392 -0.0292824 0.039578 -0.0500976 0.032382c-0.005292 -0.003598 -0.0222264 -0.014392 -0.042336 -0.057568c-0.0201096 -0.043176 -0.038807999999999995 -0.111538 -0.0557424 -0.133126C0.022932 0.331016 0 0.388584 0 0.388584 V 0 h 1 V0.3z"/>
			<path d="M0.9201024 0.406574c-0.0024695999999999997 -0.03598 -0.007056 -0.014392 -0.015170399999999999 -0.014392c-0.008114399999999999 0 -0.0215208 -0.043176 -0.0204624 -0.039578c0.0010584 0.003598 0.0109368 0.05397 0.021168 0.06836199999999999C0.9162216 0.43895599999999996 0.9222191999999999 0.442554 0.9201024 0.406574z"/>
			<path d="M0.8551872 0.309428c0 0 -0.0084672 -0.007196 -0.019756799999999998 -0.032382c-0.0112896 -0.028784 -0.0363384 -0.10074399999999999 -0.053272799999999995 -0.12593c-0.028929599999999996 -0.039578 -0.0557424 0 -0.053272799999999995 0.003598c0.0028224 0.003598 0.0338688 -0.021588 0.062092800000000004 0.039578c0.011642399999999999 0.025185999999999997 0.0328104 0.079156 0.0437472 0.097146C0.8463672 0.31302599999999997 0.8551872 0.309428 0.8551872 0.309428z"/>
			<path d="M0.6533855999999999 0.30583c0.0059976...

CSS

body {
  padding: 0;
  margin: 0;
  background: #efe;
}

#wrapper {
  width: 80vw;
  height: 80vh;
  margin: 0 auto;
  background: #eee;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Pair_of_Merops_apiaster_feeding.jpg/800px-Pair_of_Merops_apiaster_feeding.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-clip-path: url(#wave);
  clip-path: url(#wave);
}