curve.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="application/javascript"></script>
  </head>
  <script>
    function animatePathDrawing(ctx, x0, y0, x1, y1, x2, y2, duration, next) {
      const ctxSize = calculateClearLayer(x0, y0, x1, y1, x2, y2);

      let start = null;

      const step = function animatePathDrawingStep(timestamp) {
        if (start === null) start = timestamp;

        const delta = timestamp - start,
          progress = Math.min(delta / duration, 1);

        ctx.clearRect(...ctxSize);

        drawBezierSplit(ctx, x0, y0, x1, y1, x2, y2, 0, progress);

        if (progress < 1) {
          window.requestAnimationFrame(step);
        } else {
          next();
        }
      };

      window.requestAnimationFrame(step);
    }

    function drawBezierSplit(ctx, x0, y0, x1, y1, x2, y2, t0, t1) {
      ctx.beginPath();

      if (0.0 == t0 && t1 == 1.0) {
        ctx.moveTo(x0, y0);
        ctx.quadraticCurveTo(x1, y1, x2, y2);
      } else if (t0 != t1) {
        // https://javascript.info/bezier-curve#maths
        // P = (1−t)2P1 + 2(1−t)tP2 + t2P3
        let t00 = t0 * t0,
          t01 = 1.0 - t0,
          t02 = t01 * t01,
          t03 = 2.0 * t0 * t01;

        const nx0 = t02 * x0 + t03 * x1 + t00 * x2,
          ny0 = t02 * y0 + t03 * y1 + t00 * y2;

        t00 = t1 * t1;
        t01 = 1.0 - t1;
        t02 = t01 * t01;
        t03 = 2.0 * t1 * t01;

        const nx2 = t02 * x0 + t03 * x1 + t00 * x2,
          ny2 = t02 * y0 + t03 * y1 + t00 * y2;

        const nx1 = lerp(lerp(x0, x1, t0), lerp(x1, x2, t0), t1),
          ny1 = lerp(lerp(y0, y1, t0), lerp(y1, y2, t0), t1);

        ctx.moveTo(nx0, ny0);
        ctx.quadraticCurveTo(nx1, ny1, nx2, ny2);
      }

      ctx.stroke();
      ctx.closePath();
    }

    /**
     * Linearly interpolate between two numbers v0, v1 by t
     */
    function lerp(v0, v1, t) {
      return (1.0 - t) * v0 + t * v1;
    }

    function calculateClearLayer(x0, y0, x1, y1, x2, y2) {
      let max_x = -9999,
        max_y = -9999,
        min_x = 9999,
        min_y = 9999;
      for (let t1 = 0; t1 < 1; t1 += 0.016) {
        const t0 = 0;
        let t00 = t0 * t0,
          t01 = 1.0 - t0,
          t02 = t01 * t01,
          t03 = 2.0 * t0 * t01;
        const nx0 = t02 * x0 + t03 * x1 + t00 * x2,
          ny0 = t02 * y0 + t03 * y1 + t00 * y2;
        if (nx0 > max_x) max_x = nx0;
        if (ny0 > max_y) max_y = ny0;

        if (nx0 < min_x) min_x = nx0;
        if (ny0 < min_y) min_y = ny0;

        t00 = t1 * t1;
        t01 = 1.0 - t1;
        t02 = t01 * t01;
        t03 = 2.0 * t1 * t01;

        const nx2 = t02 * x0 + t03 * x1 + t00 * x2,
          ny2 = t02 * y0 + t03 * y1 + t00 * y2;

        if (nx2 > max_x) max_x = nx2;
        if (ny2 > max_y) max_y = ny2;

        if (nx2 < min_x) min_x = nx2;
        if (ny2 < min_y) min_y = ny2;
      }

      const axis_x = min_x;
      const axis_y = min_y;
      const width = max_x - min_x;
      const height = max_y - min_y;
      const w = 1.0;
      return [axis_x / w, axis_y / w, width * w, height * w];
    }

    document.addEventListener("DOMContentLoaded", function () {
      const docCanvas = document.getElementById("canvas"),
        ctx = docCanvas.getContext("2d");
      const next = () => {
        animatePathDrawing(ctx, 170, 120, 220, 120, 220, 170, 1000);
      };
      animatePathDrawing(ctx, 120, 170, 120, 120, 170, 120, 1000, next);
    });
  </script>

  <body>
    <canvas id="canvas" width="300" height="300"></canvas>
  </body>
</html>