.svg_animation {
  padding-top: 10em;
  width: 150vw;
  overflow: hidden;
  background: #722a9b;
    background: linear-gradient(245deg, rgba(114, 42, 155, 1) 34%, rgba(83, 181, 237, 1) 100%);
}

.cls-1 {
  fill: #a84fcb;
  animation: wavemaker 12s ease-in-out infinite alternate;
}

.cls-2 {
  fill: #5ae6b0;
 animation: wavemaker 8s ease-in-out infinite alternate-reverse;
}

.cls-3 {
  fill: #6df1fd;
  animation: wavemaker 12s ease-in-out infinite alternate;
}

#cls-1 {
}

#cls-2 {
}



@keyframes wavemaker {
  0% {
    transform: translateX(-4vw);
  }
  100% {
    transform: translateX(-1vw);
  }
}