Page waves

by Andrey Izman

HTML

<div class="waves waves--small" data-wave-small="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 47" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g fill="none" fill-rule="evenodd">
      <path fill-rule="nonzero" d="M403.925926,32 C583.088889,32 1900,0 1900,0 L0,0 C0,0 163.540741,32 403.925926,32 Z" transform="translate(-250)"></path>
      <path fill-opacity="0.2" fill-rule="nonzero" d="M1342.66667,76 C1552.37037,76 1900,0.2 1900,0.2 L0,0.2 C0,0.2 896.518519,76 1342.66667,76 Z" transform="translate(0 -29)"></path>
      <path fill-opacity="0.2" fill-rule="nonzero" d="M1342.66667,76 C1552.37037,76 1900,0.2 1900,0.2 L0,0.2 C0,0.2 896.518519,76 1342.66667,76 Z" transform="translate(617 -29)"></path>
    </g>
  </svg>
</div>




<footer class="footer">
  <div class="footer__wrapper container">
    <div class="waves waves--footer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1900 100" width="1900" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g transform="translate(-578)">
          <path class="waves__wave waves__wave-footer-with-opacity" d="M0,74.3635517 C0,74.3635517 149.686491,112.453979 552.5,94.3635517 C955.313509,76.2731247 1085.21689,63.4466345 1336,24.3635517 C1586.78311,-14.7195311 1900,116 1900,116 L1900,684.363552 L0,684.363552 L0,74.3635517 Z" opacity="0.4"></path>
          <path class="waves__wave waves__wave-footer-with-opacity" d="M578,21 C578,21 700,-7.5 1130.5,61.7525987 C1561,131.005197 1663.21689,18.4672903 1914,3.21512382 C2164.78311,-12.0370427 2478,51.0201205 2478,51.0201205 L2478,292 L578,292 L578,21 Z" opacity="0.4"></path>
          <path class="waves__wave waves__wave--footer-primary" d="M578,81.0871789 C729,43 948.5,20.5 1208.5,38.5 C1468.5,56.5 2141,147 2478,10 C2478,159 2478,645.450731 2478,645.450731 L578,645.450731 C578,645.450731 578,129 578,81.0871789 Z"></path>
        </g>
      </svg>
    </div>
  </div>
</footer>

CSS

.waves--small {
  position: relative;
  margin-top: -1px;
  margin-bottom: calc(16px * 1.5);
  color: rgba(23, 36, 128, 1);
}

.waves {
  overflow: hidden;
}

.waves--small svg {
  width: 100%;
  min-width: 1900px;
  height: 47px;
}

.waves--small svg path {
  fill: currentColor;
}

.waves--footer {
  position: absolute;
  top: -98px;
  left: 0;
  width: 100%;
}

.waves--footer svg {
  width: 100%;
  min-width: 1900px;
}

.waves__wave-footer-with-opacity {
  fill: rgba(23, 36, 128, 1);
}

.waves__wave--footer-primary {
  fill: rgba(23, 36, 128, 1);
}


.footer {
  padding-top: 150px;
  margin-top: 60px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.1;
  color: #fff;
}

.footer__wrapper {
  position: relative;
  background: rgba(23, 36, 128, 1);
}