SVG Animation - Running

Learn how to create SVG Animation - Running using html, css and/or js.

<!-- By Levallois Cyril

Here is the reference I used for the run :
http://yianniseanimation.files.wordpress.com/2014/04/run.jpg

-->
<svg 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
     style="max-height:800px;height:90vh;width:100%"
     viewBox="0 0 400 400" 
     xml:space="preserve">
	 
<defs>
  <filter
       id="glow"
          width="20"
          x="-10">
      <feGaussianBlur
         id="GaussianBlur"
         stdDeviation="2"
         in="SourceGraphic"
         result="BlurResult" />
      <feComposite
         in2="BlurResult"
         in="SourceGraphic"
         operator="over" />
    </filter>
  <linearGradient
     id="chrome"><stop
       style="stop-color:#000000;stop-opacity:1;"
       offset="0"
       id="stop3816" /><stop
       id="stop3822"
       offset="0.612"
       style="stop-color:#e2e2e2;stop-opacity:1" /><stop
       style="stop-color:#d9d9d9;stop-opacity:1;"
       offset="0.734"
       id="stop3824" /><stop
       id="stop3826"
       offset="0.734"
       style="stop-color:#242424;stop-opacity:1;" /><stop
       style="stop-color:#444444;stop-opacity:1"
       offset="0.8174"
       id="stop3830" /><stop
       style="stop-color:#d5d5d5;stop-opacity:1;"
       offset="0.8348"
       id="stop3828" /><stop
       style="stop-color:#a7a7a7;stop-opacity:1;"
       offset="1"
       id="stop3818" /></linearGradient>
  <linearGradient id="linearGradient5090">
    <stop
          style="stop-color:#b38443;stop-opacity:1;"
          offset="0"
          id="stop5092" />
    <stop
          id="stop5098"
          offset="0.5"
          style="stop-color:#694d27;stop-opacity:1;" />
    <stop
       style="stop-color:#4f3a1e;stop-opacity:1;"
       offset="1"
       id="stop5094" />
  </linearGradient>
  <linearGradient  id="linearGradient5072">
    <stop
       style="stop-color:#888888;stop-opacity:1;"
       offset="0"
       id="stop5074" />
    <stop
       id="stop5086"
       offset="0.2385"
       style="stop-color:#707070;stop-opacity:1;" />
    <stop
       id="stop5080"
       offset="0.3664"
       style="stop-color:#ababab;stop-opacity:1;" />
    <stop
       style="stop-color:#9d9d9d;stop-opacity:1;"
       offset="0.8549"
       id="stop5082" />
    <stop
       style="stop-color:#cbcbcb;stop-opacity:1;"
       offset="1"
       id="stop5076" />
  </linearGradient>
  <radialGradient
     xlink:href="#linearGradient5072"
     id="radialGradient5088"
     cx="-0.2604"
     cy="-10.11"
     fx="-0.2604"
     fy="-10.11"
     r="4.361"
     gradientTransform="matrix(1.778,-0.4014,0.7006,3.099,7.308,20.75)"
     gradientUnits="userSpaceOnUse" ></radialGradient>
  <linearGradient 
     xlink:href="#linearGradient5090"
     id="linearGradient5096"
     x1="-0.3107"
     y1="-5.068"
     x2="2.185"
     y2="-5.068"
     gradientUnits="userSpaceOnUse" />
</defs>

