JSFiddle - React, Tailwind, and code Playground

JavaScript

var width = 500,
    height = 500;

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var context = canvas.node().getContext("2d");

var points = [
  [180, 200],
  [280, 400],
  [380, 100],
  [480, 300],
  [180, 300],
  [280, 100],
  [380, 400]
];

var counter = 0;
setTimeout(animateDraw, 1000);

function animateDraw() {
    render(++counter);
    if(counter < points.length) {
        setTimeout(animateDraw, 1000);
    }
}

function render(i) {
  context.beginPath();
  context.moveTo(points[i-1][0], points[i-1][1]);
  context.lineTo(points[i][0], points[i][1]);
  context.stroke();
}