今天给大家分享一款纯html5实现的人跑步动画。这款动画中实现了人跑步的动画，且上面有三个按钮，分别是选择让这个跑步的拿什么武器，第一个是拿了一把剑，第二个是拿了一把斧头，第三个是不拿任保东西。效果图如下：

在线预览   源码下载

实面的代码。

html代码：

 <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; min-height: 100vh" viewbox="0 0 400 400"

        xml:space="preserve">

        <defs>

            <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 inkscape:collect="always" 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" />

            <lineargradient inkscape:collect="always" xlink:href="#linearGradient5090" id="linearGradient5096"

                x1="-0.3107" y1="-5.068" x2="2.185" y2="-5.068" gradientunits="userSpaceOnUse" />

        </defs>

        <path style="fill: black; stroke: none; fill-rule: nonzero" id="bras1" d="">

            <animate attributename="d" attributetype="XML" repeatcount="indefinite" fill="freeze"

                dur="1s" values="

                     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;

                     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" />

        </path>

        <path style="fill: black; stroke: none; fill-rule: nonzero" id="leg1" d="">

            <animate attributename="d" attributetype="XML" repeatcount="indefinite" fill="freeze"

                dur="1s" values="

                     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;

                     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

                     " />

        </path>

        <path style="fill: #111; stroke: none; fill-rule: nonzero" id="tete" d="">

            <animate attributename="d" attributetype="XML" repeatcount="indefinite" fill="freeze"

                dur=".5s" values="

                     M 222,128.8 C 226.5,124.3 230,126.6 231.3,122.7 232.7,118.8 228.7,112.5 231.3,102.7 234,92.83 235.7,86.33 244.3,86.33 253,86.33 266.8,90.17 265.3,108.3 263.8,126.5 258.8,128 255,131.2 251.2,134.3 242.7,134.2 240.3,132.2 238,130.2 237.7,126.5 237.7,126.5 237.7,126.5 239.7,132.2 239.3,134.5 239,136.8 234.2,139.5 231.5,138.8 228.8,138.2 220.3,130.5 222,128.8 z;

                     M 222,128.8 C 226.5,124.3 229,126.6 230.3,122.7 231.9,118.1 228.8,111.9 231.3,102.7 234,92.83 235.7,86.33 244.3,86.33 253,86.33 265.8,86.67 264.3,104.8 262.8,123 257.4,127.9 253,130.2 247.8,132.8 242.7,132.2 240.3,130.2 238,128.2 236.7,125.5 236.7,125.5 236.7,125.5 237.7,132.2 237.3,134.5 237,136.8 234.2,139.5 231.5,138.8 228.8,138.2 220.3,130.5 222,128.8 z;

                     M 218,126.8 C 222.5,122.3 227,128.6 228.3,124.7 229.9,120.1 224.8,114.9 227.3,105.7 230,95.83 234.7,87.33 243.3,87.33 252,87.33 263.8,86.67 262.3,104.8 260.8,123 255.4,126.9 251,129.2 245.8,131.8 242.7,132.2 240.3,130.2 238,128.2 237.7,128.5 237.7,128.5 237.7,128.5 233.7,131.2 233.3,133.5 233,135.8 230.2,138.5 227.5,137.8 224.8,137.2 216.3,128.5 218,126.8 z;

                     M 218,126.8 C 222.5,122.3 222,125.6 223.3,121.7 224.9,117.1 219.8,111.9 222.3,102.7 225,92.83 229.7,84.33 238.3,84.33 247,84.33 258.8,83.67 257.3,101.8 255.8,120 250.4,123.9 246,126.2 240.8,128.8 237.7,129.2 235.3,127.2 233,125.2 232.7,125.5 232.7,125.5 232.7,125.5 230.7,130.2 230.3,132.5 230,134.8 227.2,137.5 224.5,136.8 221.8,136.2 216.3,128.5 218,126.8 z;

                     M 218,126.8 C 222.5,122.3 222,125.6 223.3,121.7 224.9,117.1 223.8,111.9 226.3,102.7 229,92.83 234.7,85.33 243.3,85.33 252,85.33 260.3,88.33 260.3,102.8 260.3,119.7 256.4,122.9 252,125.2 246.8,127.8 240.7,129.2 238.3,127.2 236,125.2 235.7,125.5 235.7,125.5 235.7,125.5 230.7,130.2 230.3,132.5 230,134.8 227.2,137.5 224.5,136.8 221.8,136.2 216.3,128.5 218,126.8 z;

                     M 218,126.8 C 222.5,122.3 225.4,125.3 226.7,121.4 228.3,116.8 223.8,111.9 226.3,102.7 229,92.83 234.7,85.33 243.3,85.33 252,85.33 260.3,88.33 260.3,102.8 260.3,119.7 256.4,122.9 252,125.2 246.8,127.8 240.7,129.2 238.3,127.2 236,125.2 235.7,125.5 235.7,125.5 235.7,125.5 230.7,130.2 230.3,132.5 230,134.8 227.2,137.5 224.5,136.8 221.8,136.2 216.3,128.5 218,126.8 z;

                     M 223,123.8 C 227.5,119.3 228.1,123.1 229.4,119.2 231,114.6 228.8,108.9 231.3,99.67 234,89.83 239.7,82.33 248.3,82.33 257,82.33 265.3,85.33 265.3,99.83 265.3,116.7 261.4,119.9 257,122.2 251.8,124.8 245.7,126.2 243.3,124.2 241,122.2 240.7,122.5 240.7,122.5 240.7,122.5 235.7,127.2 235.3,129.5 235,131.8 232.2,134.5 229.5,133.8 226.8,133.2 221.3,125.5 223,123.8 z;

                     M 222,128.8 C 226.5,124.3 230,126.6 231.3,122.7 232.7,118.8 228.7,112.5 231.3,102.7 234,92.83 235.7,86.33 244.3,86.33 253,86.33 266.8,90.17 265.3,108.3 263.8,126.5 258.8,128 255,131.2 251.2,134.3 242.7,134.2 240.3,132.2 238,130.2 237.7,126.5 237.7,126.5 237.7,126.5 239.7,132.2 239.3,134.5 239,136.8 234.2,139.5 231.5,138.8 228.8,138.2 220.3,130.5 222,128.8 z

                     " />

        </path>

        <path style="fill: #111; stroke: none; fill-rule: nonzero" id="corps" d="">

            <animate attributename="d" attributetype="XML" repeatcount="indefinite" fill="freeze"

                dur=".5s" values="

                     M 225.3,128.7 C 214.6,125.2 214.3,123.3 203.7,132.3 193,141.3 177.3,157.7 169,180.7 160.7,203.7 166,208.3 160.7,215.7 155.3,223 182,245.7 193,232 204,218.3 203,214.3 205.3,198.3 207.7,182.3 222,161 228.7,152.7 235.3,144.3 243.2,134.5 225.3,128.7 z;

                     M 229.3,126.7 C 219,122.1 214.3,123.3 203.7,132.3 193,141.3 177.3,157.7 169,180.7 160.7,203.7 156.6,226.8 160.7,235.7 165.5,246.3 182,245.7 193,232 204,218.3 203,214.3 205.3,198.3 207.7,182.3 225,162 231.7,153.7 238.3,145.3 245.3,133.8 229.3,126.7 z;

                     M 223.3,124.7 C 213.4,120.3 207.7,125.3 200.7,131.3 190.1,140.4 177.3,157.7 169,180.7 161.8,200.4 164.1,220.1 166.7,225.7 171.5,236.3 186,245.7 197,232 208,218.3 198,214.3 200.3,198.3 202.7,182.3 215,162 221.7,153.7 228.3,145.3 240.4,132.1 223.3,124.7 z;

                     M 223.3,124.7 C 215.4,123.4 208.8,125.3 201.7,135.3 193.6,146.7 187.8,154.5 181,183.7 176.3,204.1 179.1,220.1 181.7,225.7 186.5,236.3 202.5,247.8 212,233 220,220.5 213,210 214.3,198.3 216.2,182.3 220,165 226.7,156.7 233.3,148.3 240.5,127.5 223.3,124.7 z;

                     M 221.3,120.7 C 213.4,119.4 206.8,121.3 199.7,131.3 191.6,142.7 184.8,149.5 178,178.7 173.3,199.1 177.1,215.1 179.7,220.7 184.5,231.3 193.5,243.8 203,229 211,216.5 206,205 207.3,193.3 209.2,177.3 214,159 220.7,150.7 227.3,142.3 238.5,123.5 221.3,120.7 z;

                     M 222.3,121.7 C 214.4,120.4 208.8,122.3 201.7,132.3 193.6,143.7 187.8,149.5 181,178.7 176.3,199.1 181.1,215.1 183.7,220.7 188.5,231.3 197.5,243.8 207,229 215,216.5 210,205 211.3,193.3 213.2,177.3 219,159 225.7,150.7 232.3,142.3 239.5,124.5 222.3,121.7 z;

                     M 233.3,119.7 C 225.4,118.4 218.8,120.3 211.7,130.3 203.6,141.7 187.8,151.5 181,180.7 176.3,201.1 181.1,215.1 183.7,220.7 188.5,231.3 197.5,243.8 207,229 215,216.5 211.8,204.8 214.3,193.3 218.3,175.3 230,157 236.7,148.7 243.3,140.3 250.5,122.5 233.3,119.7 z;

                     M 225.3,128.7 C 214.6,125.2 214.3,123.3 203.7,132.3 193,141.3 177.3,157.7 169,180.7 160.7,203.7 166,208.3 160.7,215.7 155.3,223 182,245.7 193,232 204,218.3 203,214.3 205.3,198.3 207.7,182.3 222,161 228.7,152.7 235.3,144.3 243.2,134.5 225.3,128.7 z

                     " />

        </path>

        <path style="fill: #222; stroke: none; fill-rule: nonzero" id="leg2" d="">

            <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" />

                <!-- Repere pour le prop , red cross

