JSFiddle - React, Tailwind, and code Playground

by patrick_dw

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/ui-lightness/jquery-ui.css">

CSS

html,body{width:100%;height:100%;padding:0;margin:0;}
.init {
    border-color:orange;
    border-style:solid;
    width:0;
    height:0;
    overflow:hidden;
    border-radius:0;
    position:absolute;
}

JavaScript

var positions = {},
    b = $(document.body),
    temp = $('<div>', {
            'class': 'init',
        })[0];

function make_loop() {
    var w = b.width() - 35 + 70,
        h = b.height() - 35 + 70,
        top = ~~ (Math.random() * h),
        left = ~~ (Math.random() * w),
        l = left - (left % 90),
        t = top - (top % 90) - (((l % 180) / 90) * 45);
    
    $(temp.cloneNode(false))
        .css({ top: t,
               left: l
            })
        .appendTo(b)
        .animate({
            width: 50,
            height: 50,
            top: '-=35',
            left: '-=35',
            borderRadius: 40,
            borderWidth: 10
    }, function() {
        if ('-' + t + '-' + l in positions) {
            $(positions['-' + t + '-' + l]).remove();
        }
        positions['-' + t + '-' + l] = this;
    });

}
setInterval(make_loop, 100);
b.delegate('.init', 'mouseenter', function() {
    this.style.opacity = .5;
    $(this).animate({
        width: '-=10',
        height: '-=10',
        top: '+=5',
        left: '+=5'
    }, 100);
}).delegate('.init', 'mouseleave', function() {
    this.style.opacity = 1;
    $(this).animate({
        width: '+=10',
        height: '+=10',
        top: '-=5',
        left: '-=5'
    }, 100)
}).delegate('.init', 'click', function() {
   // $(this).remove();
        $(this).css({background:'orange',opacity:.5});
});