今天给大家分享一款纯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. 微信小程序开发动感十足的加载动画--都在这里！

    代码地址如下:http://www.demodashi.com/demo/14242.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. Android倒计时CountDownTimer小记

    Android 超简便的倒计时实现:  CountDownTimer CountDownTimer由系统提供 查资料的时候 发现了CountDownTimer这个类之后 果断抛弃了曾经的倒计时做法 功 ...

  3. xargs详解

    一.场景 这个命令是错误的 find ./ -perm +700 |ls -l 这样才是正确的 find ./ -perm +700 |xargs ls -l  二.用法 [root@localhos ...

  4. java多线程(二)之实现Runnable接口

    一.java多线程方式2: 实现Runnable接口 好处:a. 可以避免由于java单继承带来的局限性. b. 适合多个相同的程序的代码去处理同一个资源的情况, 把线程与程序的代码, 数据有效分离, ...

  5. eclipse代码格式化设置

    http://www.cnblogs.com/zhxiaomiao/archive/2010/06/19/1760995.html java---code style ---formatter 首先新 ...

  6. UltraEdit加入到右键菜单中

    http://www.cppblog.com/prayer/archive/2009/02/20/74429.htmlUltraEdit安装好之后,拷贝到其它机器就可以直接使用而无需注册,但少了一个功 ...

  7. 利用pushState开发无刷页面切换(转)

    相关文档:https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulatingthebrowser_history 实现目标 ...

  8. Android学习系列(10)--App列表之拖拽ListView(上)

     研究了很久的拖拽ListView的实现,受益良多,特此与尔共飨.      鉴于这部分内容网上的资料少而简陋,而具体的实现过程或许对大家才有帮助,为了详尽而不失真,我们一步一步分析,分成两篇文章. ...

  9. ASP.NET Web API使用示例

    原文地址:https://blog.csdn.net/chinacsharper/article/details/21333311 上篇博客讲解rest服务开发时,曾经提到过asp.net mvc中的 ...

  10. Hadoop分布式文件系统：架构和设计

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_design.html 引言 前提和设计目标 硬件错误 流式数据访问 大规模数据集 简单的一致性模型 ...