<path style="fill:#222;stroke:none;fill-rule:nonzero" 
      id="leg2" 
      d="M 189.2,225.2 C 187,214.6 182.5,214 178.8,213 171.8,211 170.2,209.3 159.3,217.1 153,221.5 151,224.8 143,235.2 139.2,240.1 124.2,252.6 120.7,258.6 117.8,263.7 104.3,257.8 93.83,266.3 81.75,276 63.89,303.3 57.29,307.4 51.31,311.1 44.58,307.6 44.05,313.3 43.03,324.1 42.76,323.4 39.52,334.1 35.95,345.8 31.12,354.6 31.12,354.6 31.12,354.6 40.29,345.5 46.1,337.8 54.07,327.3 58.59,321.9 62.78,315.5 64.98,312.1 80.56,299.2 104.2,283.7 115.7,276.2 122.4,270.6 130.1,270.1 138.2,269.5 149.6,262.7 154.7,259.7 159.5,256.9 171.9,248.5 179.9,242.4 185.8,237.9 190.7,232.4 189.2,225.2 z">
    <animate attributeName="d"
             attributeType="XML"
             repeatCount="indefinite"
             fill="freeze"
             dur="1s"
             values="
                     M 189.2,225.2 C 187,214.6 182.5,214 178.8,213 171.8,211 170.2,209.3 159.3,217.1 153,221.5 151,224.8 143,235.2 139.2,240.1 124.2,252.6 120.7,258.6 117.8,263.7 104.3,257.8 93.83,266.3 81.75,276 63.89,303.3 57.29,307.4 51.31,311.1 44.58,307.6 44.05,313.3 43.03,324.1 42.76,323.4 39.52,334.1 35.95,345.8 31.12,354.6 31.12,354.6 31.12,354.6 40.29,345.5 46.1,337.8 54.07,327.3 58.59,321.9 62.78,315.5 64.98,312.1 80.56,299.2 104.2,283.7 115.7,276.2 122.4,270.6 130.1,270.1 138.2,269.5 149.6,262.7 154.7,259.7 159.5,256.9 171.9,248.5 179.9,242.4 185.8,237.9 190.7,232.4 189.2,225.2 z;
                     M 189.2,225.2 C 188.3,219.1 182.5,216 178.8,215 171.8,213 162.9,215.1 159,219.9 154.2,225.9 154,233.9 149.3,244.8 146.9,250.5 138.6,286.4 135.1,292.4 132.2,297.5 129.6,289.6 111.5,293.3 96.33,296.4 67.93,306.8 60.07,309.4 53.39,311.6 43.82,306.3 43.29,312 42.27,322.8 42.76,323.4 39.52,334.1 35.95,345.8 31.12,354.6 31.12,354.6 31.12,354.6 40.29,345.5 46.1,337.8 54.07,327.3 58.59,321.9 62.78,315.5 64.98,312.1 84.31,311.7 112.5,313.2 123.3,313.8 133.4,311.9 141,313.3 148.8,314.7 148.6,303.6 153.7,300.6 158.5,297.8 174.2,275.2 179.1,266.4 184.8,256.3 190.3,232.5 189.2,225.2 z;
                     M 201.4,216.1 C 199.2,205.5 192.6,206.1 188.9,205.1 181.9,203.1 176.8,207 172.9,211.8 168.1,217.8 171.5,233.4 166.8,244.3 164.4,250 166.7,256.1 163.2,262.1 160.3,267.2 163.2,260.1 142.9,253.9 128,249.5 116.4,253 107.8,251.1 100.9,249.5 99.38,241.4 93.29,248.9 86.44,257.3 87.72,264.3 82.2,272 75.06,281.9 72.03,285.9 72.03,285.9 72.03,285.9 82.64,286.2 89.54,279.5 100,269.3 100.3,267 108,262.3 111.1,260.3 122.5,266.6 147.6,279.9 162,287.5 164.4,292.3 171.3,288.8 176.1,286.4 179.1,279.1 182.3,274.1 188.8,264 190.9,254.7 195.8,245.9 201.5,235.8 202.9,223.3 201.4,216.1 z;
                     M 210.5,222.4 C 208,215.3 200.9,215.9 197.2,214.9 190.2,212.9 186.4,213.8 182.5,218.6 177.7,224.6 180.4,226.6 181.7,240 182.7,250.5 183.8,259.1 184.9,269.9 185.5,275.7 179.1,268.5 172.4,266.8 157.3,263.1 145.2,261.8 136.6,259.9 129.7,258.3 127.7,249.2 121.6,256.7 114.7,265.1 113.7,271.1 108.2,278.8 101.1,288.7 95.01,291.5 95.01,291.5 95.01,291.5 105.6,291.8 112.5,285.1 123,274.9 123.3,272.6 131,267.9 134.1,265.9 143.5,269.1 168.6,282.4 183,290 189.1,298.9 196,295.4 200.8,293 203.6,284.3 205.5,278.6 210,265.3 210.3,259.9 211.7,249.9 214.1,231.7 212.9,229.3 210.5,222.4 z;
                     M 209.9,222.8 C 207.4,215.7 203.6,212.2 200,210.5 193.4,207.3 188.8,209.6 184.9,214.4 180.1,220.4 183.7,234.5 188.3,247.2 193.1,260.3 199.6,262.5 203.3,273.2 205.3,278.7 199.8,273.6 193.1,271.9 178,268.2 170.9,272.8 162.1,272.5 152.7,272.2 151.4,265.9 147.6,270.3 140.5,278.6 145.8,283 145.3,294.5 144.6,312 150.8,314.2 150.8,314.2 150.8,314.2 150.7,308 154.2,296.2 156.8,287.3 156.4,284.7 159.5,281.3 162,278.6 167.2,281 192.3,285.9 208.3,289.1 215.9,296.9 220.5,290.6 223.5,286.4 222.3,277.1 221.4,271.2 220.5,264.8 219.1,261 217,251.2 213.1,232.5 212.3,229.7 209.9,222.8 z;
                     M 216.6,217.8 C 212.3,214.1 210.3,212.6 206.4,211.5 199.8,209.6 195.6,209.3 191.7,214.1 186.9,220.1 189.8,225.2 196.6,234.3 205,245.5 213,249 218.7,257.5 222,262.4 221.7,261.2 214.8,261.8 198.2,263.1 191.5,274.9 182.7,274.6 173.3,274.3 174,267.2 170.5,271.9 166.2,277.8 170.1,280.4 162.4,293.8 156.8,303.4 155.5,307.4 155.5,307.4 155.5,307.4 166.2,305.8 172.8,295.4 176.8,289 177.3,287.7 180.4,284.3 182.9,281.6 195.7,279.2 221.2,277.7 236.5,276.8 241.5,273.6 243.9,266.1 246.2,258.9 244.2,257.8 241.7,252.4 238.1,244.6 232.6,239.9 226.7,231.7 220,222.4 220.7,221.3 216.6,217.8 z;
                     M 224.9,202.7 C 218.3,201.3 210,199.5 206,200.1 197.8,201.2 191.9,206.1 192.4,215 193.1,226.6 207.4,226.3 217.1,231.2 227.2,236.4 246.6,235.1 252.3,243.6 255.6,248.5 255.9,244.6 249.4,247.2 235.7,252.6 231.8,269.8 224.6,271.4 219.5,272.6 214.5,270.4 213.7,278.3 213,285.6 219.9,290.7 223.4,307 225.8,317.9 232.8,322 232.8,322 232.8,322 230.3,303.3 230.1,295.6 229.9,285 227.8,281.4 230.9,278 233.4,275.3 238.2,269.8 263.9,259.1 277.7,253.4 276.2,251.8 277.3,244 278.4,236.8 265,226.9 260.3,223.1 256.2,219.8 250.8,216.9 242.7,210.8 236.5,206.2 231.5,204.2 224.9,202.7 z;
                     
                     M 198.1,209.3 C 187.3,210 178.3,210.7 178,218 177.7,225.3 185,236.6 200,236.3 215,236 235.3,236.6 245.7,236.3 256,236 257.3,236 256,239 254.7,242 251.3,253.3 250,268.3 248.7,283.3 252.7,303 253.3,310 254,317 251,326.7 261,324.3 271,322 280.7,318.7 289.3,311.7 298,304.7 298.2,301 298.2,301 298.2,301 283,306 276.7,306.7 270.3,307.3 259.5,307 259.3,304.3 259,301.7 258.3,288.3 265.3,269 272.3,249.7 275.7,240.7 277.3,234.7 279,228.7 280.7,222 268,218.7 255.3,215.3 238.4,212 220.4,211 202.3,210 205.3,208.9 198.1,209.3 z;
                     M 188.8,223 C 178,223.6 169,224.3 168.7,231.7 168.3,239 172.9,249.1 187.7,252 206.7,255.7 222,254.9 232.3,254 246.7,252.7 248,249.7 246.7,252.7 245.3,255.7 249.3,271 256.7,285 263.7,298.3 289.3,335.7 290,342.7 290.7,349.7 292.3,354.2 301.7,350 314.9,344 317.3,342.3 326,335.3 334.7,328.3 332.8,321.7 332.8,321.7 332.8,321.7 319.7,330.7 313.3,331.3 307,332 301.3,332.3 299.9,330 295.6,322.4 286.4,312 279,282.7 274,262.7 271.6,257 270,248.3 267.2,233.3 271.3,235.7 258.7,232.3 246,229 229.1,225.7 211,224.7 193,223.7 195.9,222.6 188.8,223 z;
                     M 190.7,203.2 C 180,203.8 178.6,208.4 178.3,215.8 177.9,223.1 182.6,222.3 191.8,234.1 203.1,248.6 219.5,261.9 227,269 231.5,273.3 230.9,275.5 231.6,278.8 232.6,283.3 231.6,288.5 231.6,309.8 231.6,324.8 234.8,344 233,351.6 231.4,358.5 225.7,365.4 236,365.4 250.5,365.4 260.6,365.4 271.8,365.4 286.5,365.4 285,358.8 285,358.8 285,358.8 271.5,356.8 262.3,354 256.1,352.2 243.8,346.3 242.5,344 238.2,336.4 241.8,325.4 248.4,295.8 251.6,281.6 253.3,278.8 254.5,272 255.4,266.9 253.1,261.5 244.3,254 234.2,245.6 223.8,231.8 213,217.8 202,203.4 197.9,202.8 190.7,203.2 z;
                     M 199.7,207.2 C 189,207.8 188.6,208.4 188.3,215.8 187.9,223.1 186.1,226.2 193.8,239.1 202.8,254.2 210.5,269.5 218,282.3 221.1,287.6 217.8,287 216.3,289.3 213,294.7 210.7,293.9 203.3,313.9 198,328.4 197.5,342 195.7,349.6 194.1,356.5 185.7,365.4 196,365.4 210.5,365.4 220.6,365.4 231.8,365.4 246.5,365.4 245,358.8 245,358.8 245,358.8 231.9,358.9 222.7,356.1 216.5,354.3 205.9,352.7 205.5,350 204.1,341.4 216.8,318.6 220.8,311 225.2,302.7 230.3,292.5 234.5,288 238,284.3 237.4,274.5 233.3,264 228.5,251.8 223.8,231.8 213,217.8 202,203.4 206.9,206.8 199.7,207.2 z;
                     M 193.7,204.2 C 183,204.8 180.7,206.7 180.3,214 180,221.3 180.5,226.6 184.7,241 189.3,257.3 191.3,264.7 196.7,282.3 198.5,288.3 195.9,288.1 193,289.7 187.4,292.7 187.4,292.7 181.3,307 175.3,321.2 168.1,335.2 166.4,342.8 164.8,349.7 157.7,350.3 166.5,355.6 175.8,361.2 185.6,365.4 196.7,365.4 211.5,365.4 211,358.8 211,358.8 211,358.8 201.3,357.9 192,355.1 185.9,353.3 175.8,343.6 176.5,341 178,335.3 184.9,322.4 194.9,311.6 205.9,299.9 209.8,291 214.1,286.5 217.6,282.8 215.6,274.3 215,263 214.4,251.3 212.7,243.9 210.3,231.7 207.4,216.8 200.9,203.8 193.7,204.2 z;
                     M 196.5,209.6 C 186.4,205.8 183.7,208.5 180.3,214 176.5,220.2 178.4,218.6 178.2,233.7 178,248.9 178.8,261.1 179.5,281.2 179.7,287.3 178.1,287.4 176,289.9 172.3,294.3 174.3,294 163.3,301.8 157.2,306.1 145,324.1 138.4,328.2 132.4,331.9 126.9,331.3 129.4,341.3 132,351.8 142.4,365.3 153.5,365.4 168.9,365.5 168.8,365 168.8,365 168.8,365 156,358.8 151.4,350.3 148.4,344.7 147.1,333.1 149.6,332.2 153.4,330.7 169.6,314.8 177.5,310.3 192.3,301.9 195.4,298.5 199.5,293.9 202.5,290.4 203.2,284.8 203.8,273.5 204.5,257.8 206.7,245.8 204.3,233.6 201.4,218.7 200.8,211.2 196.5,209.6 z;
                     M 194.5,207.3 C 184.2,203.9 180.7,206.7 180.3,214 180,221.3 181.3,217.4 176.7,231.7 174.3,239 170.9,258.4 167.2,272.1 165.6,278 165.6,278.1 162.1,284.1 159.2,289.2 146.5,287.3 136,295.8 123.9,305.5 110.1,318.5 103.5,322.6 97.52,326.3 86.77,319 89.25,329 91.88,339.5 91.74,360.5 102.4,363.6 110.6,366 118.5,365 118.5,365 118.5,365 105.5,358 106.2,348.4 107.1,336.1 107.1,331.5 110,328.6 112.9,325.8 129.8,314.3 154.7,307.2 167.9,303.4 173.7,303.8 178.3,297.6 182.7,291.7 187.7,279.6 192,269.1 200.4,248.5 206.6,238.9 205.7,224.2 204.7,209.1 203.3,210.1 194.5,207.3 z;
                     M 189.2,225.2 C 187,214.6 182.5,214 178.8,213 171.8,211 170.2,209.3 159.3,217.1 153,221.5 151,224.8 143,235.2 139.2,240.1 124.2,252.6 120.7,258.6 117.8,263.7 104.3,257.8 93.83,266.3 81.75,276 63.89,303.3 57.29,307.4 51.31,311.1 44.58,307.6 44.05,313.3 43.03,324.1 42.76,323.4 39.52,334.1 35.95,345.8 31.12,354.6 31.12,354.6 31.12,354.6 40.29,345.5 46.1,337.8 54.07,327.3 58.59,321.9 62.78,315.5 64.98,312.1 80.56,299.2 104.2,283.7 115.7,276.2 122.4,270.6 130.1,270.1 138.2,269.5 149.6,262.7 154.7,259.7 159.5,256.9 171.9,248.5 179.9,242.4 185.8,237.9 190.7,232.4 189.2,225.2 z "/>
