JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

<div class="blocks">
</div>

CSS

html, body {
    min-height: 1%;
    height 100%;
    background: #000;
}

.blocks {
    width: 100%;
    height: 100%:
}

.block {
    position: absolute;
    height: 25px;
    width: 25px;
    border-radius: 25px;
}

JavaScript

function randomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[ Math.round( Math.random() * 15 ) ];
    }
    return color;
}

var mouseX = 0;
var mouseY = 0;

function randomPosition() {
    var height = $("body").height(),
        width = $("body").width;
    return { 'top': height, 'left': width };
}

function glow( current, event ) {
        current.animate({
            top: Math.round( Math.random() * 50 ) + mouseY,
            left: Math.round( Math.random() * 50 ) + mouseX,
            height: Math.round( Math.random() * 50 ),
            width: Math.round( Math.random() * 50 ),
            borderRadius: Math.round( Math.random() * 10 ),
            MozBorderRadius: Math.round( Math.random() * 10 ),
            opacity: '0'
        }, Math.floor( Math.random() * 1000 ), function(){
            $(this).animate({
                top: Math.round( Math.random() * 50 ) + mouseY,
                left: Math.round( Math.random() * 50 ) + mouseX,
                opacity: '1'
            }, Math.floor( Math.random() * 1000 ), function(){
                $(this).glow();
            });
        });
}

$.fn.glow = function(){
    
    var o = $(this).each(function( index ){
        var current = $(this);
        
        glow( current );
        
    });
    
        
    return o;
};

$.fn.blocks = function(){
    
    var maxBlocks = 100,
        current = $(this);
    
    for( var i=0; i<maxBlocks; i++ ){
        var color = randomColor(),
            position = randomPosition();
        
        $("<div class=block></div>")
            .css({
                background: color,
                top: Math.random() * 500 + 'px',
                left: Math.random() * 500 + 'px'
            })
            .appendTo(current)
            .glow();
        
    }
    
    
    return current;
};

$(function(){
    
    $("*").mousemove( function(e) {
       mouseX = e.pageX; 
      ...