Final SVG

Completed SVG from Introductory post on animation

HTML

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<svg onclick="menu(evt)" width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
    <script type="application/ecmascript">
        <![CDATA[

        function menu(evt) {

            var trigger = document.getElementById("trigger");

            if (typeof clicked === 'undefined') {

                clicked = true;

                trigger.setAttribute("from", "0 30 30");
                trigger.setAttribute("to", "-90 20 20");

            } else {

                delete clicked;

                trigger.setAttribute("from", "-90 20 20");
                trigger.setAttribute("to", "0 30 30");
            }
        }]]>
    </script>
    <g stroke="none" fill="#444">
        <rect x="10" y="10" width="30" height="2" />
        <rect x="10" y="20" width="22.5" height="2" fill="#666" />
        <rect x="10" y="30" width="15" height="2" fill="#999" />
        <rect x="0" y="0" width="60" height="60" fill="transparent" stroke="none" stroke-width="0" />
        <animateTransform id="trigger" begin="click" attributeName="transform" type="rotate" additive="replace" from="0 30 30" to="-90 20 20" dur="0.5s" fill="freeze" />
    </g>
</svg>