</path>
  <g id="props">
  <animateTransform 
                    attributeName="transform" attributeType="XML"
                    type="translate"  dur="1s"
                    repeatCount="indefinite" fill="freeze"
                    values="
                            290.9,99.33;
                            295.3,133.8;
                            266.6,227.7;
                            228.9,246.7;
                            182.1,237.9;
                            155.7,225.9;
                            152.9,218.2;
                            143.7,188;
                            156,188.7;
                            182.4,207.7;
                            207.4,203.1;
                            258.8,185.5;
                            275.4,141.5;
                            293,106.6;
                            290.9,99.33"/>
<g id="rotated_prop"> 
  <animateTransform 
                    attributeName="transform" attributeType="XML"
                    type="rotate"  dur="1s"
                    repeatCount="indefinite" fill="freeze"
                    values="-120;
                            50;
                            90;
                            50;
                            -120"/>
  
  
  
  
  
  <g id="Axe"
     transform="scale(5),rotate(60)" visibility="hidden">
    <set attributeName="visibility" 
             begin="BtnAxe.click"
             fill="freeze"
             to="visible"/>
    <set attributeName="visibility" 
             begin="BtnKatana.click;BtnNone.click;BtnLightsaber.click"
             fill="freeze"
             to="hidden"/>
    <path
          id="manche"
          d="M 0.2491,-8.598 C 0.2491,-2.371 -0.0623,-0.5029 -0.1868,0.8047 -0.3113,2.112 -0.6227,1.926 0.6849,2.299 1.993,2.673 2.553,2.361 1.93,1.552 1.308,0.7425 1.121,-3.056 1.432,-5.048 1.743,-7.041 2.428,-12.89 1.494,-12.58 0.5604,-12.27 -0.1868,-12.4 0,-11.84 0.1868,-11.28 0.2491,-9.968 0.2491,-8.598 z"
          style="fill:url(#linearGradient5096);fill-opacity:1;fill-rule:nonzero;stroke:none" />
    <path
          id="blade"
          d="M -0.6849,-11.52 C -0.6849,-11.52 1.868,-12.08 3.3,-13.08 4.732,-14.08 5.542,-15.2 5.48,-15.88 5.417,-16.57 5.48,-17.13 5.48,-17.13 5.48,-17.13 7.161,-16.13 7.597,-13.89 8.032,-11.65 7.97,-11.21 7.97,-11.21 L 7.348,-11.28 7.97,-10.84 C 7.97,-10.84 8.157,-9.905 7.908,-9.158 7.659,-8.411 7.348,-8.162 7.348,-8.162 7.348,-8.162 6.414,-10.22 4.11,-9.781 1.806,-9.345 1.993,-8.971 1.993,-8.971 1.993,-8.971 0.4359,-8.349 0.0623,-8.411 -0.3113,-8.473 -0.2491,-8.722 -0.2491,-8.722 z"
          style="fill:url(#radialGradient5088);fill-opacity:1;fill-rule:nonzero;stroke:none" />
  </g>  
  <g   id="katana" transform="scale(4),rotate(60)" visibility="hidden">
    <set attributeName="visibility" 
             begin="BtnKatana.click"
             fill="freeze"
             to="visible"/>
    <set attributeName="visibility" 
             begin="BtnAxe.click;BtnNone.click;BtnLightsaber.click"
             fill="freeze"
             to="hidden"/>
    
    
    <path
     id="path5106"
     d="M 0.1321,-3.622 C 0.1321,-3.622 0.4636,-9.192 -1.312,-18.56 -3.781,-31.59 -5.925,-35.54 -5.925,-35.54 L -4.362,-34.02 C -4.362,-34.02 -1.285,-26.66 0.0472,-17.58 1.374,-8.542 1.365,-3.562 1.365,-3.562 z"
     style="fill:url(#radialGradient5088);fill-opacity:1;fill-rule:nonzero;stroke:none" /><path
     id="path5104"
     d="M -0.6165,10.95 C -0.6165,10.95 0.088,10.27 0.088,4.853 0.088,-0.5624 0.044,-3.702 0.044,-3.702 L -1.233,-3.662 -1.233,-3.972 2.598,-4.062 2.598,-3.702 1.409,-3.752 C 1.409,-3.752 1.805,1.444 1.541,5.451 1.277,9.458 0.8365,11.31 0.8365,11.31 z"
     style="fill:#283426;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g>
  
