<svg 
 viewBox="0 0 2 1" 
 preserveAspectRatio="none">
  <defs>
    <path id="w" 
      d="
      m0 1v-.5 
      q.5.5 1 0
      t1 0 1 0 1 0
      v.5z" />
  </defs>
  <g>
   <use href="#w" y=".0" fill="#2d55aa" />
   <use href="#w" y=".1" fill="#3461c1" />
   <use href="#w" y=".2" fill="#4579e2" />
  </g>
 </svg>

use{
  animation:move-forever 2s linear infinite;
  &:nth-child(2){ animation-duration:2.5s; animation-delay:-1.5s; }
  &:nth-child(1){ animation-duration:5s}
}

@keyframes move-forever{
   0%{transform: translate(-2px , 0)}
 100%{transform: translate( 0px , 0)} 
}


/* layout only*/
body{margin:0; overflow:hidden; background-color: #123;}
svg{width:100vw;height:100vh}