JSFiddle - React, Tailwind, and code Playground

by Michael Vashevko

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id='canvas'></div>

CSS

.box {
  position: absolute;
  zborder: 1px solid black;
  border-radius: 50%;
  box-sizing: border-box;
  cursor: pointer;
}

JavaScript

var Box = function (canvas, x, y, w, h, c) {

	var newColor = function (clr) {
  	var d = parseInt(clr, 16) * 15 / 16;
    d = Math.random() * 256;
    var hex = Math.floor(d).toString(16);
    while (hex.length < 2) {
        hex = "0" + hex;
    }
    return hex; 
  };
  
  var self = this;
	var box = $('<div class="box"></div>')
  	.css('background-color', c)
  	.css('left', x + 'px')
  	.css('top', y + 'px')
  	.css('width', w + 'px')
  	.css('height', h + 'px')
    .on('mousemove', function () {
    	if (w < 2) return;
      
    	if (self.justCreated) {
      	self.justCreated = false;
        return;
      }

    	this.remove();

    	var c1 = '#' +
      [
        newColor(c.substr(1,2)),
        newColor(c.substr(3,2)),
        newColor(c.substr(5,2))
      ].join('');
      
    	new Box(canvas, x, y, w/2, h/2, c1);
    	new Box(canvas, x + w/2, y, w/2, h/2, c1);
    	new Box(canvas, x, y + h/2, w/2, h/2, c1);
    	new Box(canvas, x + w/2, y + h/2, w/2, h/2, c1);
    });
	canvas.append(box);
  this.justCreated = true;
};

new Box($('#canvas'), 0, 0, 1024, 1024, '#000088');