Animated SVG

HTML

<svg width="360px" height="47px" viewBox="0 0 36 47" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logo" transform="translate(-7.000000, -2.000000)" fill="#222222">
            <g id="Padlock" transform="translate(7.000000, 2.000000)">
                <path class="base" d="M16.2,33.7970374 L16.2,37.7884615 L19.8,37.7884615 L19.8,33.7970374 C21.3893143,33.099669 22.5,31.5070191 22.5,29.6538462 C22.5,27.1579439 20.4852814,25.1346154 18,25.1346154 C15.5147186,25.1346154 13.5,27.1579439 13.5,29.6538462 C13.5,31.5070191 14.6106857,33.099669 16.2,33.7970374 Z M3.6,17 L32.4,17 C34.3882251,17 36,18.6117749 36,20.6 L36,43.2269231 C36,45.2151482 34.3882251,46.8269231 32.4,46.8269231 L3.6,46.8269231 C1.6117749,46.8269231 2.4348735e-16,45.2151482 0,43.2269231 L0,20.6 C-2.4348735e-16,18.6117749 1.6117749,17 3.6,17 Z" id="Combined-Shape"></path>
                <path id="loop" cx="50" cy="50" d="M25.8680332,23 L25.8680332,13.1901449 C25.8680332,8.90051169 22.405396,5.42307692 18.1340166,5.42307692 C13.8626372,5.42307692 10.4,8.90051169 10.4,13.1901449 L10.4,23 L5,23 L5,13.1901449 C5,5.905429 10.8802995,0 18.1340166,0 C25.3877336,0 31.2680332,5.905429 31.2680332,13.1901449 L31.2680332,23 L25.8680332,23 Z" id="Combined-Shape" fill-rule="nonzero"></path>
            </g>
        </g>
    </g>
    <animate 
           xlink:href="#loop"
           attributeName="cx"
           from="50"
           to="500" 
           dur="1s"
           begin="click"
           fill="freeze" />
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg onactivate="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) {

          ...