<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="475px" height="400px" viewBox="0 0 503 513" enable-background="new 0 0 503 513" xml:space="preserve">
  <rect id="bg" x="6" y="5" fill="#bbb" width="488" height="501" />
  <g id="bender">
    <g id="mouth">

      <polyline id="background-mouth_1_" fill="#596170" stroke="#000000" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="
      190.333,285.5 203.333,343 189.667,350.5 180,314.667 178,289.5     " />
      <polygon id="black_1_" points="192.667,313.333 200,341.334 148.667,353.167 137,309 187.667,292.667    " />
      <g id="teeth">
        <path fill="#CCBE66" d="M227.312,317.708c0,0-23.062,7.792-34.312,8.792l-3.25-2.75l37.75-9.25L227.312,317.708z" />
        <path fill="#BCAA44" d="M189.812,323.812L186.75,310.5l36.25-1.75l3.667,6.417c0,0-9.166,3.261-16.333,5
        S189.812,323.812,189.812,323.812z" />
        <path fill="#CCBE66" d="M227.333,317.667c-47-15.833-87.583,12-87.583,12l0.375-10.334L186.479,305L229,314.917L227.333,317.667z
        " />
        <path fill="#FFF4A6" d="M141.167,326.667c0,0,40.526-26.743,87.066-11.697c0.162,0.052,0.66,0.173,0.83-0.136
        c0.214-0.392,0.084-1.242,0.084-1.242L224,269.333L163.667,250L129,284.666L141.167,326.667z" />
        <g id="lines">
          <path id="teethhole" d="M189.833,277.333c0,0,6.833-1.167,13.667,0.667l2.167,15.833c0,0-9.5-1.667-13.833-0.5L189.833,277.333z
          " />
          <path fill="none" stroke="#9B882C" stroke-miterlimit="10" d="M133.167,294.667c0,0,43.708-29.792,92.583-11.667" />
          <path fill="none" stroke="#9B882C" stroke-miterlimit="10" d="M135.167,310.667c0,0,43.708-29.792,92.583-11.667" />
          <line fill="none" stroke="#9B882C" stroke-miterlimit="10" x1="148.875" y1="323.062" x2="139.125" y2="259.75" />
          <line fill="none" stroke="#9B882C" stroke-miterlimit="10" x1="161.875" y1="317.25" x2="152.125" y2="254.75" />
          <line fill="none" stroke="#9B882C" stroke-miterlimit="10" x1="174.875" y1="313.625" x2="165.125" y2="250.75" />
          <line fill="none" stroke="#9B882C" stroke-miterlimit="10" x1="188.875" y1="311.062" x2="179.125" y2="248.75" />
          <line fill="none" stroke="#9B882C" stroke-miterlimit="10" x1="202.875" y1="310.812" x2="193.125" y2="248.75" />
          <line fill="none" stroke="#9B882C" stroke-miterlimit="10" x1="216.812" y1="312.562" x2="207.125" y2="249.75" />
        </g>
      </g>
    </g>
    <g id="head">
      <polygon fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="134.351,163.298 127.462,115.079 
      130.958,114.235 148.92,162.636    " />

      <ellipse fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="143.743" cy="171.245" rx="16.591" ry="14.048" />
      <circle fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="130.086" cy="117" r="5.175" />
      <path fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M215.108,213.542
      c0,0-13.631-64.047-72.148-46.27c-52.318,15.894-32.451,74.834-32.451,74.834l28.477,127.152l50.331,8.609l45.033-21.854
      l-2.649-12.583c0,0-4.636-9.271-41.06-3.312s-35.099,3.312-41.06-9.934s19.188-29.455,50.292-30.811
      c11.593-0.506,26.876,2.377,29.292,4.792c0.125,0.125-1.208-9.083-1.208-9.083L215.108,213.542z" />
      <g id="eyes">
        <path d="M156.5,214.333c-0.833,0.167-26.833,41-26.833,41l14.667,30l61.833-10L226.833,283l29-14.667l6.5-16.333l-1-16.833
        l-11.5-10.5L156.5,214.333z" />
        <g id="eyeclip">
          <defs>
            <path id="eyeclippath" d="M234.987,267.934c-15.232,0-68.212-5.298-68.212-5.298s-17.219-3.311-17.881-23.179
            s13.245-22.517,13.245-22.517l74.834,9.271c0,0,22.517-1.325,22.517,19.205S250.219,267.934,234.987,267.934z" />
          </defs>
          <clipPath id="eyeclippath_1_">
            <use xlink:href="#eyeclippath" overflow="visible" />
          </clipPath>
          <g id="right" clip-path="url(#eyeclippath_1_)">

            <circle id="ball" fill="#FFF4A6" stroke="#000000" stroke-width="1.9629" stroke-miterlimit="10" cx="218.822" cy="249.187" r="27.066" />
            <rect id="eye_1_" x="224" y="237" width="5" height="5" />
            <path id="eyelid_1_" d="M192.25,245c0,0,9.5-10.25,29.5-10.25s24.25,13,24.25,13l0.5-24.5l-23-3l-31-2L192.25,245z" />
            <path id="eyelidbottom_1_" d="M192.25,255.125c0,0,9.5-10.312,29.5-10.312S246,257.906,246,257.906L246.25,293H192.5
            L192.25,255.125z" />
          </g>
          <g id="left" clip-path="url(#eyeclippath_1_)">

            <circle id="ball_1_" fill="#FFF4A6" stroke="#000000" stroke-width="1.9629" stroke-miterlimit="10" cx="173.822" cy="245.187" r="27.066" />
            <rect id="eye" x="179" y="235" width="5" height="5" />
            <path id="eyelidbottom" d="M147.25,253c0,0,9.5-10.25,29.5-10.25s24.25,13,24.25,13v36.5L159.25,288l-11,8.5L147.25,253z" />
            <path id="eyelid" d="M147.25,243c0,0,9.5-10.25,29.5-10.25s24.25,13,24.25,13v-25.5L159.25,216l-11,8.5L147.25,243z" />
          </g>
        </g>
        <path fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M232.338,218.927
        c-19.868-1.987-62.914-8.609-62.914-8.609s-13.907-3.973-25.166,10.596L133,236.146c0,0-11.258,17.219-4.636,32.451
        s15.231,26.49,32.45,20.53c17.219-5.96,28.477-9.272,43.708-7.285s22.517,5.298,22.517,5.298l29.801-15.232
        c0,0,8.609-7.285,8.609-25.828C265.45,225.379,252.206,220.914,232.338,218.927z M234.987,267.934
        c-15.232,0-68.212-5.298-68.212-5.298s-17.219-3.311-17.881-23.179s13.245-22.517,13.245-22.517l74.834,9.271
        c0,0,22.517-1.325,22.517,19.205S250.219,267.934,234.987,267.934z" />
      </g>
    </g>
    <g id="booze">
      <g id="arm">
        <path fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M290.333,424.333C293,425,336.333,431,349,413
        s17.999-55.332-12.667-85.333L361,308.334c0,0,39.333,40,31.333,91.333S338.334,457.666,303,456.333
        C267.667,455,262.333,445,262.333,445L290.333,424.333z" />
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M319.167,425.375c0,0-5.5,6.292-5.167,13.959
        s2.334,12,9.334,17" />
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M339.395,420.896c0,0-2.745,8.309,0.446,15.288
        c3.19,6.979,7.168,10.721,15.534,12.723" />
        <path fill="none" stroke="#000000" stroke-width="2.2261" stroke-miterlimit="10" d="M355.125,401.286
        c0,0,2.811,9.325,10.18,13.646c7.368,4.32,13.543,5.092,22.445,1.568" />
        <path fill="none" stroke="#000000" stroke-width="2.1018" stroke-miterlimit="10" d="M359.231,379.463
        c0,0,7.624,5.2,15.788,4.154c8.162-1.046,12.615-3.498,17.34-11.138" />
        <path fill="none" stroke="#000000" stroke-width="1.9761" stroke-miterlimit="10" d="M354.006,353.205
        c0,0,8.443,2.062,15.363-1.527c6.92-3.59,9.63-6.684,11.381-14.928" />
      </g>
      <path id="hand" fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M355.667,326.333
      c0,0,10.999-8.333,9.333-15.333s-14.333-43-14.333-43l-45.333,7l4,33.333l26,22C335.334,330.333,341.334,336.666,355.667,326.333z
      " />
      <g id="bottle">
        <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M351.667,273c0,0,3.333,20.334-13.667,31
        s-29,2-29,2" />
        <path id="background" fill="#AA582B" stroke="#B77351" stroke-width="2" stroke-miterlimit="10" d="M331.667,291l41.666-28.667
        c0,0,7-2.667,4.667-9.333c-5.541-15.834-13.667-38.333-13.667-38.333s-0.999-6-8.666-7.333s-37-8.667-37-8.667s-3.001-1-7.334,2
        s-55,44.667-55,44.667S252,249.667,251,255s-4.333,24-4.333,24s-1,2.667-5.667,6s-16,13.333-17,16c-1,2.667-9.704,2.07-12.333,7
        c-2.667,5-3,8.667-1.667,12.667s7.667,13.333,14.667,14s13-2.999,14.667-7.333s-0.667-3.666,6.333-5S260.333,312,260.333,312
        S262,309,273,310s22,1.667,22,1.667s5.666,0.667,11.333-3.667C312,303.667,331.667,291,331.667,291z" />
        <g id="liquidclip">
          <defs>
            <path id="clip_2_" d="M224.667,334.667c6.995,0.718,13-2.999,14.667-7.333s-0.667-3.666,6.333-5S260.333,312,260.333,312
            S262,309,273,310s22,1.667,22,1.667s5.666,0.667,11.333-3.667c5.667-4.333,25.334-17,25.334-17l41.666-28.667
            c0,0,7-2.667,4.667-9.333c-5.541-15.834-13.667-38.333-13.667-38.333s-0.999-6-8.666-7.333s-37-8.667-37-8.667
            s-3.001-1-7.334,2s-55,44.667-55,44.667S252,249.667,251,255s-4.333,24-4.333,24s-1,2.667-5.667,6s-16,13.333-17,16
            c-1,2.667-9.704,2.07-12.333,7c0,0-1,2.333-3.167,7.667c-2.131,5.245-4.667,4.334-15.5,5.167s-8.167,1.666-11.5,9.333
            s-4.167,6.334-9,8s-3.5,4.583-3.5,4.583l19-2.75l15.5-2.5l11.75-0.5C215.25,337,218.166,334,224.667,334.667z" />
          </defs>
          <clipPath id="clip_1_">
            <use xlink:href="#clip_2_" overflow="visible" />
          </clipPath>
          <path id="liquid" clip-path="url(#clip_1_)" fill="#633016" d="M266,171.75c0,0,6.25-6.75,16,0.5s14.5,0.75,19.75-2
          s11,2.5,16.5,4.25s2-3,15.75-3.75s8.5,5.5,19.75,5.25s10.25-4,19.75-4.5s9.75,77.5,9.75,77.5l-5.5,27L302,315.5l-36-0.25
          l-25.938,9.875c0,0-1.249,4.327-4.562,6.5c-1.906,1.25-3.862,2.062-5.125,2.312c-3.625,0.719-6.375,0.125-6.375,0.125
          s-5.781-0.469-11.375-8.688s-2.688-13.125-2.688-13.125s-4.271-6.75-17.604-6.416c-4.763,0.119-6.052-8.413-11.667-9.667
          c-6.015-1.343-11.49,3.595-16.5,3.667c-9.291,0.131-16.167-3.5-16.167-3.5L121,176c0,0,36.25-11.166,52-10.666
          S194.667,176.25,207.667,176s18.25-7,26-8S255.25,171.5,266,171.75z" />
        </g>
        <g id="foreground">
          <path id="glass" opacity="0.4" fill="#AA582B" stroke="#B77351" stroke-width="2" stroke-miterlimit="10" d="M331.667,291
          l41.666-28.667c0,0,7-2.667,4.667-9.333c-5.541-15.834-13.667-38.333-13.667-38.333s-0.999-6-8.666-7.333s-37-8.667-37-8.667
          s-3.001-1-7.334,2s-55,44.667-55,44.667S252,249.667,251,255s-4.333,24-4.333,24s-1,2.667-5.667,6s-16,13.333-17,16
          c-1,2.667-9.704,2.07-12.333,7c-2.667,5-3,8.667-1.667,12.667s7.667,13.333,14.667,14s13-2.999,14.667-7.333
          s-0.667-3.666,6.333-5S260.333,312,260.333,312S262,309,273,310s22,1.667,22,1.667s5.666,0.667,11.333-3.667
          C312,303.667,331.667,291,331.667,291z" />
          <path fill="none" stroke="#B77351" stroke-miterlimit="10" d="M314.668,205l13,38.667c0,0,1,4.667,7.333,5.333
          s29.667,5.333,29.667,5.333" />
          <path fill="none" stroke="#B77351" stroke-miterlimit="10" d="M326.334,204.667l-3.666-0.333c0,0-2,0.333-1,2.333
          s1.666,3.333,1.666,3.333" />
          <path fill="none" stroke="#B77351" stroke-miterlimit="10" d="M354.917,211.417c0,0,3.833-0.083,4.5,4.75" />
          <path fill="none" stroke="#B77351" stroke-miterlimit="10" d="M369.834,244.167c0,0,4,6-0.75,6.25" />
          <path fill="none" stroke="#B77351" stroke-miterlimit="10" d="M330.917,237.083c0.084,0.333,2.584,6.833,6.417,7.583" />
          <line fill="none" stroke="#B77351" stroke-miterlimit="10" x1="324.666" y1="251.667" x2="269.166" y2="292.833" />
          <path fill="none" stroke="#B77351" stroke-miterlimit="10" d="M252.999,260.833l10.001,30c0,0,0.667,5.333,6.334,7.417
          c2.223,0.817,29.165,7.75,29.165,7.75s2.501,0.666,3.667,0" />
          <path fill="#FFB08D" stroke="#4F3429" stroke-linejoin="round" stroke-miterlimit="10" d="M300.5,207.875l16.833,48.792
          l51.792,9.708L317,302l-41.333-10c0,0-3.667-0.333-6.667-8.333s-14.25-38.542-14.25-38.542L300.5,207.875z" />

          <line fill="none" stroke="#B77351" stroke-width="0.6336" stroke-miterlimit="10" x1="312.333" y1="260.749" x2="277.166" y2="286.833" />
        </g>
      </g>
      <path id="thumb" fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M332,293l-14-12.333
      c0,0-7.999-3.667-11.666,2.667s-0.334,11-0.334,11l9.667,9.333c0,0,7.333,6.334,14-0.333S332,293,332,293z" />
    </g>
    <g id="body">

      <ellipse fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="276.334" cy="431.334" rx="21.684" ry="33.941" />
      <polygon fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="291.667,499.667 281,393.667 
      194.333,363 100.333,419.667 117.667,504.334     " />
      <path fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M281,393.667c0,0-20-36.666-50-38
      s-79.333,4.667-88.667,12.667s-34.667,33.333-42,51.333C100.333,419.667,191.667,358.334,281,393.667z" />
      <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M157.5,417.5c0,0,27.086-13.727,55.5-16c37.5-3,52.5,6.5,52.5,6.5
      s4,0,5,8s12.25,84.375,12.25,84.375L166.625,503L151,428.5C151,428.5,148,422,157.5,417.5z" />
      <ellipse fill="none" stroke="#000000" stroke-width="0.982" stroke-miterlimit="10" cx="268.25" cy="479" rx="6.75" ry="6.5" />
    </g>
    <g id="otherarm">

      <ellipse transform="matrix(0.9898 -0.1423 0.1423 0.9898 -62.8667 20.4058)" fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="111.249" cy="449.782" rx="25.751" ry="31.552" />
      <path fill="#596170" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M116.333,447.917c0,0-5.333-8.625-14.667-8.625
      S42.333,487,34.333,508H79c0,0,30-39.749,37.333-42.416C116.333,465.584,121,459.5,116.333,447.917z" />
      <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M73.333,460.334c0,0,22.75-1.75,23.417,24.916" />
      <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M49.333,485.334c0,0,22.667-3.833,23.333,22.833" />
    </g>
  </g>
  <path id="bg2" fill="#333" d="M0,0v513h503V0H0z M250,495.813c-129.684,0-234.813-105.13-234.813-234.813
  C15.187,131.316,120.316,26.187,250,26.187c129.684,0,234.813,105.129,234.813,234.813C484.813,390.684,379.684,495.813,250,495.813
  z" />
