<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="lil-guy" x="0" y="0" viewBox="0 0 109 85" enable-background="new 0 0 109 85" xml:space="preserve">
  <linearGradient id="wingb_1_" gradientUnits="userSpaceOnUse" x1="103.9" y1="58.3" x2="101.6" y2="41">
    <stop offset="0" stop-color="#FFED92"/>
    <stop offset="1" stop-color="#7D491F"/>
  </linearGradient>
  <ellipse id="wingb" fill="url(#wingb_1_)" cx="101.8" cy="42.9" rx="6" ry="8.1"/>
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="16.3" y1="-4" x2="18" y2="8.6" gradientTransform="matrix(-1 0 0 1 98.3076 0)">
    <stop offset="0" stop-color="#FFED92"/>
    <stop offset="1" stop-color="#7D491F"/>
  </linearGradient>
  <path fill="url(#SVGID_1_)" d="M80.7 5.4C80.7 5.4 80.7 5.4 80.7 5.4 80.7 5.4 80.7 5.4 80.7 5.4z"/>
  <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="12.5" y1="-24.5" x2="42.4" y2="63.3" gradientTransform="matrix(-1 0 0 1 98.3076 0)">
    <stop offset="0" stop-color="#FFED92"/>
    <stop offset="1" stop-color="#7D491F"/>
  </linearGradient>
  <path fill="url(#SVGID_2_)" d="M22.6 35.4c0 0 0 2.3 0.3 3.7 0 0 1.6-17.7 14.4-27 12.8-9.3 26.1-8.8 26.1-8.8S57.9 4.1 55 5.6c0 0 12.9-2.8 25.7-0.2C80.3 5.3 74 4.1 63 5.9c0 0 15.5-2.1 26.4 6.7 0 0-1.1-1.6-2.5-2.5 0 0 18.2 7.9 16.6 34.5 -1.1 18.9-12.8 26.2-12.8 26.2s2.1-2.4 2.1-3.7c0 0-2.6 3.9-10.9 7.1 -1.3 1.2-2.5 2.5-2.3 3.5 0 0-1.2-0.5-1.2-1.5 0 0-2.1 1.8-2.1 3.2 0 0-1-0.8-1.1-1.7 0 0-1.5 1-1.5 1.7 0 0-0.7-0.5-0.7-1.5 0 0-0.9 2-1.6 2.7 0 0 0.1-1.6-2.2-2.5 0 0 0.2 1.1-0.2 1.5 0 0 0-1.1-2.5-2 -0.6 0.1-1.2 0.1-1.9 0.2 -1.6 0.1-3.1 0.2-4.6 0.1 -0.8 0.2-1.8 0.5-2.1 1.3 0 0-0.7-2-2.5-1.2 -1 0.4-1.1 1-0.9 1.4C54 78.7 53.2 78 52 78.6c0 0-0.6-0.9-1.7 0.1 0 0-0.5-1.4-2.1-2.6 0 0 0.2 1.2-0.2 2.2 0 0-0.6-2.4-3.4-3.7 0 0 0.4 0.5 0.1 1.4 0 0-0.4-1.2-1.8-2.3C33.9 69 28.3 61.7 26.2 57.3 22.7 50.1 21.1 42.5 22.6 35.4z"/>
  <path fill="#FFFFFF" d="M38.3 46.2c-0.6-4.6-2.3-20.7 24.2-23.6 0 0-7.6 3.3-8.5 3.7 0 0 12.7-4.6 17.8 1.7 5.1 6.2 7.2 17.1-1.7 28.5 0 0-1.5-2.2-0.9-4.2 0 0-6.6 13-17.9 10.4 -11.3-2.5-12.7-11-12.7-11s1.4 2.7 2.7 3.5C41.3 55.1 39 51.4 38.3 46.2z"/>
  <path fill="#FFFFFF" d="M102.2 40c-0.5-3.1-1.7-10.9-8-15.6 0 0 0.2 0.8 0.3 1.6 0 0-2.9-3.2-5.2-2 0.6 0.1 3.1 0.5 0.9 0.9C89.4 25 93 56.1 96.9 56.2c3.9 0.1 4.7-3.8 4.7-3.8s-0.5 0.7-1.1 0.7C100.6 53.1 103.2 46.9 102.2 40z"/>
  <defs>
    <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="51.2" y="30.2" width="18.3" height="18.2">
      <feColorMatrix type="matrix" values="1"/>
    </filter>
  </defs>
  <mask maskUnits="userSpaceOnUse" x="51.2" y="30.2" width="18.3" height="18.2" id="SVGID_3_">
    <g filter="url(#Adobe_OpacityMaskFilter)">
      <radialGradient id="SVGID_4_" cx="909.8" cy="1636.5" r="1.2" gradientTransform="matrix(2.540000e-02 -7.8246 7.8923 0.3337 -12877.9307 6612.2393)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#FFFFFF"/>
        <stop offset="1" stop-color="#010101"/>
      </radialGradient>
      <path fill="url(#SVGID_4_)" d="M60.6 29.8c5.4 0.2 9.7 4.7 9.7 10.1 0 5.3-4.4 9.5-9.8 9.2 -5.4-0.2-9.7-4.7-9.7-10.1C50.8 33.7 55.2 29.6 60.6 29.8z"/>
    </g>
  </mask>
  <path opacity="0.8" mask="url(#SVGID_3_)" fill="#010101" d="M60.4 30.2c5.1 0.2 9.2 4.5 9.1 9.5 0 5-4.1 8.9-9.2 8.7 -5.1-0.2-9.2-4.5-9.1-9.5C51.2 33.8 55.3 29.9 60.4 30.2z"/>
  <circle fill="#010101" cx="60.4" cy="39.1" r="6.9"/>
  <path fill="#6CC9C6" d="M52.7 39.1c0-4.2 3.4-7.6 7.6-7.6 4.2 0 7.6 3.4 7.6 7.6 0 4.2-3.4 7.6-7.6 7.6C56.2 46.8 52.7 43.3 52.7 39.1zM54.1 39.1c0 3.5 2.8 6.3 6.3 6.3 3.5 0 6.3-2.8 6.3-6.3 0-3.5-2.8-6.3-6.3-6.3C56.9 32.9 54.1 35.7 54.1 39.1z"/>
  <defs>
    <filter id="Adobe_OpacityMaskFilter_1_" filterUnits="userSpaceOnUse" x="53.3" y="32" width="14.2" height="14.2">
      <feColorMatrix type="matrix" values="1"/>
    </filter>
  </defs>
  <mask maskUnits="userSpaceOnUse" x="53.3" y="32" width="14.2" height="14.2" id="SVGID_5_">
    <g filter="url(#Adobe_OpacityMaskFilter_1_)">
      <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="38.1" y1="31.7" x2="38.1" y2="48.6" gradientTransform="matrix(-1 0 0 1 98.3076 0)">
        <stop offset="0" stop-color="#FFFFFF"/>
        <stop offset="0.1" stop-color="#C5C3C3"/>
        <stop offset="0.3" stop-color="#7E7B7B"/>
        <stop offset="0.5" stop-color="#504D4D"/>
        <stop offset="0.6" stop-color="#31302F"/>
        <stop offset="0.8" stop-color="#1A1A1A"/>
        <stop offset="0.9" stop-color="#080908"/>
        <stop offset="1" stop-color="#010101"/>
      </linearGradient>
      <circle fill="url(#SVGID_6_)" cx="60.2" cy="39.2" r="7.9"/>
    </g>
  </mask>
  <circle opacity="0.5" mask="url(#SVGID_5_)" fill="#FFFFFF" cx="60.4" cy="39.1" r="7.1"/>
  <circle fill="#FFFFFF" cx="63.5" cy="36" r="1.9"/>
  <circle fill="#FFFFFF" cx="61.1" cy="33.7" r="1.1"/>
  <defs>
    <filter id="Adobe_OpacityMaskFilter_2_" filterUnits="userSpaceOnUse" x="92.2" y="28.1" width="6.8" height="16.4">
      <feColorMatrix type="matrix" values="1"/>
    </filter>
  </defs>
  <mask maskUnits="userSpaceOnUse" x="92.2" y="28.1" width="6.8" height="16.4" id="SVGID_7_">
    <g filter="url(#Adobe_OpacityMaskFilter_2_)">
      <radialGradient id="SVGID_8_" cx="910.8" cy="1607.2" r="1.1" gradientTransform="matrix(-0.7537 -7.7882 3.1694 2.440162e-02 -4311.8569 7090.6162)" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#FFFFFF"/>
        <stop offset="1" stop-color="#010101"/>
      </radialGradient>
      <path fill="url(#SVGID_8_)" d="M94.9 27.8c2 0 3.9 3.9 4.4 8.7 0.5 4.8-0.7 8.7-2.7 8.7 -2 0-3.9-3.9-4.4-8.7C91.7 31.7 92.9 27.8 94.9 27.8z"/>
    </g>
  </mask>
  <path opacity="0.8" mask="url(#SVGID_7_)" fill="#010101" d="M94.8 28.1c1.8 0 3.7 3.7 4.1 8.2 0.4 4.5-0.7 8.2-2.5 8.2 -1.8 0-3.7-3.7-4.1-8.2C91.9 31.8 93 28.1 94.8 28.1z"/>
  <path opacity="0.5" fill="#25B6A5" d="M92.9 36.5c-0.4-3.8 0.6-7 2.1-7.1 1.5-0.1 3 2.8 3.4 6.6 0.4 3.8-0.6 7-2.1 7.1C94.8 43.2 93.2 40.3 92.9 36.5z"/>
  <path fill="#010101" d="M93.6 36.4c0.3 3.3 1.6 5.9 2.8 5.8 1.2-0.1 2.7-3.2 2.4-6.5 -0.3-3.3-2.3-5.6-3.5-5.5C94 30.3 93.3 33.1 93.6 36.4z"/>
  <defs>
    <filter id="Adobe_OpacityMaskFilter_3_" filterUnits="userSpaceOnUse" x="93.2" y="29.8" width="5.6" height="12.7">
      <feColorMatrix type="matrix" values="1"/>
    </filter>
  </defs>
  <mask maskUnits="userSpaceOnUse" x="93.2" y="29.8" width="5.6" height="12.7" id="SVGID_9_">
    <g filter="url(#Adobe_OpacityMaskFilter_3_)">
      <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="47.6" y1="14.8" x2="47.6" y2="30.1" gradientTransform="matrix(-0.9506 9.321949e-02 9.764928e-02 0.9953 139.0898 10.2644)">
        <stop offset="0" stop-color="#FFFFFF"/>
        <stop offset="0" stop-color="#F2F2F1"/>
        <stop offset="0.2" stop-color="#969292"/>
        <stop offset="0.4" stop-color="#5B5958"/>
        <stop offset="0.6" stop-color="#373535"/>
        <stop offset="0.8" stop-color="#1E1D1D"/>
        <stop offset="0.9" stop-color="#0A0A0A"/>
        <stop offset="1" stop-color="#010101"/>
      </linearGradient>
      <path fill="url(#SVGID_10_)" d="M93 36.6c0.4 3.9 1.9 7 3.4 6.9 1.5-0.1 3-3.5 2.6-7.5 -0.4-3.9-2.5-6.9-4-6.8C93.5 29.3 92.6 32.6 93 36.6z"/>
    </g>
  </mask>
  <path opacity="0.5" mask="url(#SVGID_9_)" fill="#FFFFFF" d="M93.3 36.4c0.3 3.5 1.7 6.3 3.1 6.1 1.3-0.1 2.8-3.2 2.4-6.7 -0.3-3.5-2.3-6.1-3.7-6C93.8 29.9 93 32.9 93.3 36.4z"/>
  <ellipse transform="matrix(-0.9371 0.349 -0.349 -0.9371 200.1291 30.2291)" fill="#FFFFFF" cx="97.3" cy="33.1" rx="0.7" ry="1.7"/>
  <ellipse transform="matrix(-0.9638 0.2668 -0.2668 -0.9638 196.562 36.041)" fill="#FFFFFF" cx="95.8" cy="31.4" rx="0.4" ry="1"/>
  <linearGradient id="wingt_1_" gradientUnits="userSpaceOnUse" x1="233.6" y1="10.7" x2="236" y2="-35.1" gradientTransform="matrix(0.5946 -1.9455 -0.9563 -0.2923 -151.0457 495.2623)">
    <stop offset="0" stop-color="#FFED92"/>
    <stop offset="1" stop-color="#7D491F"/>
  </linearGradient>
  <path id="wingt" fill="url(#wingt_1_)" d="M13 56.8c0 0 1.3-2.2 2.7-3 0 0-2.9 3-9.2-2.8 0 0 1.9-2.5 4.2-2.6 0 0-2.7-0.6-4.5-0.1 -5 1.2 8.3-12.4 12.9-13.4 1.6-0.3 4.4-3.2 9.3 0.2 0 0 8.3-0.9 6.5 8.3C32.3 56.4 16.8 61 13 56.8z"/>
  <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="83.8" y1="64.6" x2="84.4" y2="53.9">
    <stop offset="0" stop-color="#FFED92"/>
    <stop offset="1" stop-color="#7D491F"/>
  </linearGradient>
  <path fill="url(#SVGID_11_)" d="M79.2 53.8c0 0 5-4.5 9.7-1 0 0 1.9 3.5 0.5 4 0 0-1.5-0.9-2.7 0.5 0 0-2.5 1.3-3.7 0 0 0-2.1-1.2-2.9 0C80 57.3 77.6 58.5 79.2 53.8z"/>
  <path fill="#CC794F" d="M75.5 64.8c0 0 6.1-3.6 7.6-2.4 1.4 1.1 3.3-0.2 3.3-0.2s0.6-1.2 4.5 0C90.9 62.1 88.3 66.8 75.5 64.8z"/>
  <path fill="#A09F9F" d="M33.8 18.9c0 0-2.1-12-6.9-13.4s-2.1-2.4 0-2.3c2.1 0.1 9.2 2.3 9.2 2.3s8.9 2.6 9.2 5.6S41.3 18 41.3 18 36.1 23.1 33.8 18.9z"/>
  <path fill="#A09F9F" d="M96 16.8c0 0 1.4-8.3 4.8-9.3s1.4-1.6 0-1.6c-1.4 0.1-6.4 1.6-6.4 1.6s-6.2 1.8-6.4 3.9c-0.2 2.1 2.7 4.8 2.7 4.8S94.4 19.7 96 16.8z"/>