<line style="fill:none;stroke:red"

        x1="0"

        x2="0"

        y1="-10"

        y2="10" />

  <line style="fill:none;stroke:red"

        x1="-10"

        x2="10"

        y1="0"

        y2="0" /> -->

                <!-- Here you can change that, by image or path or anything you want, for change the prop. -->

                <g id="Axe" transform="scale(5),rotate(60)" visibility="hidden">

                    <animate attributename="visibility" begin="BtnAxe.click" fill="freeze" to="visible"

                        dur="0s" />

                    <animate attributename="visibility" begin="BtnKatana.click;BtnNone.click" fill="freeze"

                        to="hidden" dur="0s" />

                    <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">

                    <animate attributename="visibility" begin="BtnKatana.click" fill="freeze" to="visible"

                        dur="0s" />

                    <animate attributename="visibility" begin="BtnAxe.click;BtnNone.click" fill="freeze"

                        to="hidden" dur="0s" />

                    <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>

                <!-- End of Prop-->

            </g>

        </g>

        <path style="fill: #222; stroke: none; fill-rule: nonzero" id="bras2" d="">

            <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=".48s" repeatcount="indefinite" from="0"

                to="-300" />

        </line>

        <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: Sans" x="320" y="17">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: Sans" x="320" y="42">Axe</text>

        </g>

        <g style="cursor: pointer" id="BtnNone">

            <rect style="fill: #bd966d; 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: Sans" x="320" y="69">None</text>

        </g>

    </svg>

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/10014

