* {
  box-sizing: border-box;
}

body {
  margin: 0 auto;
  width: 75%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  display: inline-block;
  height: 100%;
}

const colorTable = [
  // ease in
  [0.0, 0xf15a31],
  [0.2, 0xffd31b],
  [0.33, 0xa6ce42],
  [0.4, 0x007ac1],
  [0.45, 0x007ac1],
  // ease out
  [0.55, 0x007ac1],
  [0.6, 0x007ac1],
  [0.67, 0xa6ce42],
  [0.8, 0xffd31b],
  [1.0, 0xf15a31]
];

function lerp(x, x0, x1, y0, y1) {
  const t = (x - x0) / (x1 - x0);
  return y0 + t * (y1 - y0);
}

function lerpStroke(t) {
  return lerpTable(1, t, colorTable, false, lerpColor);
}

function lerpOffset(min, max, t) {
  return (max - min) * t + min;
}

function lerpColor(x, x0, x1, y0, y1) {
  const b0 = y0 & 0xff;
  const g0 = (y0 & 0xff00) >> 8;
  const r0 = (y0 & 0xff0000) >> 16;

  const b1 = y1 & 0xff;
  const g1 = (y1 & 0xff00) >> 8;
  const r1 = (y1 & 0xff0000) >> 16;

  const r = Math.floor(lerp(x, x0, x1, r0, r1));
  const g = Math.floor(lerp(x, x0, x1, g0, g1));
  const b = Math.floor(lerp(x, x0, x1, b0, b1));

  return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, "0");
}

function lerpTable(vIndex, tValue, table, canExtrapolate, lerpFunc = lerp) {
  const rowCount = table.length;

  for (let i = 0; i < rowCount; ++i) {
    const a = table[i][0];

    if (i === 0 && tValue < a) {
      if (canExtrapolate) {
        return lerpFunc(
          tValue,
          a,
          table[i + 1][0],
          table[i][vIndex],
          table[i + 1][vIndex]
        );
      }
      return table[i][vIndex];
    }

    if (i === rowCount - 1 && tValue >= a) {
      if (canExtrapolate) {
        return lerpFunc(
          tValue,
          table[i - 1][0],
          a,
          table[i - 1][vIndex],
          table[i][vIndex]
        );
      }
      return table[i][vIndex];
    }

    if (tValue >= a && tValue <= table[i + 1][0]) {
      return lerpFunc(
        tValue,
        a,
        table[i + 1][0],
        table[i][vIndex],
        table[i + 1][vIndex]
      );
    }
  }

  return 0;
}

const el = document.getElementById("el");

const speed = 2;
const speedDashoffset = 7600 / speed;
const speedStroke = 6000 / speed;
const pathWidth = 372;
const startTime = performance.now();

const tick = (now) => {
  const dtOffset = ((now - startTime) % speedDashoffset) / speedDashoffset;
  const dtStroke = ((now - startTime) % speedStroke) / speedStroke;

  const stroke = lerpStroke(dtStroke);
  const offset = lerpOffset(pathWidth / 2, -pathWidth / 2, dtOffset);

  el.style.cssText = `stroke-dashoffset: ${offset}; stroke: ${stroke};`;

  requestAnimationFrame(tick);
};

tick(startTime);