BP
Logo recreated using pure HTML and CSS3. No images. No JS.
HTML
<div id="bp">
<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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
CSS
#bp {
height: 200px;
overflow: hidden;
position: relative;
width: 200px;
}
#bp * {
position: absolute;
}
#bp .leaf {
border-radius: 50%;
bottom: 0;
font-size: 0;
height: 100px;
left: 24px;
transform: rotate(20deg);
width: 40px;
}
#bp .leaf:before,
#bp .leaf:after {
background: #009e01;
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;
transform: rotate(180deg);
}
#bp .circle1 {
left: 69px;
top: 83px;
}
#bp .circle2 {
left: 77px;
top: 82px;
transform: rotate(10deg) scale(0.82);
}
#bp .circle2 .leaf:before,
#bp .circle2 .leaf:after {
background: #80c300;
clip: rect(13px 18px 134px 0px);
}
#bp .circle2 .leaf:before {
left: 14px;
}
#bp .circle2 .leaf:after {
left: -50px;
}
#bp .circle3 {
left: 80px;
top: 90px;
transform: scale(0.63);
}
#bp .circle3 .leaf:before,
#bp .circle3 .leaf:after {
background: #fff001;
}
#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;
top: 90.5px;
transform: rotate(10deg) scale(0.47);
}
#bp .circle4 .leaf:before,
#bp .circle4 .leaf:after {
background: #fff;
clip: rect(13px 10px 134px 0px);
}
#bp .circle4 .leaf:before {
left: 22px;
}
#bp .circle4 .leaf:after {
left: -58px;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200