</svg>
<!-- <img src="http://www.reactiongifs.us/wp-content/uploads/2013/07/bender_chugging_liquor_futurama.gif" alt="" /> -->
<canvas id="canvas"></canvas>
<!-- <div id="slider"></div> -->
<!-- <button class="replay">Replay?</button> -->

body {
 margin:0;
 background: #333;
 width: 100vw;
}
svg {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-event: none;
  // background: transparent;
}

[fill="#596170"] {
  fill: #b3b3b3;
}

#bg {
  fill: #D4C3C3;
}

var bender = $('#bender'),
  booze = bender.find('#booze'),
  liquid = bender.find('#liquid'),
  liquidMask = bender.find('#clip_1_'),
  teeth = bender.find('#teeth'),
  teethHole = bender.find('#teethhole'),
  eyes = bender.find('#eye_1_, #eye'),
  lowerLid = bender.find('#eyelidbottom, #eyelidbottom_1_'),
  upperLid = bender.find('#eyelid, #eyelid_1_');

var tl = new TimelineLite(),
  canvas = document.getElementById("canvas"),
  ctx = canvas.getContext("2d"),
  W = window.innerWidth,
  H = window.innerHeight;

canvas.width = W;
canvas.height = H;

$(window).on('resize', function() {
  setInterval(function() {
    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = W;
    canvas.height = H;
  }, 500)
});

