Pepsi

Logo recreated using pure HTML and CSS3. No images. No JS.

HTML

<div id="pepsi">
  <div class="red1"></div>
  <div class="red2"></div>
  <div class="red3"></div>
  <div class="blue1"></div>
  <div class="blue2"></div>
  <div class="blue3"></div>
  <div class="white1"></div>
  <div class="white2"></div>
  <div class="drop1 drop"></div>
  <div class="drop2 drop"></div>
  <div class="drop3 drop"></div>
  <div class="drop4 drop"></div>
  <div class="drop5 drop"></div>
  <div class="drop6 drop"></div>
</div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#pepsi {
  background: #fff;
  border-radius: 50%;
  height: 220px;
  position: relative;
  width: 220px;
}

#pepsi * {
  position: absolute;
}

#pepsi .red1,
#pepsi .red2,
#pepsi .red3 {
  background: #ee3a43;
}

#pepsi .red1 {
  border-radius: 200px 0 0 0;
  clip: rect(0px 200px 79px 0);
  height: 100px;
  left: 10px;
  top: 10px;
  width: 100px;
}

#pepsi .red2 {
  border-radius: 0 200px 0 0;
  clip: rect(0px 200px 92px 0);
  height: 100px;
  left: 110px;
  top: 10px;
  width: 100px;
}

#pepsi .red3 {
  border-radius: 161px/117px;
  clip: rect(103px 140px 117px 30px);
  height: 117px;
  left: -17px;
  top: -15px;
  width: 161px;
}

#pepsi .blue1,
#pepsi .blue2,
#pepsi .blue3 {
  background: #016aab;
}

#pepsi .blue1 {
  border-radius: 0 0 0 200px;
  bottom: 10px;
  clip: rect(8px 200px 100px 0);
  height: 100px;
  left: 10px;
  width: 100px;
}

#pepsi .blue2 {
  border-radius: 0 0 200px 0;
  bottom: 10px;
  clip: rect(22px 200px 100px 0);
  height: 100px;
  left: 110px;
  width: 100px;
}

#pepsi .blue3 {
  border-radius: 161px/117px;
  clip: rect(0 132px 15px 29px);
  height: 117px;
  left: 75px;
  top: 118px;
  width: 161px;
}

#pepsi .white1 {
  background: #ffffff;
  border-radius: 161px/117px;
  clip: rect(0 136px 22px 0);
  height: 117px;
  left: 75px;
  position: absolute;
  top: 81px;
  width: 161px;
}

#pepsi .white2 {
  background: #ffffff;
  border-radius: 161px/117px;
  clip: rect(95px 136px 117px 0);
  height: 117px;
  left: -17px;
  position: absolute;
  top: 22px;
  width: 161px;
}

#pepsi .drop {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 26px/30px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
  height: 30px;
  opacity: 0.6;
  width: 26px;
}

#pepsi .drop:before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
  border-radius: 20px;
  content: "";
  height: 20px;
  left: 4px;
  position: absolute;
  top: 2px;
  width: 18px;
}

#pepsi .drop:after {
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%);
  box-shadow: 0 2px 0 #fff;
  content: "";
  height: 24px;
  left: 1px;
  position: absolute;
  top: 3px;
  width: 24px;
}

#pepsi .drop1 {
  left: 80px;
  top: 80px;
}

#pepsi .drop2 {
  left: 33px;
  top: 50px;
  transform: scale(0.6);
}

#pepsi .drop3 {
  left: 150px;
  top: 136px;
  transform: scale(0.7);
}

#pepsi .drop4 {
  left: 145px;
  top: 169px;
}

#pepsi .drop5 {
  left: 130px;
  top: 26px;
  transform: scale(0.9);
}

#pepsi .drop6 {
  left: 50px;
  top: 138px;
  transform: scale(0.7);
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200