CSS animated SVG

by simurai

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="79.5px" viewBox="0 0 100 79.5" enable-background="new 0 0 100 79.5" xml:space="preserve">
<path id="path1" d="M45.811,30.889H11.669l-6.483-3.677c-1.668-0.946-3.787-0.361-4.733,1.308c-0.946,1.668-0.36,3.788,1.308,4.734l7.962,4.514
    v36.178c0,3.067,2.487,5.555,5.555,5.555c3.069,0,5.556-2.487,5.556-5.555V59.292l10.512,17.505c0,0.003,0.001,0.005,0.003,0.007
    c1.578,2.63,4.991,3.483,7.622,1.902c2.63-1.58,3.483-4.992,1.904-7.623L31.749,55.89h21.029v18.056
    c0,3.067,2.488,5.555,5.556,5.555c3.068,0,5.557-2.487,5.557-5.555V55.762c0.806-0.288,1.388-1.051,1.388-1.956V39.223l0.027-0.03
    L45.811,30.889z"/>
<rect x="86.11" y="22.556" width="13.89" height="2.777"/>
<rect x="83.149" y="12.798" transform="matrix(0.8673 -0.4978 0.4978 0.8673 4.8952 46.7339)" width="13.89" height="2.777"/>
<rect x="76.112" y="5.328" transform="matrix(0.4966 -0.868 0.868 0.4966 35.9792 75.4719)" width="13.889" height="2.778"/>
<path id="path2" d="M70.833,25.333l5.557-9.722L69.444,4.5L56.847,18.58L50,17l1.804,7.217l-3.042,3.4l19.489,8.302l9.526-10.586H70.833z
     M63.194,21.167c-1.15,0-2.084-0.932-2.084-2.083c0-1.151,0.934-2.083,2.084-2.083s2.083,0.932,2.083,2.083
    C65.277,20.234,64.345,21.167,63.194,21.167z"/>
</svg>

CSS

body { padding: 50px; }

#path1 {fill:yellow; stroke: #000; stroke-width:3;
    -webkit-transition: fill 1s;
}
#path2 {fill:red; stroke: #000; stroke-width:3; }

#path1:hover {fill:red; }

JavaScript

// Blog: https://plus.google.com/110156363849628236019/posts/HgpJLm1V53s


// SVG icons from http://thenounproject.com/