CSS SVG waves animation

by katalin_2003

HTML

<svg class="editorial" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 30 " preserveAspectRatio="none">
  <defs>
    <path id="gentle-wave" d="M-160 44c30 0
    58-18 88-18s
    58 18 88 18
    58-18 88-18
    58 18 88 18
    v44h-352z"></path>
  </defs>
  <g class="parallax2 shape-fill" opacity="0.33">
    <use xlink:href="#gentle-wave" x="50" y="0"></use>
  </g>
  <g class="parallax3 shape-fill" opacity="0.66">
    <use xlink:href="#gentle-wave" x="50" y="9"></use>
  </g>
  <g class="parallax4 shape-fill">
    <use xlink:href="#gentle-wave" x="50" y="6"></use>
  </g>
</svg>

CSS

body {
  margin: 0;
  background-color: #67c9ff;
}

.parallax2>use {
  animation: move-forever2 12s linear infinite;

  &:nth-child(1) {
    animation-delay: -2s;
  }
}

.parallax3>use {
  animation: move-forever3 10s linear infinite;

  &:nth-child(1) {
    animation-delay: -2s;
  }
}

.parallax4>use {
  animation: move-forever4 8s linear infinite;

  &:nth-child(1) {
    animation-delay: -2s;
  }
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever4 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}


.desc {
  max-width: 600px;
}

.shape-fill {
  fill: #fff
}

.shape-fill-light {
  fill: #eff9ff
}

JavaScript

// source: https://r-charts.com/