<g id="lightsaber"
     visibility="hidden"
     transform="rotate(70)">
   <rect
         style="fill:#161616;"
         width="5.253"
         height="24.81"
         x="-0.1811"
         y="3.294" />
    <rect
          ry="11.39"
          y="-1.5"
          x="-1.221"
          height="10"
          width="4.795"
          id="rect3948"
          style="fill:white;stroke:red;stroke-width:1" 
          transform="scale(1,-1)" 
          filter="url(#glow)">
      
      <animate attributeName="height"
               begin="BtnOn.click"
               to="175"
               fill="freeze"
               dur="0.3s" />
      <animate attributeName="height"
               begin="BtnOff.click;BtnAxe.click;BtnNone.click;BtnKatana.click"
               to="10"
               fill="freeze"
               dur="0.3s"/>
      
      <animate attributeName="stroke"
               to="red"
               begin="BtnRed.click"
               dur="0.5s" fill="freeze"/>
      <animate attributeName="stroke"
               to="lime"
               begin="BtnGreen.click"
               dur="0.5s" fill="freeze"/>
      <animate attributeName="stroke"
               to="lightblue"
               begin="BtnBlue.click"
               dur="0.5s" fill="freeze"/>
          </rect>
    <path
          style="fill:url(#chrome);fill-opacity:1;stroke:none"
          d="M 5.312 -1.469 L -3.344 -1.469 L -3.344 30.66 L 5.312 30.66 L 5.312 27.56 L 3.125 27.56 C 2.496 27.56 1.958 27.34 1.562 26.94 C 1.165 26.54 0.9062 25.94 0.9062 25.34 L 0.9062 6.25 C 0.9062 5.64 1.165 5.066 1.562 4.656 C 1.958 4.246 2.499 4 3.125 4 L 5.312 4 L 5.312 -1.469 z " />
    <path
          style="fill:#222222;fill-opacity:1;stroke:none"
          d="m 5.496,-1.625 -9.039,0 0.199,0.156 8.656,0 z"/>
    <path
          style="fill:url(#chrome);fill-opacity:1.0;stroke:none"
          d="m -3.548,-12.97 0,11.345 9.064,0 0,-11.345 -9.064,0 z"/>
    <path
          style="fill:#5a5a5a;fill-opacity:1;stroke:none"
          d="m 5.312,-13.12 -8.656,0 0,0.15 8.656,0 z"/>
    <path
          style="fill:url(#chrome);fill-opacity:1;stroke:none"
          d="M 5.312 -21.03 C 2.424 -21.03 -0.4566 -13.47 -3.344 -13.47 L -3.344 -13.12 L 5.312 -13.12 L 5.312 -21.03 z "/>
    <path
          d="M 1.498,4.77 C 1.214,5.1 1.023,5.52 0.9586,5.97 l 4.2944,0 c 0.433,0 0.353,-0.29 0.353,-0.61 0,-0.31 0.08,-0.59 -0.353,-0.59 z m -0.5994,1.85 0,1.2 4.3544,0 c 0.433,0 0.353,-0.3 0.353,-0.61 0,-0.31 0.08,-0.59 -0.353,-0.59 z m 0,1.92 0,1.13 4.3544,0 c 0.433,0 0.353,-0.24 0.353,-0.54 0,-0.33 0.08,-0.59 -0.353,-0.59 z m 0,1.97 0,1.15 4.3544,0 c 0.433,0 0.353,-0.24 0.353,-0.54 0,-0.33 0.08,-0.61 -0.353,-0.61 z m 0,2.11 0,1.12 4.3544,0 c 0.433,0 0.353,-0.2 0.353,-0.53 0,-0.31 0.08,-0.59 -0.353,-0.59 z m 0,1.97 0,1.13 4.3544,0 c 0.433,0 0.353,-0.28 0.353,-0.59 0,-0.31 0.08,-0.54 -0.353,-0.54 z m 0,1.78 0,1.21 4.3544,0 c 0.433,0 0.353,-0.29 0.353,-0.6 0,-0.32 0.08,-0.61 -0.353,-0.61 z m 0,1.99 0,1.12 4.3544,0 c 0.433,0 0.353,-0.22 0.353,-0.59 0,-0.3 0.08,-0.53 -0.353,-0.53 z m 0,1.97 0,1.12 4.3544,0 c 0.433,0 0.353,-0.3 0.353,-0.6 0,-0.29 0.08,-0.52 -0.353,-0.52 z m 0,2.02 0,1.1 4.3544,0 c 0.433,0 0.353,-0.2 0.353,-0.5 0,-0.3 0.08,-0.6 -0.353,-0.6 z m 0,1.9 0,1.1 c 0,0 0,0 0,0.1 l 4.3544,0 c 0.433,0 0.353,-0.3 0.353,-0.6 0,-0.3 0.08,-0.6 -0.353,-0.6 z m 0.1204,1.8 c 0.111,0.3 0.287,0.6 0.539,0.9 0.102,0.1 0.243,0.2 0.358,0.2 l 3.337,0 c 0.433,0 0.353,-0.3 0.353,-0.6 0,-0.3 0.08,-0.5 -0.353,-0.5 z"
          style="fill:url(#chrome);fill-opacity:1.0;stroke:none"/>
    <path
          style="fill:#5a1616;fill-opacity:1;stroke:none"
          d="m -1.28,-4.873 a 1.185,1.633 0 1 1 -2.37,0 1.185,1.633 0 1 1 2.37,0 z" />
    
    <set attributeName="visibility" 
             begin="BtnLightsaber.click"
             fill="freeze"
             to="visible"/>
    <set attributeName="visibility" 
             begin="BtnAxe.click;BtnNone.click;BtnKatana.click"
             fill="freeze"
             to="hidden"/>
  </g>  
  
  
  </g>
    