//Setup
tl
  .add('start')
  .set(teeth, {
    y: 35
  })
  .set(teethHole, {
    transformOrigin: 'top center',
    x: 8
  })
  .set(booze, {
    transformOrigin: '50% 95%'
  });

// Bring Bender In
tl
  .add('benderIn', 'start')
  .from(bender, 1, {
    y: '100%',
    rotation: -30,
    x: -100
  })
  .add('benderInDone');

// rotate the arm
tl
  .add('armRotate', 'benderInDone')
  .to(teeth, 0.2, {
    y: 0
  }, 'armRotate+=0.2')
  .to(eyes, 0.1, {
    y: -10
  }, 'armRotate+=0.2')
  .fromTo(lowerLid, 0.6, {
    y: 100
  }, {
    y: -5
  }, 'armRotate-=0.2')
  .from(booze, 0.3, {
    rotation: 180,
    x: -100
  }, 'armRotate')
  .add('armRotateDone');

//drink the booze
tl
  .add('drink', 'armRotateDone')
  .to(teeth, 0.25, {
    x: 3,
    y: 3,
    repeat: 6,
    yoyo: true
  })
  .to(liquid, 2.5, {
    y: 180
  }, 'drink')
  .to(liquidMask, 2.5, {
    y: -180
  }, 'drink')
  .add('drinkDone');

