JSFiddle - React, Tailwind, and code Playground

by cuhuak

HTML

<canvas id="canvas" width="40" height="40"></canvas>

CSS

canvas {
    background: #f1f1f1;
}

JavaScript

var can = $('#canvas')[0],
    ctx = can.getContext('2d'),
    radius = 40,
    thickness = 40,
    p = {
        x: can.width/2,
        y: can.height/2
    },
    start = Math.PI,
    end = start + Math.PI*2,
    step = Math.PI / (360*10),
    ang = 0,
    grad,
    r = 0,
    g = 0,
    b = 0,
    pct = 0;

ctx.translate(p.x, p.y);

for (ang = start; ang <= end; ang += step) {
    ctx.save();
    ctx.rotate(-ang);
    grad = ctx.createLinearGradient(0, radius - thickness, 0, radius);
    grad.addColorStop(0, 'black');

    h = 360-(ang-start)/(end-start) * 360;
    s = '100%';
    l = '50%';
    var hsl = 'hsl('+[h,s,l].join()+')';
    
    grad.addColorStop(.5, hsl);
    grad.addColorStop(1, 'white');
    ctx.fillStyle = grad;

    ctx.fillRect(0, (radius - thickness), 1, thickness);
    ctx.restore();
}

//Knockout
ctx.beginPath();
ctx.arc(p.x, p.y, radius - thickness, 0, 2 * Math.PI);
ctx.fillStyle = '#f1f1f1';
ctx.fill();