JSFiddle - React, Tailwind, and code Playground

by andbas

HTML

<div class="hex"></div>

CSS

body {
    background:#EEE;
}

.hex {
	display:none;
	background:url("https://dl.dropboxusercontent.com/u/66584/tumblr/hex/img/layout/hexagon.png") no-repeat 0 0;
	width:195px;
	height:221px;
	z-index:-1;
}

JavaScript

function initHex() {

        var $rndNum = Math.floor(Math.random() * 8) + 5;
        for (var i = 0; i < $rndNum ; i++) {
            var $docHeight = $(window).height()
              , $top = Math.random() * $docHeight * 2
              , $docWidth = $(window).width()
              , $left = Math.random() * $docWidth - 195
              , $rndOpacity = Math.random()
              , $rndSpeed = Math.floor(Math.random() * 2000) + 2000;
            $('<div></div>').addClass('hex').css({
                position:   'absolute',
                top:        $top,
                left:       $left,
                opacity:    $rndOpacity
            }).prependTo('body').delay(1000).fadeIn($rndSpeed).delay(1000).fadeOut($rndSpeed*2, function(){
               this.remove();
            });
        }
    }

    setInterval(initHex, 12000);