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