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