анимация растущей линии на Canvas

let points = [[50,50],[70,80],[150,10],[200,100],[10,150]]; 
let goal = 10000; // 10 сек 
 
// считаем расстояния между точками 
points.forEach((pt, i, arr) => { 
    let index = i ? i-1 : arr.length-1; 
    let x = arr[index][0] - pt[0]; 
    let y = arr[index][1] - pt[1]; 
    pt[2] = Math.sqrt(x*x + y*y); 
}) 
 
// общая длина пути 
let total = points.reduce((acc, el) => el[2] + acc, 0) 
 
// функция линейной интерполяции между точками p1 и p2 
let lerp = (t, p1, p2) => [p1[0] + (p2[0] - p1[0])*t, p1[1] + (p2[1] - p1[1])*t] 
 
let ctx = cnvs.getContext('2d'); 
ctx.lineWidth = 4; 
requestAnimationFrame(draw); 
 
function draw(t) { 
  ctx.clearRect(0, 0, cnvs.width, cnvs.height); 
  ctx.beginPath(); 
  ctx.moveTo(points[0][0], points[0][1]) 
 
  // если время конца анимации еще не настало 
  if (t < goal) {  
    requestAnimationFrame(draw) // запрашиваем следующий кадр 
    growPath(t/goal*total); // рисуем ползущую линию 
  }  
  // если анимация закончилась 
  else { 
    // рисуем замкнутую линию через все точки 
    points.forEach((pt, i) => i && ctx.lineTo(pt[0], pt[1])) 
    ctx.closePath(); 
  } 
  ctx.stroke(); 
  ctx.fillText((t/goal).toFixed(2), 5, 10) 
} 
 
function growPath(t) { 
  // длина пути между уже пройденными точками 
  let pathLen = 0;  
  for (var i=1; i<=points.length; i++) { 
    let pt = points[i] || points[0]; 
    // если точка уже пройдена 
    if (t - pathLen > pt[2]) {  
      pathLen += pt[2]; // считаем пройденный путь 
      ctx.lineTo(pt[0], pt[1]); // рисуем полную линию 
    }  
    // если точка еще не достигнута  
    else { 
      // считаем конечную точку и выходим из цикла 
      return ctx.lineTo(...lerp((t-pathLen)/pt[2], points[i-1], pt)); 
    } 
  } 
}

#cnvs { 
  border: 1px solid #f00; 
}

<canvas id="cnvs" width="300" height="170"></canvas>