</g>
  <path 
      style="fill:#222;stroke:none;fill-rule:nonzero"
      id="bras2" 
      d="M 220.4,144 C 220.3,150.5 226,153.3 248.7,158.7 271.3,164 281,164.3 283,162.5 285,160.7 289.3,152 292,135.7 294.7,119.3 293.3,118.3 294.3,115 295.3,111.7 299,99.33 298,94.33 297,89.33 290,80.34 288.7,83.33 287.3,86.33 283,109.3 283.7,117.7 284.3,126 281.3,132 277.7,139.7 271.5,152.8 271.3,150.7 256.7,143.7 225.3,128.7 220.4,140 220.4,144 z">
    <animate attributeName="d"
             attributeType="XML"
             repeatCount="indefinite"
             fill="freeze"
             dur="1s"
             values="
                     M 220.4,144 C 220.3,150.5 226,153.3 248.7,158.7 271.3,164 281,164.3 283,162.5 285,160.7 289.3,152 292,135.7 294.7,119.3 293.3,118.3 294.3,115 295.3,111.7 299,99.33 298,94.33 297,89.33 290,80.34 288.7,83.33 287.3,86.33 283,109.3 283.7,117.7 284.3,126 281.3,132 277.7,139.7 271.5,152.8 271.3,150.7 256.7,143.7 225.3,128.7 220.4,140 220.4,144 z;
                     M 217.5,140.5 C 215.2,146.5 218.5,150.9 237.1,164.9 255,178.3 261,179.9 263.6,178.9 266.1,177.9 271.9,173 281.3,159.4 289.1,148 292.8,154.2 294.9,151.5 297.1,148.7 305.8,135.5 306.7,130.4 307.5,125.4 304.1,114.5 301.8,116.8 283.2,137.1 282.4,129.9 279.2,148.8 275.5,153.6 272.6,154.8 268.4,156.6 254.9,162.9 260.1,159.6 251.9,151 245.1,143.6 224.4,123.9 217.5,140.5 z;
                     M 214.3,127.7 C 208.2,129.8 208,135.2 209.2,158.4 210.4,180.8 216.7,189.7 217.7,192.2 218.7,194.7 227.6,208.5 241.2,217.9 252.6,225.7 250.3,228.4 253.1,230.6 255.9,232.7 263.1,238.5 268.1,239.3 273.2,240.1 284.1,237.7 281.7,235.4 263.1,214.2 267.5,220.1 251.8,215.9 247,212.1 238.8,198.2 236.9,194 229.9,181.6 227.3,172.7 228.4,160.8 228,147.7 234.2,121 214.3,127.7 z;
                     M 214.3,126.7 C 208.2,128.8 204.3,137.8 199.2,158.4 193.9,180.2 195.5,187.7 196.5,190.3 197.5,192.8 203.3,203.5 212.8,222 219.1,234.3 217.3,237.3 217,240.8 216.8,244.3 223.1,252.3 227.8,257.5 231.1,261.3 240.5,261.2 240.5,257.9 232.8,234.5 242.8,244.4 226.7,228 223.3,222.9 219.1,204.2 217.3,200 208.6,181.1 206.5,176.9 215,162.7 221.9,153.6 237.8,119.1 214.3,126.7 z;   
                     M 209.3,121.7 C 203.2,123.8 196.1,138 190.2,158.4 186.5,171.6 185.7,171.3 184,180.3 183.5,183 180,190.6 179.7,211.7 179.5,225.5 175.7,224.1 174.7,227.5 172.8,234 172.9,238 172.4,244.9 172.1,250 176.8,256.5 179.2,254.2 188.3,233.6 189.3,251 189.5,220.3 190.8,214.3 192.9,205.8 194,201.3 195.6,179.5 197.6,184.1 207,162.8 209.3,158 230.4,114.9 209.3,121.7 z;
                     M 215.3,119 C 209.1,121.1 205.5,125.2 192.8,136 182.3,144.8 177.4,147.8 175.8,156.8 175.3,159.4 175.2,161.2 167,180.2 160.2,195.9 158.4,208.2 157.8,210 154,220.8 146.4,221.8 146,228.8 145.7,233.8 146,238.7 152.3,235.2 165.1,218.1 166.5,235.7 168.5,202.2 169.7,196.2 174.1,190 176.9,186.3 187.2,173 187.7,158.2 204.3,147 222.2,134.9 230.9,114.6 215.3,119 z;
                     M 224.3,120 C 218.1,122.1 208.5,121.2 195.8,132 185.3,140.8 173.4,138.8 171.8,147.8 171.3,150.4 171.2,152.2 163,171.2 156.2,186.9 156.4,196.2 155.8,198 152,208.8 144.4,214.8 144,221.8 143.7,226.8 144,231.7 150.3,228.2 162.9,210.9 166.7,226 165.5,193.2 166.7,187.2 170.1,181 172.9,177.3 186.2,161.1 178.2,159.8 205.3,147 231,140.4 238.7,120.5 224.3,120 z;
                     M 217.8,126.9 C 208.4,120.7 202.2,122 190.6,126.9 179,131.9 168.3,136.3 166.1,141.2 163.8,146.1 149.1,175.6 147.3,176.5 145.5,177.4 140.6,181.9 137,187.7 133.5,193.5 129.4,204.2 137,201.9 144.6,199.7 145.1,195.7 149.5,190.8 154,185.9 153.1,182.8 157.6,177.8 162,172.9 168,152.4 175.3,149.3 182.6,146.1 192,141.7 200,142.6 208,143.5 227.2,133.2 217.8,126.9 z;
                     M 216.5,128.2 C 205.6,125.4 202.2,126 190.6,130.9 179,135.9 153.3,149.3 151.1,154.2 148.8,159.1 148.3,170 148.3,175.5 148.3,182.7 144,182.8 146,189.4 149.2,199.9 153.7,199.1 161.3,196.8 168.9,194.6 164.2,189.3 162.7,186.3 159.6,180.4 154.4,184.3 156.5,178 159.3,169.3 163.5,161.8 166,156.8 166.6,155.4 177.1,151 185.2,149.6 201.7,146.7 219.3,138.8 216.5,128.2 z;
                     M 221.8,122.7 C 212.9,115.8 204.3,125.1 192.6,135.7 183.3,144.2 170.3,172.1 168.1,177 165.8,181.9 163.3,192.7 163.3,198.3 163.3,205.4 163,206.6 165,213.1 168.2,223.7 170.7,221.8 178.3,219.6 185.9,217.4 181.2,212 179.7,209.1 176.6,203.1 172.7,203.2 174.8,196.9 177.6,188.3 180.3,181.8 182.8,176.8 183.4,175.4 189.7,158.8 196.5,154.3 206.3,147.7 235.3,133 221.8,122.7 z;
                     M 221.8,125.7 C 212.9,118.8 203,136.8 192.5,148.9 184.2,158.4 180.3,178.5 181.2,183.9 182.1,189.2 192.1,224.6 195.2,229.2 199.2,235.1 199.6,239.2 204.9,243.5 213.5,250.5 214.5,247.5 219.6,241.4 224.6,235.3 217.7,233.6 214.8,232 208.9,228.8 205.8,231 204,224.6 201.5,215.9 200.1,203 199.3,197.5 199.1,196 193.7,182.7 202.1,168.1 210.5,153.3 235.3,136 221.8,125.7 z;
                     M221.839,124.362c-8.955-6.88-12.366,6.424-16.506,21.971   c-3.242,12.178-3.122,32.129,2.053,33.657c5.173,1.526,34.2,6.306,39.664,6.962c5.95,0.714,7.354,4.548,14.168,4.571   c8.782,0.028,17.704-0.602,22.449-7.19c2.596-3.604-14.699-5.901-20.468-7.776c-6.36-2.067-9.817,0.688-16.354-0.475   c-8.976-1.601-22.131-6.991-27.488-8.708c-1.426-0.458-4.64-0.543,1.976-16.04C228.46,134.636,235.25,134.667,221.839,124.362z;
                     M 218.5,123.7 C 209.8,126.5 214.4,132.6 219.2,148 222.9,160 233.8,175 239,173.5 245.7,171.7 263.3,160.7 266,157.8 270.7,153 272,149.4 277.8,145.8 285.3,141.2 284.8,136.4 285.3,128.3 285.6,123.9 274.5,131.7 268.7,135.2 262.9,138.6 265.3,146.3 259.3,150 251.5,154.7 244.5,159.5 239,160.8 237.6,161.2 238.5,161.1 234.7,144.7 232,133.3 226.5,121.7 218.5,123.7 z;
                     M 226.3,128.7 C 224.7,136.1 231.5,140.3 245.3,142.1 257.8,143.7 274.9,153.1 278.9,149.4 284,144.7 294.7,126.9 295.8,123.2 297.8,116.8 297.4,113 300.9,107.1 305.5,99.62 302.9,95.6 299.7,88.14 297.9,84.06 291.6,96.02 287.9,101.8 284.3,107.4 290,113.3 286.3,119.2 281.5,127 278.9,129.6 274.7,133.3 273.5,134.3 269.4,136.1 253,129.5 242.4,124.8 231.2,118.5 226.3,128.7 z;
                     M 220.4,144 C 220.3,150.5 226,153.3 248.7,158.7 271.3,164 281,164.3 283,162.5 285,160.7 289.3,152 292,135.7 294.7,119.3 293.3,118.3 294.3,115 295.3,111.7 299,99.33 298,94.33 297,89.33 290,80.34 288.7,83.33 287.3,86.33 283,109.3 283.7,117.7 284.3,126 281.3,132 277.7,139.7 271.5,152.8 271.3,150.7 256.7,143.7 225.3,128.7 220.4,140 220.4,144 z"/>
