<div id="anime-demo">
  <svg>
    <circle class="circle" cx="100" cy="100" r="75" fill="#ED6E46" stroke="#000" stroke-width="5"/>
</svg>
</div>
<div class="controls">
  <button class="play-x">Animate CX</button>
  <button class="play-strokeWidth">Animate Stroke Width</button>
  <button class="play-y">Animate CY</button>
  <button class="play-all">Animate All Properties</button></div>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
  text-align: center;
}

svg {
  width: 100%;
  height: 400px;
}

button {
  background: orange;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}

#anime-demo {
  text-align: left;
}

.square {
  pointer-events: none;
  position: relative;
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  margin: 4px;
  display: inline-block;
}

.controls {
  margin-top: 0px;
}
var animateX = anime({
  targets: '.circle',
  cx: window.innerWidth*0.6,
  autoplay: false
});


var animateStrokeWidth = anime({
  targets: '.circle',
  strokeWidth: '25',
  autoplay: false
});

var animateY = anime({
  targets: '.circle',
  cy: '280',
  autoplay: false
});

var animateAll = anime({
  targets: '.circle',
  cx: window.innerWidth*0.6,
  strokeWidth: '25',
  cy: '280',
  autoplay: false
});

document.querySelector('.play-x').onclick = animateX.restart;

document.querySelector('.play-strokeWidth').onclick = animateStrokeWidth.restart;

document.querySelector('.play-y').onclick = animateY.restart;

document.querySelector('.play-all').onclick = animateAll.restart;

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js