JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>

CSS

body {
    background-color: whitesmoke;
    margin: 0;
    padding: 0;
}

circle {
    cursor: pointer;
}

JavaScript

(function(name, definition) {
  var sux = this.sux = this.sux || {};

  sux[name] = definition();
})('timingfunction', function() {
  var timingfunction = {};

  /**
   * linear 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.linear = function(p) {
    return p;
  };
  /**
   * swing 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.swing = function(p) {
    return .5 - Math.cos(p * Math.PI) / 2;
  };
  /**
   * easeInQuad 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.easeInQuad = function(p) {
    return Math.pow(p, 2);
  };
  /**
   * easeOutQuad 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.easeOutQuad = function(p) {
    return 1 - timingfunction.easeInQuad(1 - p);
  };
  /**
   * easeInOutQuad 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.easeInOutQuad = function(p) {
    return p < 0.5 ?
      timingfunction.easeInQuad(p * 2) / 2 :
      1 - timingfunction.easeInQuad(p * -2 + 2) / 2;
  };
  /**
   * easeInCubic 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.easeInCubic = function(p) {
    return Math.pow(p, 3);
  };
  /**
   * easeOutCubic 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.easeOutCubic = function(p) {
    return 1 - timingfunction.easeInCubic(1 - p);
  };
  /**
   * easeInOutCubic 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.easeInOutCubic = function(p) {
    return p < 0.5 ?
      timingfunction.easeInCubic(p * 2) / 2 :
      1 - timingfunction.easeInCubic(p * -2 + 2) / 2;
  };
  /**
   * easeInQuart 函数
   *
   * @param  {Number} p 正常百分比值
   * @return {Number}  换算后的结果
   */
  timingfunction.easeInQuart = function(p) {
    return Math.pow(p, 4);
  };
  /**
   * easeOutQuart 函数
   *
   *...