<svg xmlns="http://www.w3.org/2000/svg" style="position: absolute; width: 0; height: 0; pointer-events: none; z-index: -9999;" aria-hidden="true">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
      <feBlend in="SourceGraphic" in2="goo" />
    </filter>
  </defs>
</svg>


<header>
  <div class="wave-bg">
    <div class="wave-bg-inner"></div>
  </div>
</header>

body {
  margin: 0;
  background-color: #673ab7;
  --svg-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1230' height='100'%3E%3Cpath d='M0,0S132,32,212,32C357,32,416,0,615,0,841,0,874,31,968,31c167,0,262-31,262-31V100H0Z' fill='%23673ab7'/%3E%3C/svg%3E");
}

header {
  position: relative;
  height: 75vh;
  background:
    url("https://images.unsplash.com/photo-1503431128871-cd250803fa41?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80") no-repeat center / cover;
  z-index: 0;
  overflow: hidden;
}

.wave-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 8.130081300813007%;
  background: var(--svg-wave) no-repeat center / 100% 100%;
}

.wave-bg-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: url('#goo');
  z-index: -1;
}

.wave-bg-inner::before {
  content: '';
  position: absolute;
  height: 97%;
  width: 100%;
  bottom: 0;
  left: 0;
  background: var(--svg-wave) no-repeat center / 100% 100%;
  z-index: -1;
}

.wave-bg-inner::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background-color: #673ab7;
  animation: anim 4s cubic-bezier(0.4, -0.4, 0.8, 0.3) infinite;
}

@keyframes anim {
  0% {
    transform: translate(-50%, -100px);
    opacity: 0;
  }
  30% {
    transform: translate(-50%, -110px);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 0px);
  }
}