// rotate the arm down
tl
  .add('armRotateDown', 'drinkDone')
  .to(eyes, 0.4, {
    y: 0
  }, 'armRotateDown')
  .to(teeth, 0.2, {
    y: 35
  }, 'armRotateDown')
  .to(lowerLid, 0.6, {
    y: 100
  }, 'armRotateDown')
  .to(booze, 0.3, {
    rotation: 100,
    x: -30
  }, 'armRotateDown')
  .add('armRotateDownDone');

//Set on fire
tl
  .add('setOnFire', 'armRotateDownDone')
  .call(function() {
    setOnFire();
  })
  .from(teethHole, 0.2, {
    scaleY: 0
  })
  .to(upperLid, 0.1, {
    y: -30
  }, 'setOnFire');

// Fire
setOnFire = function() {

  var particles = [];

  var particle_count = 200;
  for (var i = 0; i < particle_count; i++) {
    particles.push(new particle());
  }

  function particle() {
    this.speed = {
      x: 5 + Math.random() * 25,
      y: -15 + Math.random() * 20
    };
    this.location = {
      x: W / 2,
      y: (H / 2 + 45)
    };
    // Size
    this.radius = 10 + Math.random() * 30;

    // Life
    this.life = 20 + Math.random() * 10;
    this.remaining_life = this.life;

    // colors
    this.r = Math.round((Math.random() * 255) + 100);
    this.g = Math.round(Math.random() * 100);
    this.b = Math.round(Math.random() * 50);
  }

  function draw() {
    ctx.globalCompositeOperation = "source-over";
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "lighter";

    for (var i = 0; i < particles.length; i++) {
      var p = particles[i];
      ctx.beginPath();
      p.opacity = Math.round(p.remaining_life / p.life * 100) / 100

      var gradient = ctx.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);
      gradient.addColorStop(0, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");
      gradient.addColorStop(0.5, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", " + p.opacity + ")");
      gradient.addColorStop(1, "rgba(" + p.r + ", " + p.g + ", " + p.b + ", 0)");

      ctx.fillStyle = gradient;
      ctx.arc(p.location.x, p.location.y, p.radius, Math.PI * 2, false);
      ctx.fill();

      p.remaining_life--;
      p.radius--;
      p.location.x += p.speed.x;
      p.location.y += p.speed.y;

      if (p.remaining_life < 0 || p.radius < 0) {
        particles[i] = new particle();
      }
    }
  }

  var interval = window.setInterval(draw, 33);
}