JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="250" height="250">
	Your browser does not support the HTML5 canvas tag.
</canvas>

JavaScript

draw();

function draw() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //ctx.imageSmoothingEnabled = false;

    var colors = [
        ['blue', 'yellow'],
        ['white', 'pink'],
        ['green', 'red'],
        ['white', 'black'],
        ['green', 'blue'],
        ['red', 'green', 'blue']
    ];

    ctx.lineWidth = 21;
    
    for (var i = 0; i < 12; i++) {
        for (var cIdx = 0, r = 10; r <= 110; r += 20, cIdx++) {
            var cols = colors[cIdx];
            ctx.beginPath();
            ctx.arc(125, 125, r, (i - 1) * Math.PI / 6.0, i * Math.PI / 6.0);
            ctx.strokeStyle = cols[i % cols.length];
            ctx.stroke();
        }
    }
}