一款纯html5实现的人跑步动画的更多相关文章

  1. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  2. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的！

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

  3. 一款纯css3实现的超炫动画背画特效

    之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览  ...

  4. 一款基于HTML5 Canvas的画板涂鸦动画

    今天给各网友分享一款基于HTML5 Canvas的画板涂鸦动画.记得之前我们分享过一款HTML5 Canvas画板工具,可以切换不同的笔刷,功能十分强大.本文今天要再来分享一款基于HTML5 Canv ...

  5. 一款纯html5实现的时钟

    今天给大家分享一款非常漂亮的纯html5实现的时钟.整个界面都由html5绘制而成.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class="co ...

  6. 16款最佳HTML5超酷动画演示及源码

    1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...

  7. 分享9款用HTML5/CSS3制作的动物人物动画

    1.纯CSS3绘制可爱的蚱蜢 还有眨眼动画 今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示 源码下载 2.HTML5 Canvas头发飘逸动画 很酷的HTML5动画 HTML5 ...

  8. 纯CSS3悬停图标旋转导航动画代码

    分享一款纯CSS3悬停图标旋转导航动画代码.这是一款鼠标移到图标上动画旋转显示导航菜单.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="x_con ...

  9. 纯css3实现的鼠标悬停动画按钮

    今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

随机推荐

  1. 【laravel5.4】使用baum\node 类库实现无限极分类

    1.在model中引入baum\node 类库,并继承,具体参考 https://packagist.org/packages/baum/baum 2.核心代码: /* * model::create ...

  2. Linux 查看登录日志及登录失败用户的ip-lastb

    Linux 查看登录成功的用户信息 命令: last 最新的登录记录在最前面,所以可以用 一下命令来查看. last | less 查看登录失败的用户信息 命令: lastb 查看登录日志 命令:  ...

  3. Eclipse Xml编译错误Referenced file contains errors - spring-beans-4.0.xsd

    本文转自:http://josh-persistence.iteye.com/blog/2125420 在eclipse中,有时候在xml文件中,特别是于Spring相关的配置文件中,会出现一些不影响 ...

  4. QQ网页链接打开本地QQ.exe原理

    一.观察现象 QQ推广上有相关文档 http://shang.qq.com/v3/widget.html 新建一个html,点击链接就会启动本地QQ. <html> <body> ...

  5. eclipse 无代码自动提示

    http://blog.csdn.net/wgw335363240/article/details/6235427eclipse 无代码提示,显示No Default Proposals,Conten ...

  6. PMP考试终于结束了。。。

    PMP考试昨天终于结束了,可以好好的先休息下了,先不管成绩了,通过这段时间的学习了解,发现PMP在实际工作中的运用 起的作用还很大,看样子以后要学习的东西还多着呢,先休息一周再说...

  7. Python学习笔记014——迭代工具函数 内置函数enumerate()

    1 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组或字符串)组合为一个索引序列,同时列出数据和数据下标,一般用在 for 循环当中. 2 语法 enumerate(sequ ...

  8. python练习笔记——map | sum | pow 的应用

    1 函数简要 map 函数  | sum 函数  |  pow函数  | lambda函数 2 简要计算 2.1 1^2 + 2^2 + 3^2 .....9^2 方法1 print([pow(x,2 ...

  9. Qt WebView改造成 QML App

    这是去年的一个项目,虽然研究出来了,解了一时之需,但随后束之高阁.当时Qt的版本是4.8.现在整理如下: 把QT HTML5 APP改造成 QML App 方案 新建一个QML自定义控件,该控件包含Q ...

  10. Android 在已有的项目上创建新的项目

    原工程 右键Copy   再右键点Paste 改新的工程名