JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="400" height="400" style="border: 1px solid black;"></canvas>

JavaScript

var ctx = document.getElementById('canvas1').getContext('2d');
var points = [null, null, null];

for(var i=0; i<24; i++)
{
    var width = 0.5 + i/2;
    
    var m = 200;
    
    var x = Math.cos(i/4) * 180;
    var y = Math.sin(i/4) * 140;
    
    points[0] = points[1];
    points[1] = points[2];
    points[2] = { X:x, Y:y};
    
    if(points[0] == null)
        continue;
    
    var px0 = (points[0].X + points[1].X) / 2;
    var py0 = (points[0].Y + points[1].Y) / 2;
    
    var px1 = (points[1].X + points[2].X) / 2;
    var py1 = (points[1].Y + points[2].Y) / 2;
    
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.strokeStyle = "rgba(0,0,0,0.5)";
    ctx.moveTo(m+px0,m+py0);
    ctx.lineTo(m+points[1].X,m+points[1].Y);
    ctx.lineTo(m+px1,m+py1);
    ctx.stroke();
}