JSFiddle - React, Tailwind, and code Playground

by marcuswhybrow

HTML

<div id="target"></div>

CSS

#target {
    background: rgba(0,0,0,0.1);
    padding: 0;
    margin: 0;
    width: 500px;
    height: 300px;
    border: 1px solid #888;
    border-radius: 4px;
}

JavaScript

var $target = $('#target');

var output = 'none',
    x = 0,
    y = 0,
    r = 0,
    xMax = $target.width(),
    yMax = $target.height(),
    rMax = 50;

var start = new Date().getMilliseconds();

for (var i = 0; i < 1000; i++) {
    x = Math.floor(Math.random() * xMax);
    y = Math.floor(Math.random() * yMax);
    r = Math.floor(Math.random() * rMax);
    output = output.concat(', -webkit-radial-gradient('+x+'px '+y+'px, rgba(0,0,0,0.01) '+r+'px, transparent '+(r+1)+'px)');
}

$target.css('background-image', output);

var stop = new Date().getMilliseconds();
var executionTime = stop - start;

console.log(executionTime);