<div id="anime-demo">
  
<svg width="600" height="450" ><path d="M380,10q-152,103,-2,257q-149,137,41,154q204,9,61,-149q192,-105,36,-259q-82,275,-136,-2" stroke="black" stroke-width= "1px" fill="none"/></svg>
  <div class="square blue"></div>
  <div class="square red"></div>
  <div class="square orange"></div>
  <div class="square green"></div>
</div>

<div class="color-codes">
  <p><span class="box blue"></span> : Linear</p>
  <p><span class="box red"></span> : easeInCubic</p>
  <p><span class="box orange"></span> : easeOutCubic</p>
  <p><span class="box green"></span> : easeInOutCubic</p>
</div>
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

#anime-demo {
  position: relative;
}

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;
}

.box, .square {
  pointer-events: none;
  background-color: black;
  margin: 4px;
  display: inline-block;
  top: -10px;
  left: -10px;
  opacity: 0.6;
  border-radius: 5px;
  width: 20px;
  height: 20px;
}

.color-codes {
  position: absolute;
  top: 0;
}

.box {
  position: relative;
  top: 8px;
}

.square {
  position: absolute;
}

.square.blue, .box.blue {
  background: blue;
}

.square.red, .box.red {
  background: red;
}

.square.orange, .box.orange {
  background: orange;
}

.square.green, .box.green {
  background: green;
}

.controls {
  margin-top: 20px;
  text-align: center;
}
var path = anime.path('path');

var easings = ['linear', 'easeInCubic', 'easeOutCubic', 'easeInOutCubic'];

var motionPath = anime({
  targets: '.square',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: function (el, i) {
    return easings[i];
  },
  duration: 10000,
  loop: true
});

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