JSFiddle - React, Tailwind, and code Playground

by btipling

HTML

<div id="container">
    <canvas id="canvas" width="150" height="150"></canvas>
</div>

CSS

html, body {
    height: 100%;
}
#container {
    position: absolute;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background-color: #FFF;
}
canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
    height: 150px;
    width: 150px;
}

JavaScript

window.requestAnimFrame = (function(callback){ 
    return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
        function(callback){ window.setTimeout(callback, 1000 / 60); }
})();


function colorHslToRgb(color){
    var r, g, b, h, s, l;
    h = color.h;
    s = color.s;
    l = color.l;
    if(s == 0){
        r = g = b = l; // achromatic
    }else{
        function hue2rgb(p, q, t){
            if(t < 0) t += 1;
            if(t > 1) t -= 1;
            if(t < 1/6) return p + (q - p) * 6 * t;
            if(t < 1/2) return q;
            if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
            return p;
        }

        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    color.r = parseInt(r * 255, 10);
    color.g = parseInt(g * 255, 10);
    color.b = parseInt(b * 255, 10);
}


function colorRgbToHsl(color){
    var r, g, b;
    r = color.r;
    g = color.g;
    b = color.b;
    r /= 255, g /= 255, b /= 255;
    var max = Math.max(r, g, b), min = Math.min(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min){
        h = s = 0; // achromatic
    }else{
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max){
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    color.h = h;
    color.s = s;
    color.l = l;
}


function main() {
    var colors, arcs, w, h, canvas, ctx, x, y, borderWidth, i, r, step,
        startColor, addColor, numStripes;
    
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    w = canvas.width;
    h =...