JSFiddle - React, Tailwind, and code Playground

by Jorgelig

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="pirate-container">
<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...

CSS

body{
  background: transparent url(https://static.shodan.io/shodan-3d/img/background.jpg) no-repeat scroll center top;
}

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