首页 > 代码库 > 一款纯html5实现的人跑步动画
一款纯html5实现的人跑步动画
今天给大家分享一款纯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实现的人跑步动画
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。