JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="700" height="800"></canvas>

JavaScript

var can = document.getElementById('canvas');
var ctx = can.getContext('2d');

// Parameters
var saturation = 100;
var lightness = 50;
var radius = 180;
var canvas = 850;
var centerx = 300;
var centery = 300;
var redstart = 90 * 0.017453292519943;
// Render
for (i = 0; i <= 360; i++) {
    var diffr = i;
    var diffg = Math.abs(i - 120);
    var diffb = Math.abs(i - 240);
    var red = (Math.abs(180 - diffr) * 4.25) - 255;
    var green = (Math.abs(180 - diffg) * 4.25) - 255;
    var blue = (Math.abs(180 - diffb) * 4.25) - 255;
    var startAngle = ((i + 1) * Math.PI / 180) - redstart;
    var endAngle = ((i - 1) * Math.PI / 180) - redstart;

    ctx.beginPath();
    ctx.lineWidth = 100;
    ctx.strokeStyle = 'rgb(' + red + ', ' + green + ', ' + blue + ')';
    ctx.arc(centerx, centery, radius, startAngle, endAngle, true);
    ctx.stroke();


}
for (i = 0; i <= 360; i++) {
    var diffr = i;
    var diffg = Math.abs(i - 120);
    var diffb = Math.abs(i - 240);
    var red = (Math.abs(180 - diffr) * 4.25) - 255;
    var green = (Math.abs(180 - diffg) * 4.25) - 255;
    var blue = (Math.abs(180 - diffb) * 4.25) - 255;
    var startAngle = ((i + 1) * Math.PI / 180) - redstart;
    var endAngle = ((i - 1) * Math.PI / 180) - redstart;

    ctx.beginPath();
    ctx.strokeStyle = 'rgb(' + red + ', 0, 0)';
    ctx.lineWidth = 25;
    ctx.arc(centerx, centery, 115, startAngle, endAngle, true);
    ctx.stroke();
}

for (i = 0; i <= 360; i++) {
    var diffr = i;
    var diffg = Math.abs(i - 120);
    var diffb = Math.abs(i - 240);
    var red = (Math.abs(180 - diffr) * 4.25) - 255;
    var green = (Math.abs(180 - diffg) * 4.25) - 255;
    var blue = (Math.abs(180 - diffb) * 4.25) - 255;
    var startAngle = ((i + 1) * Math.PI / 180) - redstart;
    var endAngle = ((i - 1) * Math.PI / 180) - redstart;

    ctx.beginPath();
    ctx.lineWidth = 25;
    ctx.strokeStyle = 'rgb(0, ' + green + ', 0)';
    ctx.arc(centerx, centery, 87, startAngle, endAngle, true);
   ...