JSFiddle - React, Tailwind, and code Playground

by sbnietert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.js"></script>

CSS

canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

JavaScript

function min() {
	var min = Infinity;
    for(var i = 0; i < arguments.length; i++)
    	if(arguments[i] < min)
        	min = arguments[i];
    return min;
}

var size = 600;

var settings = {
	materialColor: 'rgb(0, 153, 0)',
    voidColor: 'rgb(0, 0, 0)',
    circleScaling: 0.5,
    radiusCutoff: 6,
};

var canvas = document.createElement('canvas');
canvas.width = canvas.height = size;
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

function draw() {
	ctx.fillStyle = settings.materialColor;
    ctx.fillRect(0, 0, size, size);
    ctx.fillStyle = settings.voidColor;
    
    var distances = new Array(size);
    for(var x = 0; x < size; x++) {
        distances[x] = new Array(size);
        for(var y = 0; y < size; y++)
            distances[x][y] = min(x, y, size - x, size - y);
    }
    
    while(true) {    
        var radius = -1;
        var cxs, cys;
        for(var x = 0; x < size; x++) {
            for(var y = 0; y < size; y++) {
                if(distances[x][y] > radius) {
                    radius = distances[x][y];
                    cxs = [x];
                    cys = [y];
                } else if(distances[x][y] == radius) {
                    cxs.push(x);
                    cys.push(y);
                }
            }
        }

        radius *= settings.circleScaling;
        if(radius < settings.radiusCutoff)
        	break;
		
        for(var i = 0; i < cxs.length; i++) {
        	var cx = cxs[i];
            var cy = cys[i];
            ctx.beginPath();
            ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false); 
            ctx.fill();
            ctx.closePath();

            for(var x = 0; x < size; x++) {
                for(var y = 0; y < size; y++) {
                    var d = Math.sqrt(Math.pow(x - cx,2) + Math.pow(y - cy,2)) - radius;
                    distances[x][y] = min(distances[x][y], d);
                }
        	}
        }
    }
}

draw();

var gui = new dat.GUI();
gui.addColor(settings,...