JSFiddle - React, Tailwind, and code Playground

by Lachlan Arthur

HTML

<div id="bokeh"></div>
<h1>Heading</h1>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Text text text text</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

CSS

body {
    color: #fff;
}

#bokeh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: #000;
}

JavaScript

var bokeh = $("#bokeh");

for (var i = 0; i < 100; i++) {
    var max = 100;
    var min = 25;
    var radius = Math.round((Math.random() * (max-min)) + min);
    var left = Math.round(Math.random() * 100);
    var top = Math.round(Math.random() * 100);
    var circleStyle = "";
    circleStyle += "position: absolute; ";
    circleStyle += "top: " + top + "%; ";
    circleStyle += "left: " + left + "%; ";
    circleStyle += "border-radius: " + radius + "px; ";
    circleStyle += "width: " + (radius * 2) + "px; ";
    circleStyle += "height: " + (radius * 2) + "px; ";
    circleStyle += "box-shadow: " + ((radius * 2.25)) + "px 0 " + (radius * .25) + "px #77F; ";
    circleStyle += "margin-left: -" + ((radius * 2.25)) + "px; ";
    circleStyle += "background: transparent; ";
    circleStyle += "opacity: .2; ";
    bokeh.append('<div style="' + circleStyle + '"></div>');
}