<div class="wave"></div>
<div class="wave" style="--size: 40px;"></div>
<div class="wave" style="--size: 20px;"></div>

.wave {
  --size: 50px;
  --R: calc(var(--size)*1.28);

  -webkit-mask:
    radial-gradient(var(--R) at 50% calc(1.8*var(--size)),#000 99%,#0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-.8*var(--size)),#0000 99%,#000 101%) 
      50% var(--size)/calc(4*var(--size)) 100% repeat-x;
  background: linear-gradient(90deg,red,blue);
  height: 150px;
  maring: 15px;
}