</path>
  <line 
        fill="none"
        stroke="black"
        stroke-dasharray="50 10"
        x1="350"
        y1="363.8"
        x2="50"
        y2="363.8">
    <animate attributeName="stroke-dashoffset" 
             dur="0.48s"
             repeatCount="indefinite"
             from="0"
             to="-300"/>
  </line>
  <g id="Buttons" opacity="0.8"> 
    <g
       style="cursor:pointer"
       id="BtnKatana">
      <rect
            style="fill:#848ea6"
            width="75"
            height="20"
            x="300"
            y="5" />
      <text
            style="font-size:.8em;fill:#000000;font-family:font-family: Helvetica, sans-serif"
            x="318.28711"
            y="19.224609">Katana</text>
    </g>
    <g
       style="cursor:pointer"
       id="BtnAxe">
      <rect
            y="30"
            x="300"
            height="20"
            width="75"
            style="fill:#85a684" />
      <text
            style="font-size:.8em;fill:#000000;font-family:font-family: Helvetica, sans-serif"
            x="327.41309"
            y="44.224609">Axe</text>
    </g>
    <g>
      <g
         id="BtnLightsaber"
         style="cursor:pointer">
        <rect
          style="fill:#d27e1f;fill-opacity:1;fill-rule:nonzero;stroke:none"
          y="55"
          x="300"
          height="20"
          width="75" />
        <text
          style="font-size:.8em;fill:#000000;font-family:font-family: Helvetica, sans-serif"
          x="307.93359"
          y="68.105469"
          id="text4218">LightSaber</text>
      </g>
      <g id="properties"
         visibility="hidden">
        <set attributeName="visibility" 
             begin="BtnLightsaber.click"
             fill="freeze"
             to="visible"/>
        <set attributeName="visibility" 
             begin="BtnAxe.click;BtnNone.click;BtnKatana.click"
             fill="freeze"
             to="hidden"/>
        <rect
          id="BtnRed"
          style="fill:red;fill-opacity:1;stroke:none;cursor:pointer"
          width="40.84"
          height="5.215"
          x="336.1"
          y="280.2"
          ry="2.563" />
        <rect
          id="BtnBlue"
          ry="2.563"
          y="287"
          x="336.1"
          height="5.215"
          width="40.84"
          style="fill:#00a3f7;fill-opacity:1;stroke:none;cursor:pointer" />
        <rect
          id="BtnGreen"
          style="fill:lime;fill-opacity:1;stroke:none;cursor:pointer"
          width="40.84"
          height="5.215"
          x="336.1"
          y="293.9"
          ry="2.563" />
        <g transform="matrix(1.976,0,0,1.976,-215.1,137.2)">
          <g id="BtnOff" style="cursor:pointer">
            <path
              transform="matrix(0.5061,0,0,0.5061,108.9,-69.43)"
              d="m 355.1,273 13.3,0 c 3.9,0 6.9,-3.1 6.9,-6.9 0,-3.8 -3,-6.9 -6.9,-6.9 l -13.3,0"
              style="fill:#e0a146;fill-opacity:1;stroke:#996800;stroke-width:0.8" />
            <text
              style="font-size:4px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
              x="290.05609"
              y="66.664116">OFF</text>
          </g>
          <g
             id="BtnOn" style="cursor:pointer">
            <path
              style="fill:#e0a146;fill-opacity:1;stroke:#996800;stroke-width:0.4044;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
              d="m 288.9,61.75 -7.1,0 c -2,0 -3.6,1.57 -3.6,3.49 0,1.93 1.6,3.49 3.6,3.49 l 7.1,0" />
            <text
              style="font-size:4px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
              x="280.75006"
              y="66.664116"
              id="text4745">ON</text>
          </g>
          <rect
            ry="3"
            y="62.11"
            x="287.2"
            height="6"
            width="11.12"
            style="fill:#b07700;fill-opacity:1;stroke:none">
            <animate attributeName="x"
                 begin="BtnOn.click"
                 values="287.2;
                         279"
                 dur="0.3s"
                 fill="freeze"/>
            <animate attributeName="x"
                     begin="BtnOff.click;BtnAxe.click;BtnNone.click;BtnKatana.click"
                     values="279; 287.2"
                     dur="0.3s"
                     fill="freeze"/>
          </rect>
        </g>
      </g>
      <g style="cursor:pointer"
         id="BtnNone">
        <rect
            style="fill:#ee3d36;fill-opacity:1;fill-rule:nonzero;stroke:none"
            y="80"
            x="300"
            height="20"
            width="75"/>
        <text
            style="font-size:.8em;fill:#000000;font-family:font-family: Helvetica, sans-serif"
            x="322.93945"
            y="94.224609">None</text>
      </g>
    </g>
  </g>
</svg>
<style>

</style>

</script>

SVG Animation - Running

Random HTML Example Codes: