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