<button class="centerx-button">Animate cx Value</button>
<svg>
  <text x="0" y="40">easingSinusoidalIn</text>
  <circle r="20" cx="170" cy="35" fill="violet" stroke="white" stroke-width="4"/>
  <text x="0" y="80">easingQuadraticIn</text>
  <circle r="20" cx="170" cy="75" fill="indigo" stroke="white" stroke-width="4"/>
  <text x="0" y="120">easingCubicIn</text>
  <circle r="20" cx="170" cy="115" fill="blue" stroke="white" stroke-width="4"/>
  <text x="0" y="160">easingQuarticIn</text>
  <circle r="20" cx="170" cy="155" fill="green" stroke="white" stroke-width="4"/>
  <text x="0" y="200">easingQuinticIn</text>
  <circle r="20" cx="170" cy="195" fill="yellow" stroke="white" stroke-width="4"/>
  <text x="0" y="240">easingCircularIn</text>
  <circle r="20" cx="170" cy="235" fill="orange" stroke="white" stroke-width="4"/>
  <text x="0" y="280">easingExponentialIn</text>
  <circle r="20" cx="170" cy="275" fill="red" stroke="white" stroke-width="4"/>
  <text x="0" y="320">easingBackIn</text>
  <circle r="20" cx="170" cy="315" fill="violet" stroke="white" stroke-width="4"/>
  <text x="0" y="360">easingElasticIn</text>
  <circle r="20" cx="170" cy="355" fill="indigo" stroke="white" stroke-width="4"/>
  <text x="0" y="400">easingBounceIn</text>
  <circle r="20" cx="170" cy="395" fill="blue" stroke="white" stroke-width="4"/>
</svg>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 400;
  text-align: center;
  width: 600px;
}

svg {
  display: block;
  width: 100%;
  height: 450px;
}

button {
  background: wheat;
  border: 1px solid black;
  font-family: 'Lato';
  border-radius: 5px;
  padding: 8px;
  margin: 20px 0;
  outline: none;
  cursor: pointer;
}
var centerxButton = document.querySelector(".centerx-button");

var circles = document.querySelectorAll("circle");
var easings = ['easingSinusoidalIn', 'easingQuadraticIn', 'easingCubicIn', 'easingQuarticIn', 'easingQuinticIn', 'easingCircularIn', 'easingExponentialIn', 'easingBackIn', 'easingElasticIn', 'easingBounceIn'];

centerxButton.addEventListener(
  "click",
  function() {
    for(var i=0; i<10; i++) {
      KUTE.to(circles[i], { attr: { cx: 500 } }, { repeat: 1, yoyo: true, easing: easings[i] }).start();
    }
  },
  false
);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:400,900

External JavaScript

  1. https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js
  2. https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js
  3. https://cdn.jsdelivr.net/kute.js/1.6.2/kute-attr.min.js