<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>
    <clipPath id="wavy-clip" clipPathUnits="objectBoundingBox">
      <path d="M-.0273,0H1.0273V.92C.9746.92.9746,1,.9219,1S.8691.92.8164.92.7637,1,.7109,1,.6582.92.6055.92.5527,1,.5,1,.4473.92.3945.92.3418,1,.2891,1,.2363.92.1836.92.1309,1,.0781,1,.0254.92-.0273.92Z" />
    </clipPath>
  </defs>
</svg>


<div class="hero">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum placeat beatae nostrum iure ipsam, cum voluptatem corrupti iusto quo possimus consectetur sit! Assumenda, eveniet. Sint voluptas ab omnis nemo reiciendis!</div>
<div class="main"></div>

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  --hero-height: 200px;
}

.hero {
  position: relative;
  height: var(--hero-height);
  color: #fff;
  padding: 15px;
  box-sizing: border-box;
  z-index: 0;
  overflow: hidden;
}

.hero::before, .hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-size: 50% 100%;
  clip-path: url('#wavy-clip');
  z-index: -1;
}

.hero::before {
  animation: move-wave1 7s linear infinite;
  transform: translateX(0);
  background-position: 0 0;
  background-image: repeating-linear-gradient(to bottom right, #673AB7, #00BCD4);
  opacity: 0.5;
}

.hero::after {
  animation: move-wave2 5s linear infinite;
  transform: translateX(-5%);
  background-position: 10% 0;
  background-image: repeating-linear-gradient(to bottom right, #9C27B0, #3F51B5);
}

@keyframes move-wave1 {
  0% {
    background-position: 0 0;
    transform: translateX(0%);
  }
  100% {
    background-position: 84.375% 0;
    transform: translateX(-42.1875%);
  }
}

@keyframes move-wave2 {
  0% {
    background-position: 10% 0;
    transform: translate(-5%, 0);
  }
  50% {
    transform: translate(-26.09375%, -3%);
  }
  100% {
    background-position: 94.375% 0;
    transform: translate(-47.1875%, 0);
  }
}

.main {
  background: url("https://images.unsplash.com/photo-1529257414772-1960b7bea4eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80") center / cover;
  flex: 1;
  margin-top: calc(var(--hero-height) * -0.1104);
}