JSFiddle - React, Tailwind, and code Playground

by Mario Winkler

HTML

<div id="structure" class="1"></div>
<div class="count">
    Elementcount = 
    <span id="elemcount">1</span>
</div>

CSS

#structure {
    width:500px;
    height:500px;
    border:1px solid #ccc;
    background-color:#fff;
    margin:20px auto auto;
}

.lay {
    width:100%;
    height:100%;
    float:left;
}

.h {
    height:49.9999%;
    margin:-5px 0 5px -5px;
}

.w {
    width:49.9999%;
}

.count {
    position:relative;
    left:50%;
    margin-left:-250px;
    font-family:verdana;
    font-size:10px;
    margin-top:10px;
}

JavaScript

/*
    Structural Approximation
    Script Test
    by Mario Winkler
*/

/*global $, document*/

var MAXDEPTH = 12;

$(document).ready(function() {
    $("#structure").bind("mouseover", function(event) {

        //divide & conquer child
        var elem = $(this);

        // check insert level
        var oldClass = elem.attr("class");
        var lvl = 0;
        lvl = lvl + parseInt(oldClass.replace("lay", "").replace("w", "").replace("h", ""), 10);

        if (lvl < MAXDEPTH) {
            lvl++;
            var part = elem.clone(true);
            part.removeAttr("id");

            //divide horizontal + add depth level
            if (part.hasClass("w")) {
                part.attr("class", "lay h " + lvl);
            } else {
                part.attr("class", "lay w " + lvl);
            }


            // get single RGB values
            var rgbString = elem.css("backgroundColor");
            var color = {
                r: rgbString.substr(4, 3),
                g: rgbString.substr(9, 3),
                b: rgbString.substr(14, 3)
            };

            // darken childs background
            color.r = 255 - Math.floor(lvl * (255 / (MAXDEPTH)));
            color.g = 255 - Math.floor(lvl * (255 / (MAXDEPTH)));
            color.b = 255 - Math.floor(lvl * (255 / (MAXDEPTH)));

            part.css({
                backgroundColor: "rgb(" + color.r + "," + color.g + "," + color.b + ")"
            });

            //add childs
            part.appendTo(this);
            part.clone(true).appendTo(this);
        }

        event.stopPropagation();
        elem.unbind();
        $("#elemcount").html($(".lay").length);
    });

});