</svg>

<div class="wrap">
  <a class="replay">Replay</a>
  <div class="check">
    Autorotate: true or false<br>
    <input type="checkbox" id="ch1" class="ch1" checked=""/>
    <label class="checktrue" for="ch1"></label>
  </div><!--check-->
</div><!--wrap-->
body {
  background-color: #472b34;
  margin: 0;
  font-family: 'Lato';
  font-style: italic;
}

svg {
  width: 109px;
  height: 85px;
  position: absolute;
}

.replay {
  float: left;
  background: #222;
  color: #555;
  padding: 14px;
  cursor: pointer;
  border-radius: 3px;
  transition: 0.5s ease all;
  &:hover {
    background: #170A0A;
  }
}

.wrap {
  position: fixed;
  bottom: 20px;
  left: 50%;
  color: #555;
  width: 300px;
  margin-left: -150px;
  .check {
    float: left;
    margin-left: 30px;
  }
  input { 
    position:absolute; 
    left:-9999px; 
  }
}

.checktrue {
  position: relative; 
  display: block;
  margin: 5px 0 0 45px;
  width: 55px; 
  height: 26px;
  cursor: pointer;
  border-radius: 15px;
  transition: 350ms;
  background: linear-gradient(rgba(#000,0.07),rgba(#333,0)),#444;
}

.checktrue::after {
  position: absolute; content:'';
  width: 20px; 
  height: 20px;
  top: 3px; 
  left: 5px;
  border-radius: 50%;
  transition: 250ms ease-in-out;
  background: linear-gradient(#555 10%,#444);
  box-shadow:
    0 0.1em 0.15em -0.05em rgba(#666,.5
    ) inset,
    0 0.2em 0.2em -0.12em rgba(#000,.5);
}

.checktrue::before {
  position: absolute; 
  content:'';
  width: 42px; 
  height: 16px;
  top: 5px; 
  left: 7px;
  border-radius: 15px;
  transition: 250ms ease-in-out;
  background: linear-gradient(rgba(#000,0.07),rgba(#555,0.1)),#343434;
  box-shadow:
    0 0.05em 0.15em -0.1em rgba(#000,.5) inset,
    0 0.04em 0.06em -0.01em rgba(#555,.5),
    0 0 0 0 rgba(#000,.5) inset;
}

input:checked + .checktrue::before {
  box-shadow:
    0 0.08em 0.15em -0.1em rgba(#000,.5) inset,
    0 0.05em 0.08em -0.01em rgba(#555,.5),
    3em 0 0 0 rgba(#7ca39c,.7) inset;
}

input:checked + .checktrue::after {
	left: 30px;
}
//cache the repeated variables
var tl = new TimelineMax(),
  lilG = (".lil-guy");

function lilGuyGo(autoRotate) {
  // bring playhead back to beginning and clear all tweens
  tl.progress(0).clear() 
  // set the initial rotation to be close to the direction he's headed in
  .set(lilG, {
    rotation: 40
  });
  //tween added to timeline with the specified bezier paths
  tl.to(lilG, 3, {
    bezier: {
      type: "soft",
      values: [{
        x: 0,
        y: 50
      }, {
        x: 150,
        y: 100
      }, {
        x: 300,
        y: 50
      }, {
        x: 500,
        y: 200
      }, {
        x: 700,
        y: 100
      }, {
        x: 900,
        y: 80
      }],
      autoRotate: autoRotate
    },
    //ease for slip-n-slide-like animation wheeee
    ease: Circ.easeInOut
  });
}
lilGuyGo(true);

$(document).ready(function() {
  //replay button
  $(".replay").on('click', function() {
    tl.restart();
  });

  //check the checkbox to make the toggle work for autoRotate true or false
  $('.ch1').click(function() {
    var isChecked = $('#ch1').is(':checked');
    if (isChecked) {
      lilGuyGo(true);
    } else {
      lilGuyGo(false);
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js