Twitter

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

HTML

<div id="twitter" class="icon">
  <div class="twitter1 draw"></div>
  <div class="twitter2 mask"></div>
  <div class="twitter3 draw"></div>
  <div class="twitter4 mask"></div>
  <div class="twitter5 draw"></div>
  <div class="twitter6 draw"></div>
  <div class="twitter7 draw"></div>
  <div class="twitter8 mask"></div>
  <div class="twitter9 draw"></div>
  <div class="twitter10 draw"></div>
  <div class="twitter11 mask"></div>
  <div class="twitter12 draw"></div>
  <div class="twitter13 draw"></div>
  <div class="twitter14 draw"></div>
  <div class="twitter15 draw"></div>
  <div class="twitter16 draw"></div>
  <div class="twitter17 draw"></div>
  <div class="twitter18 draw"></div>
  <div class="twitter19 draw"></div>
  <div class="twitter20 draw"></div>
  <div class="twitter21 draw"></div>
  <div class="twitter22 draw"></div>
</div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#twitter {
  background: #33ccff;
  height: 200px;
  overflow: hidden;
  position: relative;
  width: 290px;
}

#twitter * {
  position: absolute;
}

#twitter .draw {
  background: white;
}

#twitter .mask {
  background: #33ccff;
}

#twitter .twitter1,
#twitter .twitter3 {
  border-radius: 56px/33px;
  height: 33px;
  width: 56px;
}

#twitter .twitter1 {
  clip: rect(17px 70px 40px 0);
  left: 234px;
  top: 72px;
  transform: skewy(-4deg);
}

#twitter .twitter3 {
  clip: rect(18px 70px 40px 0);
  left: 232px;
  top: 56px;
  transform: skewy(-5deg);
}

#twitter .twitter2,
#twitter .twitter4 {
  border-radius: 38px/10px;
  height: 10px;
  width: 38px;
}

#twitter .twitter2 {
  left: 254px;
  top: 83px;
  transform: rotate(5deg);
}

#twitter .twitter4 {
  left: 251px;
  top: 67px;
}

#twitter .twitter5 {
  border-radius: 148px;
  clip: rect(0 150px 72px 60px);
  height: 148px;
  left: 109px;
  top: 16px;
  width: 148px;
}

#twitter .twitter6 {
  border-radius: 258px/167px;
  bottom: 0;
  clip: rect(50px 130px 170px 0px);
  height: 167px;
  left: -5px;
  width: 258px;
}

#twitter .twitter7 {
  border-radius: 259px/208px;
  bottom: 0;
  clip: rect(91px 260px 220px 127px);
  height: 208px;
  left: -3px;
  transform: skewx(-5deg);
  width: 259px;
}

#twitter .twitter8 {
  border-radius: 149px;
  height: 149px;
  left: -22px;
  top: 16px;
  width: 149px;
}

#twitter .twitter9,
#twitter .twitter10 {
  border-radius: 63px/157px;
  height: 157px;
  width: 63px;
}

#twitter .twitter9 {
  clip: rect(49px 20px 160px 0px);
  left: 149px;
  top: -20px;
  transform: rotate(27deg);
}

#twitter .twitter10 {
  clip: rect(26px 20px 50px 0px);
  left: 149px;
  top: -20px;
  transform: rotate(27deg);
}

#twitter .twitter11 {
  height: 10px;
  left: 182px;
  top: 3px;
  transform: rotate(20deg);
  width: 10px;
}

#twitter .twitter12 {
  border-radius: 8px/30px;
  height: 30px;
  left: 198px;
  top: -3px;
  transform: rotate(66deg);
  width: 8px;
}

#twitter .twitter13 {
  border-radius: 7px 13px 0 0/64px;
  height: 44px;
  left: 180px;
  top: -8px;
  transform: rotate(53deg);
  width: 9px;
}

#twitter .twitter14 {
  border-radius: 27px 137px 137px 137px/50px;
  clip: rect(0 130px 7px 14px);
  height: 50px;
  left: 29px;
  top: 47px;
  transform: rotate(24deg) skewx(32deg);
  width: 137px;
}

#twitter .twitter15 {
  border-radius: 36px/58px;
  clip: rect(14px 8px 60px 0);
  height: 58px;
  left: 48px;
  top: 5px;
  transform: rotate(-31deg);
  width: 36px;
}

#twitter .twitter16 {
  clip: rect(0px 30px 3px 0);
  border-radius: 30px/10px;
  height: 10px;
  left: 50px;
  top: 59px;
  width: 30px;
}

#twitter .twitter17 {
  clip: rect(31px 76px 62px 0);
  border-radius: 80px/62px;
  height: 62px;
  left: 51px;
  top: 31px;
  transform: skewx(10deg);
  width: 80px;
}

#twitter .twitter18 {
  clip: rect(0px 30px 7px 0);
  border-radius: 30px/20px;
  height: 20px;
  left: 64px;
  top: 91px;
  width: 30px;
}

#twitter .twitter19 {
  clip: rect(16px 40px 34px 0);
  border-radius: 40px 40px 40px 40px/34px;
  height: 34px;
  left: 65px;
  top: 81.5px;
  transform: skewx(23deg);
  width: 40px;
}

#twitter .twitter20 {
  border-radius: 40px 60px/34px;
  height: 34px;
  left: 86px;
  top: 109px;
  transform: rotate(-20deg) skewx(10deg) scale(0.9);
  width: 50px;
}

#twitter .twitter21 {
  background: none;
  border: 56px solid white;
  border-right: 59px solid transparent;
  border-top: 33px solid transparent;
  height: 0;
  left: 77px;
  top: 30px;
  transform: skewx(30deg);
  width: 0;
}

#twitter .twitter22 {
  background: none;
  border: 20px solid transparent;
  border-right-color: white;
  border-bottom-color: white;
  top: 54px;
  left: 130px;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200