Create BP logo without using image and javascript only use CSS.

CSS Magic:

HTML

<div id="bp">
    <div class="canvas">
        <div class="icon">
            <div class="circle1">
                <div class="leaf"><div class="leaf"><div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"></div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
            </div>
            <div class="circle2">
                <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"></div> </div> </div> </div> </div></div> </div> </div> </div> </div> </div></div> </div></div> </div> </div> </div> </div>
            </div>
            <div class="circle3">
                <div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div></div></div>   
            </div>
            <div class="circle4">
                <div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"><div class="leaf"></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div> </div></div></div>
            </div>
        </div>
    </div>
</div>

CSS : 

.canvas { 
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(250,250,250,0.2) inset, 0 2px 2px RGBA(0,0,0,0.5);
    height: 300px;
    overflow: hidden;
    position: relative;
    text-indent:-9999px;
    width: 530px;
    z-index: 10;
}
.icon, .icon * {
    position: absolute;
}#bp .canvas { 
    background: #f9f7e3;
}
#bp .icon {
    height: 200px;
    left:150px;
    position: absolute;
    top:50px;
    width: 200px;
}
#bp .circle1 {
    left: 69px;
    position: absolute;
    top:83px;
}
#bp .leaf {
    border-radius:40px/100px;
    bottom:0;
    height: 100px;
    left:24px;
    position: absolute;
    -moz-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    transform:rotate(20deg);
    width:40px;
}
#bp .leaf:before,
#bp .leaf:after {
    background: rgba(0,158,1,1);
    border-radius:137px/196px;
    clip:rect(15px 21px 127px 0px);
    content: "#";
    display: block;
    height: 141px;
    position: absolute;
    width: 98px;
    
}
#bp .leaf:before { 
    left:11px;
    top:5px;
}
#bp .leaf:after {
    left:-47px;
    top:5px;
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
#bp .circle2 {
    left: 77px;
    position: absolute;
    top: 82px;
    -moz-transform:rotate(10deg) scale(0.82);
    -webkit-transform:rotate(10deg) scale(0.82);
    transform:rotate(10deg) scale(0.82);
}
#bp .circle2 .leaf:before,
#bp .circle2 .leaf:after {
    background: rgba(128,195,0,1);
    clip:rect(13px 18px 134px 0px);
}
#bp .circle2 .leaf:before {
    left:14px;
}
#bp .circle2 .leaf:after {
    left:-50px;
}
#bp .circle3 {
    left: 80px;
    position: absolute;
    top: 90px;
    -moz-transform: scale(0.63);
    -webkit-transform: scale(0.63);
    transform: scale(0.63);
}
#bp .circle3 .leaf:before,
#bp .circle3 .leaf:after {
    background:rgba(255,240,1,1);
}
#bp .circle3 .leaf:before {
    clip:rect(13px 14px 133px 0px);
    left:18px;
}
#bp .circle3 .leaf:after {
    clip:rect(14px 14px 134px 0px);
    left:-54px;
}
#bp .circle4 {
    left: 87.5px;
    position: absolute;
    top: 90.5px;
    -moz-transform:rotate(10deg) scale(0.47);
    -webkit-transform:rotate(10deg) scale(0.47);
    transform:rotate(10deg) scale(0.47);
}
#bp .circle4 .leaf:before,
#bp .circle4 .leaf:after {
    background: rgba(255,255,255,1);
    clip:rect(13px 10px 134px 0px);
}
#bp .circle4 .leaf:before {
    left:22px;
}
#bp .circle4 .leaf:after {
    left:-58px;
}