Complex Shapes with Border Radius and Overflow

HTML

<div id="a0">
<div id="a1">
    <div class="sect" id="a2" data-tint="#Faa" data-fade="#755" data-neut="#965" data-focus="#F43">
        <div class="sect" id="a3" data-tint="#dac" data-fade="#967" data-neut="#b69" data-focus="#F7e"></div>      
        <div class="sect" id="a4" data-tint="#cc9" data-fade="#775" data-neut="#996" data-focus="#dd5">
            <div class="sect center" id="a5" data-tint="#fff" data-fade="#ccc" data-neut="#ccc" data-focus="#fff"></div>
        </div>    
    </div>
</div>
<div id="a6">
    <div class="sect" id="a7" data-tint="#aaF" data-fade="#557" data-neut="#569" data-focus="#56F">
        <div class="sect" id="a8" data-tint="#add" data-fade="#687" data-neut="#7a9" data-focus="#6dd"></div>
    </div>
</div>
<div id="a9">
    <div class="sect" id="a10" data-tint="#afa" data-fade="#575" data-neut="#596" data-focus="#5F6"></div>
</div>
</div>

CSS

html, body {
    background: #fff;
    width: 100%;
    height: 100%;
}
body {
    -webkit-transition: box-shadow 0.5s, background 0.5s;
    box-shadow: inset 0 0px 100px #111 !important;
}
.sect {
    -webkit-transition: background 0.5s;
}
#a0 {
    position: absolute;
    width: 400px;
    height: 400px;
    font-size: 0;
    line-height: 0;
    left: 50%;
    margin-left: -200px;
    top: 50%;
    margin-top: -200px;
}
#a1 {
    position: absolute;
    top: 12.5%;
    left: 25%;
    height: 50%;
    width: 50%;
    z-index: 2;
}
#a2 {
    position: static;
    width: 100%;
    height: 100%;
    background: #965;
    border-radius: 50%;
    margin-top: 0;
    margin-left: 0;
    overflow: hidden;
}
#a3 {
    position: static;
    width: 100%;
    height: 100%;
    margin-top: 50%;
    margin-left: -25%;
    background: #b69;
    display: inline-block;
    border-radius: 50%;
    margin-bottom: -100%;
}
#a4 {
    position: static;
    width: 100%;
    height: 100%;
    margin-top: 0;
    margin-left: 25%;
    background: #996;
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
}
#a5 {
    position: static;
    width: 100%;
    height: 100%;
    margin-top: 0;
    margin-left: -50%;
    background: #ccc;
    display: inline-block;
    border-radius: 50%;
}
#a6 {
    position: absolute;
    top: 37.5%;
    left: 12.5%;
    z-index: 1;
    width: 50%;
    height: 50%;
}
#a7 {
    width: 100%;
    height: 100%;
    background: #569;
    border-radius: 50%;
    position: static;
    overflow: hidden;
}
#a8 {
    width: 100%;
    height: 100%;
    background: #7a9;
    border-radius: 50%;
    position: static;
    margin-left: 50%;
    display: inline-block;
}
#a9 {
    position: absolute;
    top: 37.5%;
    left: 37.5%;
    width: 50%;
    height: 50%;
}
#a10 {
    width: 100%;
    height: 100%;
    background: #596;
    border-radius: 50%;
    position: static;
}

JavaScript

$('.sect').on('mouseover', function(){
    
    $('.sect').each(function(){
       $(this).css('background', $(this).attr('data-fade'));  
    });
    $('.center').css('background', $(this).attr('data-tint'));
   $(this).css('background', $(this).attr('data-focus')); 
    $('body').addClass($(this).attr('id'));
    event.stopPropagation();
});
$('.sect').on('mouseout', function(){
   $('.sect').each(function(){
       $(this).css('background', $(this).attr('data-neut'));  
    });
    $('body').removeClass($(this).attr('id'));
    event.stopPropagation();
});