<div class="container">
  <svg width="209px" height="210px" viewBox="373 790 209 210" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <linearGradient x1="7.20890219%" y1="-7.07542877%" x2="93.8223221%" y2="112.892054%" id="greenGradient">
        <stop stop-color="#6AEFC6" offset="0%"></stop>
        <stop stop-color="#698D28" offset="100%"></stop>
      </linearGradient>
    </defs>
    <path d="M477.5,999.318064 C535.213756,999.318064 582,952.531821 582,894.818064 C582,837.104308 535.213756,790.318064 477.5,790.318064 C419.786244,790.318064 373,837.104308 373,894.818064 C373,952.531821 419.786244,999.318064 477.5,999.318064 L477.5,999.318064 L477.5,999.318064 L477.5,999.318064 Z M476.5,936.318064 C499.419817,936.318064 518,917.737881 518,894.818064 C518,871.898247 499.419817,853.318064 476.5,853.318064 C453.580183,853.318064 435,871.898247 435,894.818064 C435,917.737881 453.580183,936.318064 476.5,936.318064 L476.5,936.318064 L476.5,936.318064 L476.5,936.318064 Z" fill="url(#greenGradient)" fill-rule="evenodd"></path>
  </svg>
</div>
svg {
  animation: steps;
  animation-duration: 4s;
  animation-timing-function: steps(8);
  animation-iteration-count: infinite;
  width: 120px;
  height: 120px;
}

@keyframes steps {
  from {
    transform: translateX(-140px);
  }
  to {
    transform: translateX(160px);
  }
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css
  2. https://codepen.io/gregh/pen/jyNrJW.css

External JavaScript

This Pen doesn't use any external JavaScript resources.