今天给大家分享一款纯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. spring cloud学习地址

    http://book.itmuch.com/1%20%E5%BE%AE%E6%9C%8D%E5%8A%A1%E7%AE%80%E4%BB%8B/1%20%E5%BE%AE%E6%9C%8D%E5%8 ...

  2. 防止线程退出的几种方案-不再while(true)

    有时候 调试程序的时候 .我们需要防止程序退出.比如调试一个定时服务. 方法1 while(true) {Thread.Sleep(1000)} 方法 2——(推荐) Well when you do ...

  3. PHP原生:分享一个轻量级的缓存类=>cache.php

    适用:原生PHP cache.php tips:代码最后有适用Demo哦. <?php /* * 缓存类 cache */ define("cacheRoot"," ...

  4. Mysql 5.7 从节点配置多线程主从复制

    Mysql 采用多线程进行复制是从 Mysql 5.6 开始支持的内容,但是 5.6 版本下有缺陷,虽然支持多线程,但是每个数据库只能一个线程,也就是说如果我们只有一个数据库,则主从复制时也只有一个线 ...

  5. HDUOJ----(4788)Hard Disk Drive

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submission ...

  6. Android学习系列(19)--App离线下载

    宜未雨而绸缪,毋临渴而掘井.----朱用纯<治家格言>       离线下载,在有网络的情况下下载服务器数据,以便无网络时也能阅读,就是离线阅读.       离线下载的功能点如下:    ...

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

  8. oc 目录结构

    最顶级的oc2是一个项目名,下级的oc2下面的文件是一些程序文件(.m或者.h的文件)和一些界面文件(.xib或者storyboard文件),supporting files文件下面的是资源文件,可以 ...

  9. GL_总账完整会计周期业务(流程)

    2014-06-02 BaoXinjian

  10. Unix环境高级编程(五)进程环境

    本章主要介绍了Unix进程环境,包含main函数是如何被调用的,命令行参数如何传递,存储方式布局,分配存储空间,环境变量,进程终止方法,全局跳转longjmp和setjmp函数及进程的资源限制. ma ...