Standard way to draw images using only CSS3/HTML5 - case in point : HTML 5 logo ?

css, graphical-logo, html

Solution

This single tag logo will help you-

Pure css

<div id="css3icon" />

CSS-

#css3icon {
    outline:solid 1px transparent;
    display:inline-block;
    position:relative;
    height:0.8em; width:0.8em;
    background:transparent;
    color:transparent;
    line-height:0.8em;
    overflow:visible;
    box-shadow:
        0.8em  0 0 #38c,
        1.4em  0 0 #38c,
        2em 0 0 #38c,
        2.6em 0 0 #38c,
        3.2em 0 0 #38c,
        3.6em 0 0 #38c,
        4em 0 0 #38c,
        4em 0.65em 0 #38c,
        0.8em 1.3em 0 #38c,
        1.4em 1.3em 0 #38c,
        2em 1.3em 0 #38c,
        2.6em 1.3em 0 #38c,
        3.2em 1.3em 0 #38c,
        3.6em 1.3em 0 #38c,
        4em 1.3em 0 #38c,
        4em 1.9em 0 #38c,
        0.8em 2.6em 0 #38c,
        4em 2.6em 0 #38c;
    transform: skewX(-12deg);
    -webkit-transform: skewX(-12deg);
    -ms-transform: skewX(-12deg);   
}
#css3icon:before {
    position:absolute;
    content:''; 
    display:block;
    height:0.8em; width:2em;
    margin:3.4em 0 0 0.8em;
    background:#38c;
    transform: skew(-1deg,18.4deg); 
    transform-origin: 100% 100%;
    -webkit-transform: skew(-1deg,18.4deg); 
    -webkit-transform-origin: 100% 100%;
    -ms-transform: skew(-1deg,18.4deg); 
    -ms-transform-origin: 100% 100%;
    border-right:solid 1px #38c;
}
#css3icon:after {
    position:absolute;
    content:''; 
    display:block;
    height:0.8em; width:2em;
    margin:3.4em 0 0 2.8em;
    background:#38c;
    transform: skew(1deg,-18.4deg); 
    transform-origin: 0% 100%;
    -webkit-transform: skew(1deg,-18.4deg); 
    -webkit-transform-origin: 0 100%;
    -ms-transform: skew(1deg,-18.4deg); 
    -ms-transform-origin: 0 100%;
}


body {
 width:100%;
 padding-top:1em;
 font-size:3em;
 text-align:center;
}
body > * { position:relative; left:-2.4em; }

Click Here For live example.

Problem

What is the most academic way to construct the HTML 5 logo in HTML 5 without using an `<img>` element or using canvas `drawImage`, or otherwise using the bitmap data of the image resource. In other words what is a way to exactly construct the HTML 5 logo using HTML 5, CSS3 and I would imagine DIVs and canvas draws? I'm not a CSS3 wizard and it looks pretty daunting, say 100+ lines, it would be good to know a standard way to break this problem down. It's quite an interesting programming problem. The logo itself is pretty cool, and looks very HTML 5/CSS3.

Original source