Edit in JSFiddle

<section class="one">
  <div class="content">
    <div class="content__inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ratione eligendi at voluptate nihil odio labore modi deserunt dolores voluptatum consectetur delectus natus, ducimus, aliquid earum quidem vero ipsum aliquam.
    </div>
  </div>
</section>
<section class="two">
  <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1600 1286">
  <defs>
    <style>
      .wave-1 {
        fill: #fff;
        filter: url(#shadow-wave-1);
      }
      .wave-2 {
        fill: #fff;
        filter: url(#shadow-wave-2);
      }
    </style>
    <filter id="shadow-wave-1" x="-70" y="695" width="1732" height="1286" filterUnits="userSpaceOnUse">
      <feOffset result="offset" dy="-15" in="SourceAlpha"/>
      <feGaussianBlur result="blur" stdDeviation="6.481"/>
      <feFlood result="flood" flood-opacity="0.13"/>
      <feComposite result="composite" operator="in" in2="blur"/>
      <feBlend result="blend" in="SourceGraphic"/>
    </filter>
    <filter id="shadow-wave-2" x="-72" y="751" width="1737" height="1227" filterUnits="userSpaceOnUse">
      <feOffset result="offset" dy="10" in="SourceAlpha"/>
      <feGaussianBlur result="blur" stdDeviation="6.708"/>
      <feFlood result="flood" flood-opacity="0.1"/>
      <feComposite result="composite" operator="in" in2="blur"/>
      <feBlend result="blend" in="SourceGraphic"/>
    </filter>
  </defs>
  <path class="wave-1" d="M-20,889s123.625-59.316,272,2,306.227,28.648,390-45c56.946-50.064,139.233-176.171,376-14,121.8,83.427,168.04-46.1,279,15,0,0,227.03,105.631,323-28v821s-37.58,128.67-168,24c-70.97-56.96-109.13-105.48-400,74-176.913,109.16-325.778-108.57-580,29-148.053,80.12-162.472,247.4-377,163-170.965-67.26-115-180-115-180V889Z" transform="translate(0 -695)"/>
  <path class="wave-2" d="M-20,889s123.625-59.316,272,2,306.7,58.669,393-12c320.7-262.611,236.535,126.63,652-32,0,0,188.04-52.324,323,39v925s-28.43-34.4-168-147c-99.39-80.19-128.13-145.48-419,34-176.913,109.16-288.954-64.92-561,69-147.474,72.59-158.472,213.4-373,129-170.965-67.26-119-146-119-146V889Z" transform="translate(0 -695)"/>
  </svg>

  <div class="content">
    <div class="content__inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ratione eligendi at voluptate nihil odio labore modi deserunt dolores voluptatum consectetur delectus natus, ducimus, aliquid earum quidem vero ipsum aliquam.
    </div>
  </div>
</section>

<section class="three">
  <svg class="circles" xmlns="http://www.w3.org/2000/svg" viewBox="0 172 1122 1056">
    <defs>
      <style>
        .circle-1 {
          fill: #f5f5f5;
        }
        .circle-2 {
          fill: #fff;
        }
        .rect {
          fill: #fff;
        }
      </style>
    </defs>
    <path class="circle-1" d="M782.594,1469.53c300.456-144.92,661.506-18.84,806.426,281.62s18.84,661.5-281.61,806.42S645.9,2576.41,500.979,2275.96,482.139,1614.45,782.594,1469.53Z" transform="translate(-440.875 -1409.41)"/>
    <path class="circle-2" d="M809.594,1490.53c300.456-144.92,661.506-18.84,806.426,281.62s18.84,661.5-281.61,806.42S672.9,2597.41,527.979,2296.96,509.139,1635.45,809.594,1490.53Z" transform="translate(-440.875 -1409.41)"/>
    <rect class="rect" x="640" y="960" width="482" height="268"></rect>
  </svg>

  <div class="content">
    <div class="content__inner">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ratione eligendi at voluptate nihil odio labore modi deserunt dolores voluptatum consectetur delectus natus, ducimus, aliquid earum quidem vero ipsum aliquam.
    </div>
  </div>
</section>
body {
  margin: 0;
}

section {
  position: relative;
  margin: auto;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 30px;
}

.content__inner {
  max-width: 1366px;
  margin: auto;
}

.waves {
  position: absolute;
  top: 0;
}

.one {
  background-image: radial-gradient(ellipse at center, #03cddb 0%, #005773 100%);
  padding-top: 58.125%;
  color: #fff;
}

.one .content {
  padding-top: 30px;
  padding-bottom: 15%;
}

.two {
  margin-top: -15%;
  padding-top: 80.375%;
}

.two .content {
  padding-top: 15%;
  padding-bottom: 25%;
}

.circles {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

.three {
  margin-top: -25%;
  padding-top: 62.125%;
  background-image: linear-gradient(to right, #005773 0%, #03cddb 60%);
  color: #fff;
  z-index: -1;
}

.three .content {
  padding-top: 25%;
  padding-bottom: 30px;
}