<button class="radius-button">Animate Radius</button>
<button class="centerx-button">Animate cx Value</button>
<button class="centery-button">Animate cy Value</button>
<svg><circle id="circle-a" r="20" cx="200" cy="100" fill="none" stroke="black"/>
  <circle id="circle-b" r="20" cx="400" cy="100"/>
</svg>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 300;
  text-align: center;
  width: 600px;
}

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

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

var radiusAnimation = KUTE.allTo(
  "circle",
  {
    attr: { r: 75 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicIn'
  }
);

var centerxAnimationA = KUTE.to(
  "#circle-a",
  {
    attr: { cx: 500 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut',
  }
);

var centerxAnimationB = KUTE.to(
  "#circle-b",
  {
    attr: { cx: 100 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut'
  }
);

var centeryAnimation = KUTE.allTo(
  "circle",
  {
    attr: { cy: 300 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicOut'
  }
);

radiusButton.addEventListener(
  "click",
  function() {
    radiusAnimation.start();
  },
  false
);

centerxButton.addEventListener(
  "click",
  function() {
    centerxAnimationA.start();
    centerxAnimationB.start();
  },
  false
);

centeryButton.addEventListener(
  "click",
  function() {
    centeryAnimation.start();
  },
  false
);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300,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