JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="container">
    <canvas id="erf-canvas" height="400" width="1600"></canvas>
    <canvas id="cos-canvas" height="400" width="1600"></canvas>
    <svg style="height: 250px">
      <circle cx="200" cy="100" r="100" style="fill:#00cc00"/>
    </svg>
  </div>

CSS

body {
  font-family: "Helvetica Neue";
  font-size: 16px;
  line-height: 25px;
}

div.container {
  width: 960px;
  margin: auto;
}

canvas {
  height: 200px;
  width: 800px;
}

JavaScript

function toDegree (radian) {
  return radian * 180 / 3.14159;
}

function toRadian (degree) {
  return degree * 3.14159 / 180;
}

var erfCtx = document.getElementById('erf-canvas').getContext('2d');
var cosCtx = document.getElementById('cos-canvas').getContext('2d');

if (window.devicePixelRatio) {
  erfCtx.scale(devicePixelRatio, devicePixelRatio);
  cosCtx.scale(devicePixelRatio, devicePixelRatio);
}

erfCtx.transform(1, 0, 0, -1, 200, 100);
cosCtx.transform(1, 0, 0, -1, 200, 100);

var unit = [0, 1];

function drawClock (context, radius, radian, fillStyle) {
  context.clearRect(-radius, radius, radius, -radius);
  context.fillStyle = fillStyle;
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(0, radius);
  context.arc(0, 0, radius, 0.5 * Math.PI, 0.5 * Math.PI - radian, true);
  context.closePath();
  context.fill();
}

function showClock (context, radius, radian, fillStyle, fps, duration, speedFunc) {
  var draw = function (radian) {
    drawClock(context, radius, radian, fillStyle);
  }

  var counterToUnit = linearMap([0, fps * duration], unit);
  var unitToRadian = linearMap(unit, [0, radian]);
  var counter = 0;

  function worker () {
    if (counter >= duration * fps) {
      draw(radian);
      return;
    }

    draw(unitToRadian(speedFunc(counterToUnit(counter))));
    counter ++;
    setTimeout(worker, 1000 / fps);
  }
  worker();
}

var withErf = (
  function () {
    var rangeToUnit = linearMap([erf(-2), erf(2)], unit);
    var unitToDomain = linearMap(unit, [-2, 2]);
    return function (x) {
      x = unitToDomain(x);
      return rangeToUnit(erf(x));
    };
  })();

var withCos = (
    function () {
      var rangeToUnit = linearMap([-1, 1], unit);
      var unitToDomain = linearMap(unit, [-Math.PI, 0]);
      return function (x) {
        x = unitToDomain(x);
        return rangeToUnit(Math.cos(x));
      }
    }
  )();

function erf(x) {
  // save the sign of x
  var sign = (x >= 0) ? 1 : -1;
  x = Math.abs(x);

  // constants
...