cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- video for reference --><div id="youtube"><iframe src="https://www.youtube.com/embed/FoB9OiTJw40?rel=0" frameborder="0"></iframe></div><!-- video for reference -->

<!-- 
Can't see the video in the bottom left corner? 
You simply need to opt-in to YouTube's HTML5 video player at: 
https://www.youtube.com/html5

Detailed explination here:
https://blog.codepen.io/2013/09/12/youtube-video-player-and-codepen/
-->

<svg version="1.1" id="bass" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="80 149 240 270" enable-background="new 80 149 240 270" xml:space="preserve">
<g id="legLeft">
  <rect x="128.4" y="315.3" fill="#0F1218" width="12.3" height="78.1"/>
  <g>

      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="171.9071" y1="554.0963" x2="157.6129" y2="473.0288" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="130.8" y="327.2" opacity="0.43" fill="url(#SVGID_1_)" enable-background="new    " width="2.1" height="66.5"/>

      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="178.4071" y1="554.0963" x2="164.1129" y2="473.0288" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="136" y="327.2" opacity="0.43" fill="url(#SVGID_2_)" enable-background="new    " width="2.1" height="66.5"/>
  </g>
  <g id="footLeft">
    <path fill="#0F1218" d="M134.5,387.9c-9.1,0-16.5,6.8-16.5,15.3h33.1C151,394.7,143.6,387.9,134.5,387.9z"/>

      <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="168.135" y1="567" x2="168.135" y2="547.92" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
      <stop  offset="0.3518" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.41" fill="url(#SVGID_3_)" enable-background="new    " d="M134.5,387.9c-9.1,0-16.5,6.8-16.5,15.3h33.1
      C151,394.7,143.6,387.9,134.5,387.9z"/>
  </g>
  <g id="kneeLeft">
    <ellipse fill="#0F1218" cx="134.5" cy="356" rx="9" ry="9"/>
    <path fill="#262C34" d="M129.2,358.9c1.6,3,5.4,4.2,8.3,2.7c3-1.6,4.2-5.4,2.6-8.5c-1.6-3-5.4-4.2-8.3-2.7
      C128.8,352,127.6,355.8,129.2,358.9z"/>
  </g>
</g>
<g id="legRight">
  <rect x="176.5" y="315.3" fill="#0F1218" width="12.3" height="78.1"/>
  <g>

      <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="231.9071" y1="554.0963" x2="217.6129" y2="473.0288" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="178.8" y="327.2" opacity="0.43" fill="url(#SVGID_4_)" enable-background="new    " width="2.1" height="66.5"/>

      <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="238.4071" y1="554.0963" x2="224.1129" y2="473.0288" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="184" y="327.2" opacity="0.43" fill="url(#SVGID_5_)" enable-background="new    " width="2.1" height="66.5"/>
  </g>
  <g id="footRight">
    <path fill="#0F1218" d="M182.7,387.9c9.1,0,16.5,6.8,16.5,15.3h-33C166.2,394.7,173.6,387.9,182.7,387.9z"/>

      <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="228.3225" y1="567" x2="228.3225" y2="547.92" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
      <stop  offset="0.3518" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.41" fill="url(#SVGID_6_)" enable-background="new    " d="M182.7,387.9c9.1,0,16.5,6.8,16.5,15.3h-33
      C166.2,394.7,173.6,387.9,182.7,387.9z"/>
  </g>
  <g id="kneeRight">
    <ellipse fill="#0F1218" cx="182.7" cy="356" rx="9" ry="9"/>
    <path fill="#262C34" d="M177.2,358.9c1.6,3,5.4,4.2,8.3,2.7c3-1.6,4.2-5.4,2.6-8.5c-1.6-3-5.4-4.2-8.3-2.7
      C176.8,352,175.6,355.8,177.2,358.9z"/>
  </g>
</g>
<g id="armRight">
  <g>
    <path id="armbase" fill="#0F1218" d="M210.1,254.2c0.2,7.6,2.6,15.1,6,21.4c8.9,16.6,23.8,25.3,41.5,30.9l-3,9.8
      c-20.5-6.4-37.7-17.4-47.8-36.2c-4.1-7.6-6.9-16.6-7-25.7L210.1,254.2z"/>

      <linearGradient id="armhighlight_1_" gradientUnits="userSpaceOnUse" x1="269.5043" y1="503.6725" x2="269.5043" y2="388.8342" gradientTransform="matrix(-0.3678 0.7105 0.7105 0.3678 20.2437 -63.3791)">
      <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path id="armhighlight" opacity="0.43" fill="url(#armhighlight_1_)" enable-background="new    " d="M204.3,261.7
      c-0.7,0.1-1.4,0.2-2.1,0.2c6.4,30.4,36.2,56.6,75.4,54.2c0-0.7,0.2-1.4,0.2-2.2C239.6,316.5,210.5,291,204.3,261.7z M208.4,261
      c-0.7,0.1-1.4,0.2-2.1,0.4c6.1,28.3,34.4,53.1,71.6,50.5c0.1-0.6,0.2-1.4,0.2-2.2C241.9,312.4,214.4,288.4,208.4,261z"/>
  </g>
  <g id="elbowRight">
    <ellipse fill="#0F1218" cx="223.7" cy="293.1" rx="8.2" ry="8.2"/>
    <path fill="#262C34" d="M219.5,295.1c-1.1-2.2-0.2-5.1,2.2-6.2c2.3-1.2,5-0.2,6.2,2.1c1.1,2.2,0.2,5.1-2.2,6.2
      C223.5,298.4,220.6,297.4,219.5,295.1z"/>
  </g>
</g>
<g id="shoulderRight">
  <path id="_x3C_Path_x3E__1_" fill="#0F1218" d="M194.7,253.4l8-1.1c5,9.8,6.7,20.1,4.5,30.9l-8,1.1L194.7,253.4z"/>

    <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="252.5725" y1="417.6719" x2="252.5725" y2="377.8719" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
    <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
    <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
  </linearGradient>
  <polygon opacity="0.43" fill="url(#SVGID_7_)" enable-background="new    " points="198.7,252.9 203.3,283.7 205.5,283.4
    200.8,252.6   "/>

    <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="256.635" y1="417.7" x2="256.635" y2="377.9" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
    <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
    <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
  </linearGradient>
  <path opacity="0.43" fill="url(#SVGID_8_)" enable-background="new    " d="M207.2,283.1c0.6-2.8,0.9-5.5,0.9-8.2l-2.2-14.9
    c-0.8-2.6-1.9-5.2-3.2-7.7h-0.1L207.2,283.1L207.2,283.1z"/>
</g>
<g id="torso">
  <rect id="neck" x="139.1" y="233.1" fill="#231F20" width="39" height="26.5"/>
  <path id="shirt_1_" fill="#0F1218" d="M197.1,251.6h-38.5h-38.5c-6.8,25.1-6.4,50.2,0,75.4h38.5h38.5
    C203.6,301.8,203.9,276.8,197.1,251.6z"/>
  <path fill="#1C1F20" d="M163.8,257.6c0-3.4,1.5-5.9-4.8-6.1c-5.4-0.1-4.8,2.7-4.8,6.1c0,2.4-0.3,4.5,1.5,5.5c0,0.3,0,0.6,0,0.9
    l-1.1,48.2c0.2,1.7,4.5,6.1,4.5,6.1s3.4-4.5,4.5-6.1l-1.6-48.3c0-0.2,0-0.5,0-0.7C163.9,262.2,163.8,260.1,163.8,257.6z"/>
  <g id="shine">

      <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="207.3174" y1="478.3484" x2="188.3276" y2="370.6517" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.43" fill="url(#SVGID_9_)" enable-background="new    " d="M181.8,327h-2.1v-75.4h2.1V327z M186.8,251.5h-2.1
      v75.4h2.1V251.5z M191.2,251.5h-2.1v75.4h2.1V251.5z M196.4,251.5h-2.1v75.4h2.1V251.5z M122.4,251.5h-2.2v75.4h2.1L122.4,251.5
      L122.4,251.5z M126.6,251.5h-2.1v75.4h2.1V251.5z M131,251.5h-2.1v75.4h2.1V251.5z M135.4,251.5h-2.1v75.4h2.1V251.5z"/>
  </g>
  <g id="necklace">
    <g>
      <g>
        <path fill="none" stroke="#FBCC34" stroke-miterlimit="10" d="M136.3,256.2c0,0,0.1,0.2,0.2,0.3"/>
        <path fill="none" stroke="#FBCC34" stroke-miterlimit="10" stroke-dasharray="1.0077,1.0077" d="M136.9,257.2
          c2.5,4.1,12.1,18.6,21.4,18.6c2.3,0,14.7-4.4,21-17.4"/>
        <path fill="none" stroke="#FBCC34" stroke-miterlimit="10" d="M179.6,258c0.1-0.2,0.1-0.2,0.2-0.4"/>
      </g>
    </g>
    <ellipse fill="#FBCC34" cx="159.1" cy="279.9" rx="2.2" ry="2.3"/>
  </g>
  <g id="coat">
    <path fill="#1E2025" d="M155.2,251.8l-0.8,7.4l-17.5-5.2c0,0,0.2-6,2-6.8C140.7,246.4,155.2,251.8,155.2,251.8z"/>
    <path fill="#1E2025" d="M162.4,251.8l0.8,7.4l17.5-5.2c0,0-0.2-6-2-6.8C176.8,246.4,162.4,251.8,162.4,251.8z"/>
    <polygon fill="#262C34" points="131,261 126.4,259.4 142.6,321 137.2,253.7     "/>
    <polygon fill="#262C34" points="185.2,261 189.7,259.4 173.5,321 178.9,253.7     "/>

      <rect x="191.6" y="308.8" transform="matrix(0.9664 -0.257 0.257 0.9664 -73.1132 60.6217)" fill="#262C34" width="7.6" height="2.4"/>

      <rect x="118.3" y="310" transform="matrix(-0.9742 -0.2257 0.2257 -0.9742 170.7277 641.9083)" fill="#262C34" width="7.6" height="2.4"/>
  </g>
</g>
<g id="guitar">
  <g id="guitarBody">
    <g opacity="0.4">
      <path fill="#FFFFFF" d="M184,285.9c-12.6-2.2-20.6,4.6-29.9,11c-6.8,4.7-14.1,5-18.6,4.5c-1.4-0.4-3-0.6-4.6-1
        c-0.1,0-0.2,0-0.2-0.1l0,0l0,0c-10.8-1.8-19.4-1.6-25.8,0.4c-0.2,0-0.4,0.1-0.6,0.2c-3,0.9-5.6,2.4-7.7,4.5
        c-2,1.9-3.5,4.2-4.4,6.9c-3,7.4-3,18.1,0.8,31.3c6.8,23.6,18.2,32.6,30.8,29c0.5-0.1,0.9-0.3,1.4-0.4c7.4-1.7,15.8-7,24-16.6
        c7.5-6,14.4-6.6,20.1-4c3,1.4,10.2,0.2,15-2.8c5.2-3.4,7.8-8.8,0.7-8.5c-18.2,0.6-13.2-13.9-13.2-13.9l9.4-2.7
        c0,0,4.2-9.5-2.6-11.8s-3.1-14-1-15c3.2-1.4,6.9-2.4,8.9-3.8C189.8,290.2,189.5,286.9,184,285.9z"/>
    </g>
    <g>
      <path fill="#FFFFFF" d="M119.7,374.7c-12.2,1-22.2-9.9-28.1-30.6c-3.7-13-3.9-24.1-0.7-32.1c0.9-2.8,2.5-5.4,4.6-7.4
        c2.2-2.2,5-3.8,8.1-4.8h0.1c0.2-0.1,0.4-0.2,0.7-0.2c6.6-2.1,15.7-2.2,26.2-0.4l0.3,0.1c1.5,0.2,3,0.6,4.6,0.9
        c1.8,0.2,3.5,0.2,5.3,0.1c4.6-0.3,8.9-1.8,12.6-4.4c0.8-0.6,1.6-1.1,2.5-1.8c6.7-4.7,13-9.2,21.4-9.8c2.2-0.2,4.6-0.1,7,0.3
        c3.9,0.6,5.1,2.4,5.5,3.7c0.5,1.8-0.5,3.8-2.7,5.7c-1.5,1.2-3.7,2-6,2.8c-1,0.4-2.2,0.8-3.1,1.2c-0.6,0.4-2.6,4.4-2.2,8.3
        c0.2,2.3,1.3,3.8,3,4.4c1.9,0.6,3.3,1.8,4.1,3.6c1.8,4.1-0.6,9.7-0.7,9.9l-0.3,0.6l-9.4,2.7c-0.4,1.4-1,5.4,1,8.2
        c1.9,2.6,5.6,3.8,11,3.5c3.8-0.2,5,1.3,5.4,2.5c0.9,2.7-2.1,6.1-5.4,8.2c-3,1.9-7,3.3-10.8,3.5l0,0c-1.5,0.1-3.7,0.1-5.4-0.6
        c-5.8-2.6-12.3-1.4-18.7,3.8c-8,9.2-16.5,15-24.6,16.9c-0.2,0.1-0.3,0.1-0.6,0.2s-0.5,0.2-0.8,0.2
        C122.4,374.3,121.1,374.6,119.7,374.7z M104.8,302C104.8,302,104.7,302,104.8,302l-0.4,0.2c-2.7,0.8-5.2,2.2-7.2,4.2
        c-1.9,1.8-3.3,4-4.1,6.4v0.1c-3,7.5-2.7,18.1,0.8,30.6c5.6,19.4,14.6,29.7,25.6,28.9c1.2-0.1,2.4-0.3,3.7-0.6
        c0.2-0.1,0.4-0.2,0.6-0.2c0.2-0.1,0.5-0.2,0.8-0.2c7.6-1.8,15.7-7.4,23.4-16.2l0.2-0.2c4.2-3.4,8.6-5.4,12.9-5.7
        c2.9-0.2,5.8,0.3,8.4,1.5c0.9,0.4,2.4,0.6,4.2,0.4l0,0c3.4-0.2,7-1.4,9.7-3.2c3.3-2.2,4.7-4.6,4.5-5.5c-0.2-0.4-1-0.9-3-0.8
        c-6.3,0.2-10.7-1.3-13.1-4.6c-3.4-4.6-1.4-10.7-1.3-11l0.2-0.6l9.4-2.7c0.5-1.4,1.6-5,0.5-7.4c-0.5-1.1-1.4-1.8-2.6-2.2
        c-2.9-1-4.6-3.5-4.7-7.1c-0.2-4.1,1.7-9.2,3.7-10.1c1-0.5,2.2-0.9,3.3-1.3c2.2-0.8,4.2-1.5,5.4-2.5c1.4-1.1,2.1-2.4,1.8-3.2
        c-0.2-0.9-1.5-1.6-3.6-1.9c-2.2-0.4-4.3-0.5-6.4-0.3c-7.7,0.6-13.8,4.9-20.2,9.4c-0.8,0.6-1.6,1.1-2.5,1.8
        c-4.1,2.8-8.6,4.4-13.7,4.8c-1.9,0.2-3.8,0.1-5.8-0.1h-0.2c-1.4-0.4-3-0.6-4.4-0.9c-0.2,0-0.3,0-0.6-0.1
        c-10.2-1.7-18.8-1.5-25,0.4L104.8,302z"/>
    </g>
  </g>
  <g id="guitarNeck">
    <path fill="#876436" d="M306.2,283.1L306.2,283.1c-0.3-0.1-0.6,0-1,0l-33.8-0.2l-2.4,4.3l-1.8,0.6v0.1l-99.4,26.6l3.4,12
      l98.6-29.7l0,0l6.3-1.8l6.1,4.5l16.6-8h0.7v-0.1c1.3,2.7,4.9,4.2,7.8,3.3c3-0.9,4.8-4.2,3.9-7.4
      C310.6,285,308.6,283.4,306.2,283.1z"/>
    <path fill="#676A7E" d="M306.5,277.7c0,0-1.6-0.9-2.7-1c-1.2,0-3.5,0.6-3.5,0.6l-0.2,3.5l3.3,1l3-0.9L306.5,277.7z"/>
    <path fill="#676A7E" d="M290,277.7c0,0-1.6-0.9-2.7-1c-1.2,0-3.5,0.6-3.5,0.6l-0.2,3.5l3.3,1l3-0.9L290,277.7z"/>
    <path fill="#676A7E" d="M298.3,277.7c0,0-1.6-0.9-2.7-1c-1.2,0-3.5,0.6-3.5,0.6l-0.2,3.5l3.3,1l3-0.9L298.3,277.7z"/>
    <path fill="#676A7E" d="M281.8,277.7c0,0-1.6-0.9-2.7-1c-1.2,0-3.5,0.6-3.5,0.6l-0.2,3.5l3.3,1l3-0.9L281.8,277.7z"/>
  </g>
</g>
<path id="handRight" fill="#C0CDDC" d="M253,318.1c-6.5,2.7-13.9-0.3-16.6-6.9c-1.4-3.4-1.4-7,0-10c0.2,0.4,0.2,0.7,0.3,1
  c1.8,4.1,6.7,5.8,11.3,4c4.6-1.9,6.7-6.7,4.9-10.8c-0.2-0.4-0.4-0.7-0.6-1c3.2,1.1,5.8,3.5,7.3,7C262.4,307.9,259.4,315.4,253,318.1
  z"/>
<g id="armLeft">
  <path fill="#0F1218" d="M109.6,258.5c-5,7.6-7.7,16.6-8.5,25.3c-2.2,21.4,6,40,19.4,56.7l7.9-6.4c-11.6-14.5-19.1-30.1-17.2-48.8
    c0.6-7.1,2.9-14.7,7-21.1L109.6,258.5z"/>

    <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="121.8417" y1="505.6612" x2="121.8417" y2="390.7583" gradientTransform="matrix(0.7402 -0.3034 0.3034 0.7402 -108.3945 12.3662)">
    <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
    <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
  </linearGradient>
  <path opacity="0.43" fill="url(#SVGID_10_)" enable-background="new    " d="M111.8,261.9c-0.6-0.4-1.2-0.8-1.8-1.2
    c-14.9,27.3-9,66.6,22.3,90.2c0.6-0.5,1-1,1.5-1.5C103.3,326.6,97.5,288.4,111.8,261.9z M115.4,264.2c-0.6-0.4-1.2-0.7-1.8-1.1
    c-13.8,25.6-8.2,62.8,21.9,84.8c0.6-0.4,1-1,1.5-1.5C107.6,325,102.2,288.8,115.4,264.2z"/>
  <path id="handLeft" fill="#C0CDDC" d="M117.3,333.9c-1.7,6.8,2.5,13.7,9.4,15.4c3.5,0.9,7,0.2,9.9-1.5c-0.4-0.1-0.7-0.1-1.1-0.2
    c-4.3-1.2-6.8-5.8-5.7-10.6c1.2-4.8,5.6-7.7,9.9-6.5c0.4,0.2,0.8,0.2,1,0.4c-1.6-3-4.4-5.2-8-6.2C126,323.1,119,327.1,117.3,333.9z
    "/>
  <g>
    <ellipse fill="#0F1218" cx="105.8" cy="301.1" rx="8.2" ry="8.2"/>
    <path fill="#262C34" d="M103.2,305c2.1,1.5,5,0.9,6.4-1.3c1.4-2.2,0.9-5-1.4-6.5c-2.1-1.5-5-0.9-6.4,1.3S101.1,303.5,103.2,305z"
      />
  </g>
</g>
<g id="shoulderLeft">
  <path id="_x3C_Path_x3E_" fill="#0F1218" d="M120.9,253.4l-8.1-1.1c-5,9.8-6.7,20.1-4.5,30.9l8,1.1L120.9,253.4z"/>

    <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="141.885" y1="417.7" x2="141.885" y2="377.9" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
    <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
    <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
  </linearGradient>
  <polygon opacity="0.43" fill="url(#SVGID_11_)" enable-background="new    " points="116.8,252.8 114.7,252.6 110.3,283.5
    110.9,283.6 112.4,283.7   "/>

    <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="137.6975" y1="417.7" x2="137.6975" y2="377.9" gradientTransform="matrix(0.8 0 0 0.8 0 -50.4)">
    <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
    <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
  </linearGradient>
  <path opacity="0.43" fill="url(#SVGID_12_)" enable-background="new    " d="M113,252.3h-0.2c-1.2,2.4-2.3,4.9-3.1,7.4l-2.3,16.1
    c0.1,2.4,0.4,4.8,0.9,7.2h0.2L113,252.3z"/>
</g>
<g id="head">
  <g id="earL">
    <path fill="#828C97" stroke="#000000" stroke-miterlimit="10" d="M126.3,219.1c0,3-2.4,5.4-5.4,5.4l0,0c-5.4,0-5.4,0-5.4-5.4v-8.6
      c0-5.4,0-5.4,5.4-5.4l0,0c3,0,5.4,2.4,5.4,5.4V219.1z"/>
    <path fill="#828C97" stroke="#000000" stroke-miterlimit="10" d="M131.2,220.1c0,3.6-3,6.6-6.6,6.6l0,0c-6.6,0-6.6,0-6.6-6.6
      v-10.5c0-6.6,0-6.6,6.6-6.6l0,0c3.6,0,6.6,3,6.6,6.6V220.1z"/>
  </g>
  <g id="earR_1_">
    <path fill="#828C97" stroke="#000000" stroke-miterlimit="10" d="M191.8,219.1c0,3,2.4,5.4,5.4,5.4l0,0c5.4,0,5.4,0,5.4-5.4v-8.6
      c0-5.4,0-5.4-5.4-5.4l0,0c-3,0-5.4,2.4-5.4,5.4V219.1z"/>
    <path fill="#828C97" stroke="#000000" stroke-miterlimit="10" d="M186.8,220.1c0,3.6,3,6.6,6.6,6.6l0,0c6.6,0,6.6,0,6.6-6.6v-10.5
      c0-6.6,0-6.6-6.6-6.6l0,0c-3.6,0-6.6,3-6.6,6.6V220.1z"/>
  </g>
  <path id="head_1_" fill="#828C97" stroke="#000000" stroke-miterlimit="10" d="M190.1,190.5h-31.5h-31.5c-5.6,17.9-5.3,35.8,0,53.8
    h31.5h31.5C195.4,226.2,195.6,208.3,190.1,190.5z"/>
  <polygon fill="#B1B2B2" points="170,243.8 146.6,243.8 143.9,222.8 173.2,222.8   "/>
  <rect id="mouth_1_" x="152.1" y="234.5" fill="#090D22" width="13" height="2.6"/>
  <g id="antena">
    <g>
      <g>
        <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M155.6,189.7c-0.1-0.8-2.1-19.2-22-21l0.1-1.4
          c21,1.9,23.2,22.2,23.2,22.4H155.6z"/>
      </g>
      <ellipse fill="#0F1218" cx="134.6" cy="168.1" rx="3.2" ry="3.3"/>
    </g>
    <g>
      <g>
        <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M161.6,189.7c0.1-0.8,2.1-19.2,22-21v-1.5
          c-21.1,2-23.2,22.2-23.4,22.4L161.6,189.7z"/>
      </g>
      <ellipse fill="#0F1218" cx="182.6" cy="168.1" rx="3.2" ry="3.3"/>
    </g>
  </g>
  <g>
    <path fill="#B1B2B2" d="M192.9,226.6L192.9,226.6h-68.6c-0.2-0.6-0.5-3.4-0.5-4.2h69.6C193.4,223,193.2,225.7,192.9,226.6z"/>
    <path id="visor" fill="#231F20" d="M196.7,209L196.7,209h-75.1c-0.5,2.1-0.4,12.1-0.2,13.1h75.2h0.4
      C197.3,221.1,197.3,210.9,196.7,209z"/>
    <path fill="#B1B2B2" d="M192.9,204.6L192.9,204.6h-68.6c-0.2,0.6-0.5,3.4-0.5,4.2h69.6C193.4,208.2,193.2,205.5,192.9,204.6z"/>
  </g>
</g>
</svg>










<svg version="1.1" id="pharrell" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="30 149 240 270" enable-background="new 30 149 240 270" xml:space="preserve">
<path id="handRight" display="none" fill="#96522D" d="M254.4,318.9c-6.5,2.7-13.9-0.3-16.6-6.9c-1.4-3.4-1.4-7,0-10
  c0.2,0.4,0.2,0.7,0.3,1c1.8,4.1,6.7,5.8,11.3,4c4.6-1.9,6.7-6.7,4.9-10.8c-0.2-0.4-0.4-0.7-0.6-1c3.2,1.1,5.8,3.5,7.3,7
  C263.8,308.7,260.8,316.2,254.4,318.9z"/>
<g id="legLeft">
  <rect x="136" y="316.1" fill="#0F1218" width="12.3" height="78.1"/>
  <g>

      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="181.4023" y1="280.9305" x2="167.1131" y2="361.9695" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="138.4" y="328" opacity="0.43" fill="url(#SVGID_1_)" enable-background="new    " width="2.1" height="66.5"/>

      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="187.9023" y1="280.9305" x2="173.6131" y2="361.9695" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="143.6" y="328" opacity="0.43" fill="url(#SVGID_2_)" enable-background="new    " width="2.1" height="66.5"/>
  </g>
  <g id="footLeft">
    <path fill="#0F1218" d="M142.1,388.7c-9.1,0-16.5,6.8-16.5,15.3h33.1C158.6,395.5,151.2,388.7,142.1,388.7z"/>

      <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="177.7577" y1="268" x2="177.7577" y2="287.08" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0.3518" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.41" fill="url(#SVGID_3_)" enable-background="new    " d="M142.1,388.7c-9.1,0-16.5,6.8-16.5,15.3h33.1
      C158.6,395.5,151.2,388.7,142.1,388.7z"/>
  </g>
  <g id="kneeLeft">
    <ellipse fill="#0F1218" cx="142.1" cy="356.8" rx="9" ry="9"/>
    <path fill="#262C34" d="M136.8,359.7c1.6,3,5.4,4.2,8.3,2.7c3-1.6,4.2-5.4,2.6-8.5c-1.6-3-5.4-4.2-8.3-2.7
      C136.4,352.8,135.2,356.6,136.8,359.7z"/>
  </g>
</g>
<g id="legRight">
  <rect x="184.1" y="316.1" fill="#0F1218" width="12.3" height="78.1"/>
  <g>

      <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="241.4023" y1="280.9305" x2="227.1131" y2="361.9695" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="186.4" y="328" opacity="0.43" fill="url(#SVGID_4_)" enable-background="new    " width="2.1" height="66.5"/>

      <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="247.9023" y1="280.9305" x2="233.6131" y2="361.9695" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="191.6" y="328" opacity="0.43" fill="url(#SVGID_5_)" enable-background="new    " width="2.1" height="66.5"/>
  </g>
  <g id="footRight">
    <path fill="#0F1218" d="M190.3,388.7c9.1,0,16.5,6.8,16.5,15.3h-33C173.8,395.5,181.2,388.7,190.3,388.7z"/>

      <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="237.8077" y1="268" x2="237.8077" y2="287.08" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0.3518" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.41" fill="url(#SVGID_6_)" enable-background="new    " d="M190.3,388.7c9.1,0,16.5,6.8,16.5,15.3h-33
      C173.8,395.5,181.2,388.7,190.3,388.7z"/>
  </g>
  <g id="kneeRight">
    <ellipse fill="#0F1218" cx="190.3" cy="356.8" rx="9" ry="9"/>
    <path fill="#262C34" d="M184.8,359.7c1.6,3,5.4,4.2,8.3,2.7c3-1.6,4.2-5.4,2.6-8.5c-1.6-3-5.4-4.2-8.3-2.7
      C184.4,352.8,183.2,356.6,184.8,359.7z"/>
  </g>
</g>
<g id="torso">
  <rect id="neck" x="146.7" y="233.9" fill="#7D4724" width="39" height="26.5"/>
  <g id="armRight">
    <g id="foreArmRight">
      <path fill="#0F1218" d="M219.3,298.9c-5.3,7.7-12.4,14.2-20.5,20.1l1,1.4c8.6-5.2,15.5-11.9,20.7-19.5c0.5,0.6,1,1,1.5,1.4
        c-5.3,7.7-12.3,14.6-21,19.8l1.3,1.8c9-5.4,16.3-12.6,21.7-20.6c0.7,0.3,1.4,0.4,2.2,0.5c-5.6,8.6-13.2,16.1-22.6,21.9l1.2,1.7
        c9.5-6.9,17.7-14.7,23.7-23.8C224.8,304.2,220.9,302.4,219.3,298.9z"/>
      <path fill="#0F1218" d="M222,302.2c-0.5-0.4-1-0.9-1.5-1.4c-5.2,7.6-12.1,14.4-20.7,19.5l1.2,1.8
        C209.7,316.8,216.8,309.9,222,302.2z"/>

        <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="284.6002" y1="335.5886" x2="284.6002" y2="450.4987" gradientTransform="matrix(0.573 0.5584 0.5584 -0.573 -164.3622 370.8262)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_7_)" enable-background="new    " d="M222,302.2c-0.5-0.4-1-0.9-1.5-1.4
        c-5.2,7.6-12.1,14.4-20.7,19.5l1.2,1.8C209.7,316.8,216.8,309.9,222,302.2z"/>
      <path fill="#0F1218" d="M226.2,303.7c-0.8-0.1-1.5-0.2-2.2-0.5c-5.4,8.1-12.6,15.1-21.7,20.6l1.2,1.8
        C213,319.8,220.6,312.2,226.2,303.7z"/>

        <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="289.9326" y1="335.5886" x2="289.9326" y2="450.4987" gradientTransform="matrix(0.573 0.5584 0.5584 -0.573 -164.3622 370.8262)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_8_)" enable-background="new    " d="M226.2,303.7c-0.8-0.1-1.5-0.2-2.2-0.5
        c-5.4,8.1-12.6,15.1-21.7,20.6l1.2,1.8C213,319.8,220.6,312.2,226.2,303.7z"/>
    </g>
    <g id="upperArm">
      <path id="upperarmBase" fill="#0F1218" d="M230.9,288.6c-1.2-4.8-2.9-9.5-5.2-14.1c-3.9-7.7-9.7-15.2-17-20.5l-6.1,8.2
        c6.1,4.6,10.9,10.8,14.2,17.2c1.8,3.5,3.1,7,4.1,10.6C223.4,287.2,227.6,286.6,230.9,288.6z"/>

        <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="271.0629" y1="331.1969" x2="271.0629" y2="446.1071" gradientTransform="matrix(0.793 0.1054 0.1054 -0.793 -43.2308 586.0244)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_9_)" enable-background="new    " d="M210.6,263.2c-0.6,0.5-1,1-1.5,1.4
        c6.2,6.6,10.7,14.9,13.3,24c0.6-0.4,1.3-0.7,2-0.9C221.6,278.5,216.9,270,210.6,263.2z"/>

        <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="275.3292" y1="331.1969" x2="275.3292" y2="446.1071" gradientTransform="matrix(0.793 0.1054 0.1054 -0.793 -43.2308 586.0244)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_10_)" enable-background="new    " d="M213.4,260.2c-0.4,0.5-0.9,1-1.4,1.6
        c6.6,7.1,11.6,16,14.4,25.7c0.7,0,1.5,0.1,2.2,0.2C225.8,277.2,220.5,267.8,213.4,260.2z"/>
    </g>
    <g id="elbowRight">
      <path fill="#0F1218" d="M231.2,288.7c-0.1-0.1-0.2-0.1-0.2-0.2c-0.7-0.4-1.4-0.7-2.2-0.9c-0.7-0.2-1.5-0.2-2.2-0.2
        c-0.7,0-1.4,0.2-2.1,0.3c-0.7,0.2-1.4,0.5-2,0.9c-0.6,0.3-1.1,0.8-1.6,1.3c-0.3,0.4-0.6,0.7-1,1.2c-2.5,3.8-1.4,8.9,2.3,11.4
        c0.2,0.1,0.4,0.2,0.6,0.3c0.6,0.4,1.4,0.6,2.1,0.8c0.7,0.2,1.4,0.2,2.2,0.2c0.7,0,1.4-0.2,2.1-0.4c0.7-0.2,1.4-0.6,2.1-1
        c0.6-0.4,1.1-0.9,1.7-1.4c0.2-0.3,0.5-0.6,0.7-1C236,296.2,234.9,291.2,231.2,288.7z"/>
      <path fill="#262C34" d="M228.8,299.6c-2.2,1.3-5.1,0.5-6.3-1.8c-1.2-2.3-0.5-5.1,1.8-6.3c2.2-1.3,5.1-0.5,6.3,1.8
        C232,295.5,231.2,298.5,228.8,299.6z"/>
    </g>
  </g>
  <g id="armRight_1_">
    <g>
      <path fill="#0F1218" d="M228.5,303.4c-3.8,0.8-7.6-1-9.2-4.6c-5.3,7.7-12.4,14.2-20.5,20.1l2.2,3.1c0,0,0,0,0,0l1.2,1.6l2.6,3.6
        c0.7-0.4,1.4-1,2-1.5C215.5,319.2,223,311.9,228.5,303.4z"/>

        <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="284.6002" y1="335.5886" x2="284.6002" y2="450.4987" gradientTransform="matrix(0.573 0.5584 0.5584 -0.573 -164.3622 370.8262)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_11_)" enable-background="new    " d="M222,302.2c-0.5-0.4-1-0.9-1.5-1.4
        c-5.2,7.6-12.1,14.4-20.7,19.5l1.2,1.8C209.7,316.8,216.8,309.9,222,302.2z"/>

        <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="289.9326" y1="335.5886" x2="289.9326" y2="450.4987" gradientTransform="matrix(0.573 0.5584 0.5584 -0.573 -164.3622 370.8262)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_12_)" enable-background="new    " d="M226.2,303.7c-0.8-0.1-1.5-0.2-2.2-0.5
        c-5.4,8.1-12.6,15.1-21.7,20.6l1.2,1.8C213,319.8,220.6,312.2,226.2,303.7z"/>
    </g>
    <g id="upperArm_1_">
      <path id="upperarmBase_1_" fill="#0F1218" d="M230.9,288.6c-1.2-4.8-2.9-9.5-5.2-14.1c-3.9-7.7-9.7-15.2-17-20.5l-6.1,8.2
        c6.1,4.6,10.9,10.8,14.2,17.2c1.8,3.5,3.1,7,4.1,10.6C223.4,287.2,227.6,286.6,230.9,288.6z"/>

        <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="271.0629" y1="331.1969" x2="271.0629" y2="446.1071" gradientTransform="matrix(0.793 0.1054 0.1054 -0.793 -43.2308 586.0244)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_13_)" enable-background="new    " d="M210.6,263.2c-0.6,0.5-1,1-1.5,1.4
        c6.2,6.6,10.7,14.9,13.3,24c0.6-0.4,1.3-0.7,2-0.9C221.6,278.5,216.9,270,210.6,263.2z"/>

        <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="275.3292" y1="331.1969" x2="275.3292" y2="446.1071" gradientTransform="matrix(0.793 0.1054 0.1054 -0.793 -43.2308 586.0244)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_14_)" enable-background="new    " d="M213.4,260.2c-0.4,0.5-0.9,1-1.4,1.6
        c6.6,7.1,11.6,16,14.4,25.7c0.7,0,1.5,0.1,2.2,0.2C225.8,277.2,220.5,267.8,213.4,260.2z"/>
    </g>
    <g id="elbowRight_1_">
      <path fill="#0F1218" d="M231.2,288.7c-0.1-0.1-0.2-0.1-0.2-0.2c-0.7-0.4-1.4-0.7-2.2-0.9c-0.7-0.2-1.5-0.2-2.2-0.2
        c-0.7,0-1.4,0.2-2.1,0.3c-0.7,0.2-1.4,0.5-2,0.9c-0.6,0.3-1.1,0.8-1.6,1.3c-0.3,0.4-0.6,0.7-1,1.2c-2.5,3.8-1.4,8.9,2.3,11.4
        c0.2,0.1,0.4,0.2,0.6,0.3c0.6,0.4,1.4,0.6,2.1,0.8c0.7,0.2,1.4,0.2,2.2,0.2c0.7,0,1.4-0.2,2.1-0.4c0.7-0.2,1.4-0.6,2.1-1
        c0.6-0.4,1.1-0.9,1.7-1.4c0.2-0.3,0.5-0.6,0.7-1C236,296.2,234.9,291.2,231.2,288.7z"/>
      <path fill="#262C34" d="M228.8,299.6c-2.2,1.3-5.1,0.5-6.3-1.8c-1.2-2.3-0.5-5.1,1.8-6.3c2.2-1.3,5.1-0.5,6.3,1.8
        C232,295.5,231.2,298.5,228.8,299.6z"/>
    </g>
  </g>
  <g id="shoulderRight">
    <path id="_x3C_Path_x3E__1_" fill="#0F1218" d="M206.6,284.9l8-1c2.5-10.8,0.9-21.1-3.8-31l-8.1,1L206.6,284.9z"/>

      <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="262.1077" y1="417.3" x2="262.1077" y2="457.0999" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <polygon opacity="0.43" fill="url(#SVGID_15_)" enable-background="new    " points="206.3,253.7 210.9,284.6 213.1,284.2
      208.4,253.4     "/>

      <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="266.1577" y1="417.3" x2="266.1577" y2="457.1" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.43" fill="url(#SVGID_16_)" enable-background="new    " d="M213.6,261c-0.9-2.6-1.9-5.3-3.3-7.8h-0.1l4.6,30.6
      c0.6-2.8,0.9-5.5,0.9-8.2L213.6,261z"/>
  </g>
  <path id="shirt_1_" fill="#0F1218" d="M204.7,252.4h-38.5h-38.5c-6.8,25.1-6.4,50.2,0,75.4h38.5h38.5
    C211.2,302.6,211.5,277.6,204.7,252.4z"/>
  <path id="tie" fill="#1C1F20" d="M171.4,258.4c0-3.4,1.5-5.9-4.8-6.1c-5.4-0.1-4.8,2.7-4.8,6.1c0,2.4-0.3,4.5,1.5,5.5
    c0,0.3,0,0.6,0,0.9l-1.1,48.2c0.2,1.7,4.5,6.1,4.5,6.1s3.4-4.5,4.5-6.1l-1.6-48.3c0-0.2,0-0.5,0-0.7
    C171.5,263,171.4,260.9,171.4,258.4z"/>
  <g id="shine">

      <linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="216.9076" y1="356.5731" x2="197.9078" y2="464.3268" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.43" fill="url(#SVGID_17_)" enable-background="new    " d="M189.4,327.8h-2.1v-75.4h2.1V327.8z M194.4,252.3
      h-2.1v75.4h2.1V252.3z M198.8,252.3h-2.1v75.4h2.1V252.3z M204,252.3H202v75.4h2.1V252.3z M130,252.3h-2.2v75.4h2.1L130,252.3
      L130,252.3z M134.2,252.3h-2.1v75.4h2.1V252.3z M138.6,252.3h-2.1v75.4h2.1V252.3z M143,252.3h-2.1v75.4h2.1V252.3z"/>
  </g>
  <g id="shoulderLeft">
    <g id="armLeft">
      <g id="upperArmLeft">
        <path id="upperarmBase_2_" fill="#0F1218" d="M118.3,297c2.5-4.2,4.6-8.8,6.2-13.8c2.6-8.2,3.8-17.6,2.2-26.6l-10.1,1.6
          c1.1,7.5,0.2,15.4-2,22.2c-1.2,3.8-2.7,7.2-4.5,10.3C113.9,290.8,117.3,293.3,118.3,297z"/>

          <linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="270.0103" y1="336.9857" x2="270.0103" y2="451.8959" gradientTransform="matrix(0.4906 0.6319 0.6319 -0.4906 -288.9074 319.847)">
          <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
        </linearGradient>
        <path opacity="0.43" fill="url(#SVGID_18_)" enable-background="new    " d="M121.6,264.7c-0.7,0-1.4-0.1-2.1,0
          c-0.3,9-2.9,18.1-7.4,26.4c0.7,0.2,1.4,0.4,2,0.7C118.8,283.4,121.3,274,121.6,264.7z"/>

          <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="274.3014" y1="336.9857" x2="274.3014" y2="451.8959" gradientTransform="matrix(0.4906 0.6319 0.6319 -0.4906 -288.9074 319.847)">
          <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
        </linearGradient>
        <path opacity="0.43" fill="url(#SVGID_19_)" enable-background="new    " d="M125.8,264.6c-0.6,0-1.4,0.1-2.1,0.2
          c-0.2,9.8-3,19.5-7.8,28.4c0.6,0.5,1,1.1,1.4,1.8C122.6,285.4,125.6,275,125.8,264.6z"/>
        <g id="elbowLeft">
          <g id="foreArmLeft">
            <path fill="#0F1218" d="M111.7,306.1c-3.8,0.3-7.4-2-8.5-5.7c-6.2,6.9-14.1,12.5-22.9,17.3l1.8,3.4c0,0,0,0,0,0l1,1.8l2.1,3.9
              c0.8-0.3,1.5-0.8,2.2-1.2C96.8,320.1,105.1,313.8,111.7,306.1z"/>

              <linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="284.083" y1="338.6788" x2="284.083" y2="453.5891" gradientTransform="matrix(0.5006 0.6241 0.6241 -0.5006 -288.8098 326.9603)">
              <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
              <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
            </linearGradient>
            <path opacity="0.43" fill="url(#SVGID_20_)" enable-background="new    " d="M104.8,304.1c-0.6-0.5-1-1-1.4-1.6
              c-6.1,7-13.8,12.8-23,16.9l1,1.9C90.8,317.1,98.6,311.2,104.8,304.1z"/>

              <linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="289.4425" y1="338.684" x2="289.4425" y2="453.5942" gradientTransform="matrix(0.5006 0.6241 0.6241 -0.5006 -288.8098 326.9603)">
              <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
              <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
            </linearGradient>
            <path opacity="0.43" fill="url(#SVGID_21_)" enable-background="new    " d="M108.8,306c-0.7-0.2-1.4-0.4-2.2-0.7
              c-6.4,7.3-14.5,13.4-24.1,17.8l1,1.9C93.6,320.4,102.1,313.9,108.8,306z"/>
            <path id="handLeft" fill="#96522D" d="M84.8,306.8c-3.1-2-6.6-2.6-9.9-1.8c0.2,0.1,0.6,0.3,1,0.5c3.8,2.4,4.6,7.6,1.8,11.7
              c-2.8,4.1-7.8,5.3-11.6,2.9c-0.3-0.2-0.6-0.5-0.9-0.7c0.6,3.3,2.6,6.3,5.5,8.4c5.9,3.9,13.8,2.4,17.8-3.4
              C92.4,318.4,90.7,310.6,84.8,306.8z"/>
          </g>
          <path fill="#0F1218" d="M118.4,296.4c0-0.1-0.1-0.2-0.1-0.3c-0.2-0.8-0.6-1.5-1-2.2c-0.4-0.6-0.9-1.2-1.4-1.8
            c-0.6-0.5-1.1-0.9-1.8-1.2c-0.6-0.3-1.4-0.6-2-0.7c-0.6-0.2-1.4-0.2-2-0.2c-0.5,0-1,0.1-1.5,0.2c-4.5,1-7.3,5.3-6.3,9.7
            c0.1,0.2,0.1,0.4,0.2,0.6c0.2,0.7,0.6,1.4,1,2c0.4,0.6,0.9,1.2,1.4,1.7s1.1,0.9,1.8,1.2c0.6,0.3,1.4,0.6,2.2,0.7
            c0.7,0.2,1.4,0.2,2.2,0.2c0.4,0,0.8-0.1,1.2-0.2C116.5,305.1,119.3,300.8,118.4,296.4z"/>
          <path fill="#262C34" d="M109.1,302.5c-2.5-0.6-3.9-3.3-3.3-5.7c0.7-2.5,3.3-3.9,5.8-3.2c2.5,0.6,3.9,3.3,3.3,5.7
            C114.2,301.8,111.5,303.2,109.1,302.5z"/>
        </g>
      </g>
    </g>
    <path id="_x3C_Path_x3E_" fill="#0F1218" d="M130.1,254.2l-8.1-1.1c-5,9.8-6.7,20.1-4.5,30.9l8,1.1L130.1,254.2z"/>
    <g>
      <g>
        <g>
          <g>
            <g>
              <g>
                <defs>
                  <path id="SVGID_22_" d="M125.7,285.1l-8-1.1c-2.3-10.8-0.6-21.1,4.3-31l8,1.1L125.7,285.1z"/>
                </defs>
                <clipPath id="SVGID_23_">
                  <use xlink:href="#SVGID_22_"  overflow="visible"/>
                </clipPath>

                  <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="150.9577" y1="417.3" x2="150.9577" y2="457.1" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
                  <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
                  <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
                </linearGradient>
                <path opacity="0.43" clip-path="url(#SVGID_23_)" fill="url(#SVGID_24_)" enable-background="new    " d="M119.5,284.3
                  l2.1,0.2l4.4-30.9l-2.1-0.3L119.5,284.3z M115.6,283.7l2.1,0.2l4.5-30.9l-2.2-0.3L115.6,283.7z"/>
              </g>
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
  <g id="coat">
    <path fill="#1E2025" d="M162.8,252.6l-0.8,7.4l-17.5-5.2c0,0,0.2-6,2-6.8C148.3,247.2,162.8,252.6,162.8,252.6z"/>
    <path fill="#1E2025" d="M170,252.6l0.8,7.4l17.5-5.2c0,0-0.2-6-2-6.8C184.4,247.2,170,252.6,170,252.6z"/>
    <polygon fill="#262C34" points="138.6,261.8 134,260.2 150.2,321.8 144.8,254.5     "/>
    <polygon fill="#262C34" points="192.8,261.8 197.3,260.2 181.1,321.8 186.5,254.5     "/>

      <rect x="199.2" y="309.6" transform="matrix(-0.9664 0.257 -0.257 -0.9664 479.1439 558.9752)" fill="#262C34" width="7.6" height="2.4"/>

      <rect x="126" y="310.8" transform="matrix(0.9742 0.2257 -0.2257 0.9742 73.7662 -21.2379)" fill="#262C34" width="7.6" height="2.4"/>
  </g>
</g>
<g id="head">
  <path id="head_2_" fill="#96522D" d="M197.5,245c5.3-18,5.5-35.9,0-53.8H166h-31.5c-5.6,17.9-5.3,35.8,0,53.8"/>
  <path id="mouth" fill="#200D0A" d="M176.7,233.5c0,2.7-0.4,4.8-0.9,4.8H155c-0.5,0-0.9-2.2-0.9-4.8c0-2.7,0.4-4.8,0.9-4.8h20.8
    C176.4,228.6,176.7,230.8,176.7,233.5z"/>
  <g>
    <path fill="#7E4228" d="M185.2,211.8c0,2-1.5,3.8-3.4,3.8H180c-1.9,0-3.4-1.6-3.4-3.8c0-2,1.5-3.8,3.4-3.8h1.8
      C183.7,208,185.2,209.7,185.2,211.8z"/>
    <path d="M180.2,213.6c-0.9,0-1.5-0.8-1.5-1.8c0-1,0.6-1.8,1.5-1.8h1.8c0.9,0,1.5,0.8,1.5,1.8c0,1-0.6,1.8-1.5,1.8H180.2z"/>
    <g>
      <path fill="#231F20" d="M187.7,203.4c0,0-0.9-0.5-2.3-1c-0.6-0.3-1.5-0.6-2.4-0.8c-0.5-0.1-0.9-0.2-1.4-0.3l-0.6-0.1h-0.6
        c-0.5,0-1,0-1.4,0.1s-0.9,0.2-1.3,0.3c-0.4,0.1-0.8,0.2-1.1,0.3c-0.2,0.1-0.4,0.1-0.5,0.2c-0.2,0.1-0.4,0.1-0.5,0.2
        c-0.3,0.2-0.6,0.3-0.9,0.4c-0.3,0.2-0.5,0.3-0.6,0.4c-0.4,0.2-0.6,0.4-0.6,0.4l-0.2-0.1c0,0,0.1-0.3,0.3-0.6
        c0.1-0.2,0.2-0.5,0.4-0.8c0.2-0.3,0.5-0.6,0.8-0.9c0.3-0.3,0.6-0.6,1.1-0.9c0.4-0.3,1-0.4,1.4-0.6c0.6-0.1,1-0.1,1.6-0.1
        c0.6,0.1,1,0.1,1.6,0.2l0.8,0.2c0.3,0.1,0.5,0.2,0.8,0.2c0.5,0.1,1,0.4,1.4,0.5c0.9,0.4,1.8,0.8,2.4,1.3c1.4,0.8,2.1,1.4,2.1,1.4
        L187.7,203.4z"/>
    </g>
    <path fill="#7E4228" d="M176.4,213.5c0,0,2.3-4.7,12.8,0.6c0,0,0.4-2.2-2.4-4.9C182.6,205,171.6,203.5,176.4,213.5z"/>
  </g>
  <g>
    <path fill="#7E4228" d="M151.2,209.2l1.8-0.2c1.9-0.2,3.5,1.3,3.8,3.4c0.2,2-1,3.8-3,4.2l-1.8,0.2c-1.9,0.2-3.5-1.3-3.8-3.4
      C148.1,211.2,149.5,209.4,151.2,209.2z"/>
    <path d="M151.7,214.8c-0.8,0-1.4-0.6-1.5-1.6c-0.1-0.5,0.1-1,0.4-1.4c0.1-0.2,0.5-0.5,1-0.6l1.8-0.2h0.1c0.8,0,1.4,0.8,1.5,1.6
      c0.1,1-0.5,1.9-1.3,2l-1.8,0.2C151.9,214.8,151.9,214.8,151.7,214.8z"/>
    <g>
      <path fill="#231F20" d="M144.8,205.2c0,0,0.6-0.8,1.9-1.8c0.6-0.5,1.4-1,2.2-1.4c0.5-0.2,0.9-0.5,1.4-0.6l0.8-0.3l0.8-0.3
        c0.5-0.2,1-0.3,1.6-0.4c0.6-0.1,1-0.1,1.6-0.1c0.6,0.1,1,0.2,1.5,0.4c0.5,0.2,0.9,0.4,1.3,0.6c0.3,0.3,0.6,0.6,0.9,0.8
        c0.2,0.3,0.4,0.6,0.5,0.8c0.3,0.4,0.4,0.6,0.4,0.6l-0.3,0.1c0,0-0.3-0.1-0.6-0.3c-0.2-0.1-0.4-0.2-0.6-0.4
        c-0.3-0.1-0.6-0.2-0.9-0.3c-0.2-0.1-0.3-0.1-0.5-0.1c-0.2,0-0.4-0.1-0.6-0.1c-0.4-0.1-0.8-0.1-1.1-0.2c-0.4,0-0.9-0.1-1.3-0.1
        c-0.5,0-1,0-1.4,0.1l-0.9,0.1l-0.6,0.2c-0.5,0.1-0.9,0.3-1.4,0.5c-0.9,0.4-1.6,0.6-2.3,1c-1.4,0.6-2.2,1.3-2.2,1.3L144.8,205.2z"
        />
    </g>
    <path fill="#7E4228" d="M157.4,214.1c0,0-2.8-4.4-12.6,2c0,0-0.6-2.1,1.8-5.2C150.2,206.3,161.1,203.5,157.4,214.1z"/>
  </g>
  <path id="mustache" opacity="0.4" fill="#231F20" enable-background="new    " d="M151.6,229.8l0.1-0.2h0.1L151.6,229.8z
     M152,229.1l0.3-0.4l0.2,0.2l-0.4,0.4L152,229.1z M152.5,228.3l0.4-0.3l0.2,0.3l-0.4,0.3L152.5,228.3z M153.2,227.7l0.4-0.3
    l0.3,0.4l-0.4,0.2L153.2,227.7z M154,227l0.4-0.3l0.3,0.4l-0.4,0.3L154,227z M154.8,226.5l0.4-0.3l0.3,0.5l-0.5,0.3L154.8,226.5z
     M155.6,226l0.5-0.3l0.2,0.6l-0.4,0.2L155.6,226z M156.4,225.5l0.5-0.2l0.3,0.6l-0.5,0.1L156.4,225.5z M157.4,225.1l0.4-0.2
    l0.3,0.6l-0.5,0.2L157.4,225.1z M158.3,224.8l0.5-0.2l0.2,0.9l-0.4,0.1L158.3,224.8z M159.2,224.5l0.5-0.1l0.2,0.8l-0.5,0.1
    L159.2,224.5z M160.2,224.3l0.5-0.1l0.2,0.8l-0.5,0.1L160.2,224.3z M161.2,224.1l0.5-0.1l0.1,0.9l-0.4,0.1L161.2,224.1z
     M162.1,223.9l0.5-0.1l0.1,1h-0.5L162.1,223.9z M163.2,223.8l0.5-0.1v1h-0.5V223.8z M164.1,223.7h0.5v1h-0.5V223.7z M165.6,224.6
    h-0.5v-1h0.5V224.6z M166,223.7h0.5v1H166V223.7z M167.1,223.8h0.5l-0.1,1l-0.5-0.1L167.1,223.8z M168,223.9l0.5,0.1l-0.1,0.9
    l-0.5-0.1L168,223.9z M169,224l0.5,0.1l-0.2,0.9l-0.4-0.1L169,224z M170,224.2l0.5,0.1l-0.2,0.9l-0.5-0.1L170,224.2z M170.9,224.5
    l0.5,0.1l-0.2,0.8l-0.5-0.1L170.9,224.5z M171.9,224.6l0.5,0.2l-0.3,0.8l-0.4-0.1L171.9,224.6z M172.8,225l0.4,0.2l-0.2,0.6
    l-0.5-0.2L172.8,225z M173.7,225.4l0.5,0.2l-0.3,0.6l-0.5-0.2L173.7,225.4z M174.6,225.8l0.5,0.3l-0.3,0.6l-0.4-0.3L174.6,225.8z
     M175.5,226.3l0.5,0.3l-0.3,0.5l-0.5-0.2L175.5,226.3z M176.4,226.9l0.4,0.3l-0.3,0.4l-0.4-0.3L176.4,226.9z M177.1,227.4l0.4,0.3
    l-0.2,0.3l-0.4-0.2L177.1,227.4z M177.9,228l0.4,0.4l-0.2,0.2l-0.4-0.3L177.9,228z M178.5,228.8l0.4,0.3l-0.2,0.2l-0.4-0.3
    L178.5,228.8z M179.2,229.6l0.1,0.2l0,0L179.2,229.6L179.2,229.6z"/>
  <g id="antena_1_">
    <g>
      <g>
        <path d="M162.9,188.9c-0.1-0.8-2.1-19.2-22-21l0.1-1.4c21,1.9,23.2,22.2,23.2,22.4L162.9,188.9z"/>
      </g>
      <ellipse fill="#6A6E8E" cx="142" cy="167.3" rx="3.2" ry="3.3"/>
    </g>
    <g>
      <g>
        <path d="M169,188.9c0.1-0.8,2.1-19.2,22-21l-0.1-1.4c-21.1,2-23.2,22.2-23.4,22.4L169,188.9z"/>
      </g>
      <ellipse fill="#6A6E8E" cx="190" cy="167.3" rx="3.2" ry="3.3"/>
    </g>
  </g>
  <g id="hair">
    <path fill="#494550" d="M181.4,193.4v-8.2c-10.2-3.7-20.6-3.8-30.9,0v8.2L181.4,193.4L181.4,193.4L181.4,193.4z"/>
    <rect x="134.4" y="191.2" fill="#494550" width="62.9" height="3.4"/>
    <path fill="#494550" d="M130.4,212.5c0,0,0-0.4,0.1-1c0.2-1.3,0.4-3.5,0.8-6.2c0.8-5,1.8-11.1,3-14.1l1,14.1H132L130.4,212.5z"/>
    <path fill="#494550" d="M201.4,212.4c0,0,0-0.4-0.1-1c-0.2-1.3-0.3-3.5-0.6-6.2c-0.8-5-2-11.1-3.3-14.1l-1,14.1h3.2L201.4,212.4z"
      />
  </g>
</g>
</svg>















<svg version="1.1" id="drummer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 149 240 270" enable-background="new 0 149 240 270" xml:space="preserve">
<g id="seat">
  <line fill="none" stroke="#5D5E61" stroke-width="5" stroke-miterlimit="10" x1="146" y1="330.9" x2="146" y2="393.7"/>
  <line fill="none" stroke="#5D5E61" stroke-width="5" stroke-miterlimit="10" x1="146" y1="379.6" x2="130.6" y2="394.9"/>
  <line fill="none" stroke="#5D5E61" stroke-width="5" stroke-miterlimit="10" x1="146" y1="379.6" x2="160.9" y2="394.5"/>
  <ellipse fill="#5D5E61" stroke="#231F20" stroke-miterlimit="10" cx="144.2" cy="328.2" rx="25.8" ry="2.6"/>
</g>
<g id="legLeft">
  <rect x="114.2" y="309.6" fill="#0F1218" width="12.3" height="78.1"/>
  <g id="footLeft">
    <path fill="#0F1218" d="M120.3,386.2c-9.1,0-16.5,6.8-16.5,15.3h33.1C136.8,393,129.4,386.2,120.3,386.2z"/>

      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="150.4399" y1="3.1004" x2="150.4399" y2="22.1804" gradientTransform="matrix(0.8 0 0 -0.8 0 404)">
      <stop  offset="0.3518" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.41" fill="url(#SVGID_1_)" enable-background="new    " d="M120.3,386.2c-9.1,0-16.5,6.8-16.5,15.3h33.1
      C136.8,393,129.4,386.2,120.3,386.2z"/>
  </g>
  <g id="kneeLeft">
    <ellipse fill="#0F1218" cx="120.3" cy="350.3" rx="9" ry="9"/>
    <path fill="#262C34" d="M115,353.2c1.6,3,5.4,4.2,8.3,2.7c3-1.6,4.2-5.4,2.6-8.5c-1.6-3-5.4-4.2-8.3-2.7
      C114.6,346.3,113.4,350.1,115,353.2z"/>
  </g>
</g>
<g id="legRight">
  <rect x="162.3" y="309.6" fill="#0F1218" width="12.3" height="78.1"/>
  <g id="footRight">
    <path fill="#0F1218" d="M168.5,386.2c9.1,0,16.5,6.8,16.5,15.3h-33C152,393,159.4,386.2,168.5,386.2z"/>

      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="210.6274" y1="3.1004" x2="210.6274" y2="22.1804" gradientTransform="matrix(0.8 0 0 -0.8 0 404)">
      <stop  offset="0.3518" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.41" fill="url(#SVGID_2_)" enable-background="new    " d="M168.5,386.2c9.1,0,16.5,6.8,16.5,15.3h-33
      C152,393,159.4,386.2,168.5,386.2z"/>
  </g>
  <g id="kneeRight">
    <ellipse fill="#0F1218" cx="168.5" cy="350.3" rx="9" ry="9"/>
    <path fill="#262C34" d="M163,353.2c1.6,3,5.4,4.2,8.3,2.7c3-1.6,4.2-5.4,2.6-8.5c-1.6-3-5.4-4.2-8.3-2.7
      C162.6,346.3,161.4,350.1,163,353.2z"/>
  </g>
</g>
<g id="torso">
  <rect id="neck" x="124.9" y="235.4" fill="#231F20" width="39" height="26.5"/>
  <path id="shirt_1_" fill="#0F1218" d="M182.9,253.9h-38.5h-38.5c-6.8,25.1-6.4,50.2,0,75.4h38.5h38.5
    C189.4,304.1,189.7,279.1,182.9,253.9z"/>
  <path id="tie" fill="#1C1F20" d="M149.6,259.9c0-3.4,1.5-5.9-4.8-6.1c-5.4-0.1-4.8,2.7-4.8,6.1c0,2.4-0.3,4.5,1.5,5.5
    c0,0.3,0,0.6,0,0.9l-1.1,48.2c0.2,1.7,4.5,6.1,4.5,6.1s3.4-4.5,4.5-6.1l-1.6-48.3c0-0.2,0-0.5,0-0.7
    C149.7,264.5,149.6,262.4,149.6,259.9z"/>
  <g id="shine">

      <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="189.6223" y1="86.7521" x2="170.6325" y2="194.4488" gradientTransform="matrix(0.8 0 0 -0.8 0 404)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.43" fill="url(#SVGID_3_)" enable-background="new    " d="M167.6,329.3h-2.1v-75.4h2.1V329.3z M172.6,253.8h-2.1
      v75.4h2.1V253.8z M177,253.8h-2.1v75.4h2.1V253.8z M182.2,253.8h-2.1v75.4h2.1V253.8z M108.2,253.8H106v75.4h2.1L108.2,253.8
      L108.2,253.8z M112.4,253.8h-2.1v75.4h2.1V253.8z M116.8,253.8h-2.1v75.4h2.1V253.8z M121.2,253.8h-2.1v75.4h2.1V253.8z"/>
  </g>
  <g id="necklace">
    <g>
      <g>
        <path fill="none" stroke="#FBCC34" stroke-miterlimit="10" d="M122.1,260.9c0,0,0.1,0.2,0.2,0.3"/>
        <path fill="none" stroke="#FBCC34" stroke-miterlimit="10" stroke-dasharray="1.0077,1.0077" d="M122.7,261.9
          c2.5,4.1,12.1,18.6,21.4,18.6c2.3,0,14.7-4.4,21-17.4"/>
        <path fill="none" stroke="#FBCC34" stroke-miterlimit="10" d="M165.4,262.7c0.1-0.2,0.1-0.2,0.2-0.4"/>
      </g>
    </g>
    <ellipse fill="#FBCC34" cx="144.9" cy="284.6" rx="2.2" ry="2.3"/>
  </g>
  <g id="coat">
    <path fill="#1E2025" d="M141,254.1l-0.8,7.4l-17.5-5.2c0,0,0.2-6,2-6.8C126.5,248.7,141,254.1,141,254.1z"/>
    <path fill="#1E2025" d="M148.2,254.1l0.8,7.4l17.5-5.2c0,0-0.2-6-2-6.8C162.6,248.7,148.2,254.1,148.2,254.1z"/>
    <polygon fill="#262C34" points="116.8,263.3 112.2,261.7 128.4,323.3 123,256     "/>
    <polygon fill="#262C34" points="171,263.3 175.5,261.7 159.3,323.3 164.7,256     "/>

      <rect x="177.4" y="311.1" transform="matrix(-0.9664 0.257 -0.257 -0.9664 436.5836 567.5939)" fill="#262C34" width="7.6" height="2.4"/>

      <rect x="104.1" y="312.3" transform="matrix(0.9742 0.2257 -0.2257 0.9742 73.5435 -16.2689)" fill="#262C34" width="7.6" height="2.4"/>
  </g>
  <g id="armRight">
    <g id="foreArmRight">
      <path id="forearmBase" fill="#0F1218" d="M200.5,306.1c-5.5,7.6-12.8,13.8-21.1,19.4l5.7,8.6c9.7-6.6,18.1-14.2,24.3-23.2
        C205.8,311.7,202.1,309.7,200.5,306.1z"/>

        <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="259.0544" y1="43.5107" x2="259.0544" y2="158.4209" gradientTransform="matrix(0.5565 0.5749 0.5749 -0.5565 -5.8403 216.1362)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_4_)" enable-background="new    " d="M201.7,308.1c-9,12.4-22.9,22.5-41,26.5
        c0.3,0.6,0.6,1.4,0.8,2c18.3-4.1,32.4-14.3,41.7-26.9C202.7,309.2,202.2,308.7,201.7,308.1z"/>

        <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="264.1173" y1="43.5107" x2="264.1173" y2="158.4209" gradientTransform="matrix(0.5565 0.5749 0.5749 -0.5565 -5.8403 216.1362)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_5_)" enable-background="new    " d="M162.2,338.6c0.3,0.6,0.6,1.3,0.8,2
        c19.5-4.6,34.6-15.7,44.2-29.4c-0.8-0.1-1.5-0.2-2.2-0.5C195.7,323.7,181.1,334.2,162.2,338.6z"/>
      <g id="handRightGroup">

          <line id="drumStick_1_" fill="none" stroke="#BD8648" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="172" y1="324.9" x2="149.8" y2="319.6"/>
        <path id="handLeft_1_" fill="#FBC926" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M164.8,326.3
          c1.1,1.3,2.9,1.9,4.6,1.5c2.4-0.6,3.8-3.1,3.2-5.5c-0.6-2.2-2.7-3.6-4.9-3.3c1.5-1.7,3.4-3,5.8-3.7c6.3-1.7,12.8,2,14.6,8.3
          c1.7,6.3-2,12.8-8.3,14.6c-6.3,1.7-12.8-2-14.6-8.3C164.9,328.6,164.8,327.4,164.8,326.3z"/>
      </g>
    </g>
    <g id="upperArm">
      <path id="upperarmBase" fill="#0F1218" d="M212.4,296.2c-1.2-4.8-3-9.5-5.3-14c-4-7.7-9.8-15.1-17.2-20.3l-6,8.3
        c6.1,4.5,11,10.7,14.3,17.1c1.8,3.5,3.2,7,4.2,10.6C204.9,294.9,209.1,294.3,212.4,296.2z"/>

        <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="248.3809" y1="50.9192" x2="248.3809" y2="165.8294" gradientTransform="matrix(0.7938 9.904000e-02 9.904000e-02 -0.7938 -13.5668 375.6683)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_6_)" enable-background="new    " d="M191.9,271.1c-0.6,0.5-1,1-1.5,1.4
        c6.2,6.6,10.8,14.8,13.4,23.9c0.6-0.4,1.3-0.7,2-0.9C203,286.2,198.2,277.8,191.9,271.1z"/>

        <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="252.4904" y1="50.9192" x2="252.4904" y2="165.8294" gradientTransform="matrix(0.7938 9.904000e-02 9.904000e-02 -0.7938 -13.5668 375.6683)">
        <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
      </linearGradient>
      <path opacity="0.43" fill="url(#SVGID_7_)" enable-background="new    " d="M194.6,268c-0.4,0.5-0.9,1-1.4,1.6
        c6.7,7,11.8,15.9,14.6,25.6c0.7,0,1.5,0.1,2.2,0.2C207.2,284.9,201.8,275.6,194.6,268z"/>
    </g>
    <g id="elbowRight">
      <path fill="#0F1218" d="M212.6,296.4c-0.1-0.1-0.2-0.1-0.2-0.2c-0.7-0.4-1.4-0.7-2.2-0.9c-0.7-0.2-1.5-0.2-2.2-0.2
        s-1.4,0.2-2.1,0.3c-0.7,0.2-1.4,0.5-2,0.9c-0.6,0.3-1.1,0.8-1.6,1.3c-0.3,0.4-0.6,0.7-1,1.2c-2.5,3.8-1.4,8.9,2.4,11.4
        c0.2,0.1,0.4,0.2,0.6,0.3c0.6,0.4,1.4,0.6,2.1,0.8c0.7,0.2,1.4,0.2,2.2,0.2c0.7,0,1.4-0.2,2.1-0.4c0.7-0.2,1.4-0.6,2.1-1
        c0.6-0.4,1.1-0.9,1.7-1.4c0.2-0.3,0.5-0.6,0.7-1C217.5,303.9,216.5,298.9,212.6,296.4z"/>
      <path fill="#262C34" d="M210.4,307.3c-2.2,1.3-5.1,0.6-6.3-1.7c-1.2-2.3-0.6-5.1,1.8-6.3c2.2-1.3,5.1-0.6,6.3,1.7
        C213.6,303.2,212.7,306.1,210.4,307.3z"/>
    </g>
  </g>
  <g id="shoulderRight">
    <path id="_x3C_Path_x3E__1_" fill="#0F1218" d="M180.5,255.7l8-1.1c5,9.8,6.7,20.1,4.5,30.9l-8,1.1L180.5,255.7z"/>

      <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="234.8774" y1="147.4278" x2="234.8774" y2="187.2278" gradientTransform="matrix(0.8 0 0 -0.8 0 404)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <polygon opacity="0.43" fill="url(#SVGID_8_)" enable-background="new    " points="184.5,255.2 189.1,286 191.3,285.7
      186.6,254.9     "/>

      <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="238.9399" y1="147.4004" x2="238.9399" y2="187.2004" gradientTransform="matrix(0.8 0 0 -0.8 0 404)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.43" fill="url(#SVGID_9_)" enable-background="new    " d="M191.7,262.5c-0.8-2.7-1.9-5.3-3.2-7.9h-0.1l4.6,30.6
      c0.6-2.8,0.8-5.5,0.9-8.2L191.7,262.5z"/>
  </g>
  <g id="shoulderLeft">
    <g id="armLeft">
      <g id="upperArmLeft">
        <path id="upperarmBase_2_" fill="#0F1218" d="M92.2,297.7c0.4-3.6,1-7.2,2.2-11c2.1-6.8,5.8-13.8,11-19.4l-7.4-7
          c-6.4,6.5-10.8,14.8-13.3,23.1c-1.6,5-2.4,9.9-2.8,14.9C85,295.7,89.2,295.7,92.2,297.7z"/>

          <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="282.4292" y1="66.0483" x2="282.4292" y2="180.9585" gradientTransform="matrix(-0.7633 0.2396 -0.2396 -0.7633 348.133 339.3557)">
          <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
        </linearGradient>
        <path opacity="0.43" fill="url(#SVGID_10_)" enable-background="new    " d="M88.3,296.2c0.7,0.1,1.4,0.2,2,0.6
          c1.1-9.4,4.1-18.3,9-25.9c-0.6-0.5-1.1-0.8-1.8-1.2C92.6,277.6,89.5,286.7,88.3,296.2z"/>

          <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="286.6429" y1="66.0483" x2="286.6429" y2="180.9585" gradientTransform="matrix(-0.7633 0.2396 -0.2396 -0.7633 348.133 339.3557)">
          <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
          <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
        </linearGradient>
        <path opacity="0.43" fill="url(#SVGID_11_)" enable-background="new    " d="M84,296.9c0.6-0.3,1.4-0.6,2.2-0.6
          c1-10.1,4.3-19.6,9.8-27.8c-0.6-0.5-1-1-1.6-1.4C88.6,275.9,85.2,286.2,84,296.9z"/>
        <g id="elbowLeft">
          <g id="foreArmLeft">
            <path id="forearmBase_2_" fill="#0F1218" d="M88.7,312.4c9,6.3,19.4,10.6,30.8,13.4l2.4-9.8c-9.8-2.5-18.7-5.8-26.4-11
              C95.4,308.7,92.6,311.8,88.7,312.4z"/>

              <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="278.8387" y1="72.5354" x2="278.8387" y2="187.4457" gradientTransform="matrix(-0.3273 0.73 -0.73 -0.3273 286.6309 144.8774)">
              <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
              <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
            </linearGradient>
            <path opacity="0.43" fill="url(#SVGID_12_)" enable-background="new    " d="M94.1,308.9c13,8.9,29.8,13.5,48.5,11.1
              c0-0.7,0.1-1.4,0.2-2.2c-18.4,2.4-34.7-2.2-47.5-10.9C94.9,307.7,94.6,308.5,94.1,308.9z"/>

              <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="284.147" y1="72.5241" x2="284.147" y2="187.4342" gradientTransform="matrix(-0.3273 0.73 -0.73 -0.3273 286.6309 144.8774)">
              <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
              <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
            </linearGradient>
            <path opacity="0.43" fill="url(#SVGID_13_)" enable-background="new    " d="M92.8,310.6c-0.6,0.5-1.2,0.9-1.9,1.3
              c13.8,9.8,31.7,15,51.6,12.6c-0.1-0.7,0.1-1.4,0.2-2.2C123.4,324.6,106.2,319.7,92.8,310.6z"/>
            <g id="handLeftGroup">

                <line id="drumStick" fill="none" stroke="#BD8648" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" x1="134.2" y1="315.6" x2="169.3" y2="286.9"/>
              <path id="handLeft" fill="#FBC926" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M141.1,314.7
                c-0.6,1.6-2.2,2.7-4,2.7c-2.5,0.1-4.6-1.9-4.6-4.4c-0.1-2.2,1.6-4.2,3.8-4.6c-1.9-1.2-4.2-1.9-6.6-1.8
                c-6.6,0.2-11.8,5.6-11.6,12.2s5.6,11.8,12.2,11.6c6.6-0.2,11.8-5.6,11.6-12.2C141.7,317,141.5,315.8,141.1,314.7z"/>
            </g>
          </g>
          <path fill="#0F1218" d="M81.4,309.9c0.2,0.3,0.6,0.6,1,0.8c0.6,0.4,1.2,0.8,1.8,1.1c0.8,0.3,1.5,0.6,2.2,0.6
            c0.7,0.1,1.4,0.1,2.1,0s1.4-0.3,2.2-0.6c0.7-0.2,1.3-0.6,1.9-1.1c0.2-0.2,0.3-0.2,0.6-0.4c3.3-3,3.5-8.2,0.3-11.5
            c-0.3-0.3-0.7-0.8-1.1-1c-0.5-0.4-1.1-0.8-1.8-1c-0.6-0.2-1.3-0.4-2-0.6c-0.7-0.1-1.4-0.1-2.1,0c-0.8,0.2-1.5,0.3-2.2,0.6
            c-0.7,0.3-1.4,0.8-2.1,1.3c-0.1,0.1-0.2,0.2-0.2,0.2C78.6,301.5,78.3,306.6,81.4,309.9z"/>
          <path fill="#262C34" d="M83,302.9c0.8-2.4,3.5-3.7,5.9-2.8c2.5,0.8,3.8,3.5,2.9,5.8c-0.8,2.4-3.5,3.7-5.9,2.8
            C83.5,308,82.1,305.3,83,302.9z"/>
        </g>
      </g>
    </g>
    <path id="_x3C_Path_x3E_" fill="#0F1218" d="M108.3,255.7l-8.1-1.1c-5,9.8-6.7,20.1-4.5,30.9l8,1.1L108.3,255.7z"/>

      <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="126.1899" y1="147.4004" x2="126.1899" y2="187.2004" gradientTransform="matrix(0.8 0 0 -0.8 0 404)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <polygon opacity="0.43" fill="url(#SVGID_14_)" enable-background="new    " points="103.1,255 102.1,254.9 97.7,285.8
      99.8,286.1 104.2,255.2    "/>

      <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="122.0024" y1="147.4004" x2="122.0024" y2="187.2004" gradientTransform="matrix(0.8 0 0 -0.8 0 404)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.43" fill="url(#SVGID_15_)" enable-background="new    " d="M100.3,254.6L100.3,254.6c-1.4,2.6-2.5,5.2-3.3,7.9
      l-2.1,15.1c0.1,2.5,0.4,5.1,0.9,7.7h0.1L100.3,254.6z"/>
  </g>
</g>
<g id="head">
  <g id="antena_1_">
    <g>
      <path fill="#FBC926" d="M141.1,189.7c-0.1-0.8-2.1-19.2-22-21l0.1-1.4c21,1.9,23.2,22.2,23.2,22.4H141.1z"/>
      <ellipse fill="#231F20" cx="120.2" cy="168.1" rx="3.2" ry="3.3"/>
    </g>
    <g>
      <path fill="#FBC926" d="M147.2,189.7c0.1-0.8,2.1-19.2,22-21l-0.1-1.4c-21.1,2-23.2,22.2-23.4,22.4H147.2z"/>
      <ellipse fill="#231F20" cx="168.2" cy="168.1" rx="3.2" ry="3.3"/>
    </g>
  </g>
  <path fill="#231F20" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M172.6,216.8v-24.5c-18.8-11-37.8-11.4-56.7,0
    v24.2h56.7V216.8L172.6,216.8z"/>
  <path id="earRight" fill="#FBC926" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M179.7,242.4
    c0,0,5.5-25.6,1.5-39.4l0,0l-3.2-1.6l-1.4,41H179.7z"/>
  <path id="earLeft" fill="#FBC926" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M112.3,242.4l-1.4-41l-3.2,1.6l0,0
    c-4,13.9,1.5,39.4,1.5,39.4H112.3z"/>
  <path id="head_2_" fill="#FBC926" stroke="#231F20" stroke-width="2" stroke-miterlimit="10" d="M175.7,245.8
    c5.3-18,5.5-35.9,0-53.8h-31.5h-31.5c-5.6,17.9-5.3,35.8,0,53.8H175.7z"/>
  <path id="head_1_" fill="#231F20" d="M173.3,238.6c4.9-15.6,5.1-31.1,0-46.6h-29.1h-29.1c-5.2,15.5-4.9,31,0,46.6"/>

    <radialGradient id="headHighlight_1_" cx="137.1901" cy="252.6816" r="16.5906" gradientTransform="matrix(0.9362 -9.104000e-02 -6.609935e-02 -1.8889 23.8043 687.1632)" gradientUnits="userSpaceOnUse">
    <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
  </radialGradient>
  <path id="headHighlight" fill="url(#headHighlight_1_)" d="M144.5,238.6c-18,0-32.6-12.4-32.6-27.8c0-6-0.9-13.6,3.9-19.4
    c4.3-5.3,14.8-8.4,28.6-8.4c18,0,32.6,12.4,32.6,27.8S162.5,238.6,144.5,238.6z"/>
</g>
<g id="cymbol">
  <line fill="none" stroke="#B2B6BA" stroke-width="3" stroke-miterlimit="10" x1="55.2" y1="290.9" x2="55.2" y2="391.7"/>
  <line fill="none" stroke="#B2B6BA" stroke-width="3" stroke-miterlimit="10" x1="55.2" y1="370.4" x2="32" y2="393.6"/>
  <line fill="none" stroke="#B2B6BA" stroke-width="3" stroke-miterlimit="10" x1="55.2" y1="370.4" x2="77.8" y2="392.9"/>
  <path fill="#CDA349" d="M92.6,294c-0.2,2.4-17.8,3-39.4,1.2c-21.5-1.8-38.9-5.1-38.6-7.6c0.2-2.4,17.8-3,39.4-1.2
    C75.4,288.2,92.8,291.6,92.6,294z"/>
  <path fill="#E2C675" d="M70.5,289.4c-0.1,1-7.3,1.2-16.1,0.5c-8.8-0.7-15.9-2.1-15.7-3.1c0.1-1,7.3-1.2,16.1-0.5
    C63.5,287,70.6,288.4,70.5,289.4z"/>
  <line fill="none" stroke="#B2B6BA" stroke-width="3" stroke-miterlimit="10" x1="55.2" y1="272.6" x2="55.2" y2="287.9"/>
  <line fill="none" stroke="#B2B6BA" stroke-miterlimit="10" x1="55.2" y1="264.9" x2="55.2" y2="280.3"/>
</g>
<g id="highHat">
  <line fill="none" stroke="#B2B6BA" stroke-width="3" stroke-miterlimit="10" x1="195.6" y1="377.2" x2="214.1" y2="395.7"/>
  <line fill="none" stroke="#B2B6BA" stroke-width="3" stroke-miterlimit="10" x1="195.3" y1="377.5" x2="170.7" y2="402.1"/>
  <line fill="none" stroke="#B2B6BA" stroke-width="3" stroke-miterlimit="10" x1="195.6" y1="316.9" x2="195.6" y2="400.3"/>
  <ellipse id="highHatBottom" fill="#895606" cx="193.4" cy="313.7" rx="32" ry="3.1"/>
  <g id="highHatTop">
    <ellipse id="hhtbase_1_" fill="#CDA349" cx="193.4" cy="311.5" rx="32" ry="3.1"/>
    <ellipse id="hhthlite_1_" fill="#E2C675" cx="194.4" cy="310" rx="8.7" ry="0.8"/>
  </g>
  <line fill="none" stroke="#B2B6BA" stroke-width="3" stroke-miterlimit="10" x1="195.6" y1="297" x2="195.6" y2="309.6"/>
  <line fill="none" stroke="#B2B6BA" stroke-miterlimit="10" x1="195.6" y1="290.8" x2="195.6" y2="303.3"/>
</g>
<circle id="baseDrum" fill="#FFFFFF" fill-opacity="0.9" stroke="#E0E0E0" stroke-width="2" stroke-miterlimit="10" cx="105.4" cy="362.1" r="34.5"/>
<path id="lowDrum" fill="#FFFFFF" fill-opacity="0.9" stroke="#E0E0E0" stroke-width="2" stroke-miterlimit="10" d="M184.1,372.6
  c0.9,7-12.3,8.6-15.4,9l-10.3,1.3c-3.1,0.4-12.2,1.5-13.1-5.4l-4.4-36.2c-0.9-7-1-7,4.9-7.7l27.4-3.4c5.7-0.7,5.7-0.7,6.6,6.3
  L184.1,372.6z"/>
<path id="tomtom" fill="#FFFFFF" fill-opacity="0.9" stroke="#E0E0E0" stroke-width="2" stroke-miterlimit="10" d="M56.4,331.6
  c-1.5,4.2,7.7,7.4,9.9,8.2l7.2,2.5c2.2,0.8,8.6,3,10.2-1.3l7.9-22.1c1.5-4.2,1.7-4.2-2.5-5.6l-19.3-6.6c-4-1.4-4-1.4-5.5,2.9
  L56.4,331.6z"/>
</svg>
















<svg version="1.1" id="nile" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="80 149 240 270" enable-background="new 80 149 240 270" xml:space="preserve">
<g id="legLeft">
  <rect x="128.3" y="316.1" fill="#0F1218" width="12.3" height="78.1"/>
  <g>

      <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="171.7982" y1="280.9305" x2="157.509" y2="361.9695" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="130.7" y="328" opacity="0.43" fill="url(#SVGID_1_)" enable-background="new    " width="2.1" height="66.5"/>

      <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="178.2982" y1="280.9305" x2="164.009" y2="361.9695" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="135.9" y="328" opacity="0.43" fill="url(#SVGID_2_)" enable-background="new    " width="2.1" height="66.5"/>
  </g>
  <g id="footLeft">
    <path fill="#0F1218" d="M134.4,388.7c-9.1,0-16.5,6.8-16.5,15.3h33.1C150.9,395.5,143.6,388.7,134.4,388.7z"/>

      <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="168.1536" y1="268" x2="168.1536" y2="287.08" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0.3518" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.41" fill="url(#SVGID_3_)" enable-background="new    " d="M134.4,388.7c-9.1,0-16.5,6.8-16.5,15.3h33.1
      C150.9,395.5,143.6,388.7,134.4,388.7z"/>
  </g>
  <g id="kneeLeft">
    <ellipse fill="#0F1218" cx="134.4" cy="356.8" rx="9" ry="9"/>
    <path fill="#262C34" d="M129.2,359.7c1.6,3,5.4,4.2,8.3,2.7c3-1.6,4.2-5.4,2.6-8.5c-1.6-3-5.4-4.2-8.3-2.7
      C128.8,352.8,127.5,356.6,129.2,359.7z"/>
  </g>
</g>
<g id="legRight">
  <rect x="176.4" y="316.1" fill="#0F1218" width="12.3" height="78.1"/>
  <g>

      <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="231.7982" y1="280.9305" x2="217.509" y2="361.9695" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="178.7" y="328" opacity="0.43" fill="url(#SVGID_4_)" enable-background="new    " width="2.1" height="66.5"/>

      <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="238.2982" y1="280.9305" x2="224.009" y2="361.9695" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <rect x="183.9" y="328" opacity="0.43" fill="url(#SVGID_5_)" enable-background="new    " width="2.1" height="66.5"/>
  </g>
  <g id="footRight">
    <path fill="#0F1218" d="M182.6,388.7c9.1,0,16.5,6.8,16.5,15.3h-33C166.1,395.5,173.5,388.7,182.6,388.7z"/>

      <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="228.2036" y1="268" x2="228.2036" y2="287.08" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0.3518" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.41" fill="url(#SVGID_6_)" enable-background="new    " d="M182.6,388.7c9.1,0,16.5,6.8,16.5,15.3h-33
      C166.1,395.5,173.5,388.7,182.6,388.7z"/>
  </g>
  <g id="kneeRight">
    <ellipse fill="#0F1218" cx="182.6" cy="356.8" rx="9" ry="9"/>
    <path fill="#262C34" d="M177.2,359.7c1.6,3,5.4,4.2,8.3,2.7c3-1.6,4.2-5.4,2.6-8.5c-1.6-3-5.4-4.2-8.3-2.7
      C176.8,352.8,175.5,356.6,177.2,359.7z"/>
  </g>
</g>
<g id="armRight">
  <g>
    <path id="armbase" fill="#0F1218" d="M210,255c0.2,7.6,2.6,15.1,6,21.4c8.9,16.6,23.8,25.3,41.5,30.9l-3,9.8
      c-20.5-6.4-37.7-17.4-47.8-36.2c-4.1-7.6-6.9-16.6-7-25.7L210,255z"/>

      <linearGradient id="armhighlight_1_" gradientUnits="userSpaceOnUse" x1="270.4234" y1="331.8142" x2="270.4234" y2="446.7244" gradientTransform="matrix(-0.3678 0.7105 -0.7105 -0.3678 614.205 244.0682)">
      <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path id="armhighlight" opacity="0.43" fill="url(#armhighlight_1_)" enable-background="new    " d="M204.2,262.5
      c-0.7,0.1-1.4,0.2-2.1,0.2c6.4,30.4,36.2,56.6,75.4,54.2c0-0.7,0.2-1.4,0.2-2.2C239.5,317.3,210.4,291.8,204.2,262.5z
       M208.4,261.8c-0.7,0.1-1.4,0.2-2.1,0.4c6.1,28.3,34.4,53.1,71.6,50.5c0.1-0.6,0.2-1.4,0.2-2.2
      C241.8,313.2,214.4,289.2,208.4,261.8z"/>
  </g>
  <g id="elbowRight">

      <ellipse transform="matrix(0.9995 3.011595e-02 -3.011595e-02 0.9995 8.9527 -6.6003)" fill="#0F1218" cx="223.6" cy="293.9" rx="8.2" ry="8.2"/>
    <path fill="#262C34" d="M219.4,295.9c-1.1-2.2-0.2-5.1,2.2-6.2c2.3-1.2,5-0.2,6.2,2.1c1.1,2.2,0.2,5.1-2.2,6.2
      C223.4,299.2,220.5,298.2,219.4,295.9z"/>
  </g>
</g>
<g id="shoulderRight">
  <path id="_x3C_Path_x3E__1_" fill="#0F1218" d="M194.6,254.2l8-1.1c5,9.8,6.7,20.1,4.5,30.9l-8,1.1L194.6,254.2z"/>
  <g>
    <g>
      <g>
        <g>
          <defs>
            <path id="SVGID_7_" d="M194.6,254.2l8-1.1c5,9.8,6.7,20.1,4.5,30.9l-8,1.1L194.6,254.2z"/>
          </defs>
          <clipPath id="SVGID_8_">
            <use xlink:href="#SVGID_7_"  overflow="visible"/>
          </clipPath>

            <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="254.9036" y1="417.3" x2="254.9036" y2="457.1" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
          </linearGradient>
          <path opacity="0.43" clip-path="url(#SVGID_8_)" fill="url(#SVGID_9_)" enable-background="new    " d="M200.7,253.4l-2.1,0.3
            l4.6,30.9l2.2-0.3L200.7,253.4z M204.6,252.7l-2.1,0.3l4.6,30.9l2.1-0.3L204.6,252.7z"/>
        </g>
      </g>
    </g>
  </g>
</g>
<g id="torso">
  <rect id="neck" x="139" y="233.9" fill="#7D4724" width="39" height="26.5"/>
  <path id="shirt_1_" fill="#0F1218" d="M197,252.4h-38.5H120c-6.8,25.1-6.4,50.2,0,75.4h38.5H197C203.5,302.6,203.8,277.6,197,252.4
    z"/>
  <path fill="#1C1F20" d="M163.7,258.4c0-3.4,1.5-5.9-4.8-6.1c-5.4-0.1-4.8,2.7-4.8,6.1c0,2.4-0.3,4.5,1.5,5.5c0,0.3,0,0.6,0,0.9
    l-1.1,48.2c0.2,1.7,4.5,6.1,4.5,6.1s3.4-4.5,4.5-6.1l-1.6-48.3c0-0.2,0-0.5,0-0.7C163.8,263,163.7,260.9,163.7,258.4z"/>
  <g id="shine">

      <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="207.3035" y1="356.5731" x2="188.3037" y2="464.3268" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
      <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
      <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
    </linearGradient>
    <path opacity="0.43" fill="url(#SVGID_10_)" enable-background="new    " d="M181.7,327.8h-2.1v-75.4h2.1V327.8z M186.8,252.3
      h-2.1v75.4h2.1V252.3z M191.2,252.3h-2.1v75.4h2.1V252.3z M196.4,252.3h-2.1v75.4h2.1V252.3z M122.3,252.3h-2.2v75.4h2.1
      L122.3,252.3L122.3,252.3z M126.5,252.3h-2.1v75.4h2.1V252.3z M130.9,252.3h-2.1v75.4h2.1V252.3z M135.3,252.3h-2.1v75.4h2.1
      V252.3z"/>
  </g>
  <g id="coat">
    <path fill="#1E2025" d="M155.1,252.6l-0.8,7.4l-17.5-5.2c0,0,0.2-6,2-6.8C140.6,247.2,155.1,252.6,155.1,252.6z"/>
    <path fill="#1E2025" d="M162.3,252.6l0.8,7.4l17.5-5.2c0,0-0.2-6-2-6.8C176.7,247.2,162.3,252.6,162.3,252.6z"/>
    <polygon fill="#262C34" points="130.9,261.8 126.3,260.2 142.5,321.8 137.2,254.5     "/>
    <polygon fill="#262C34" points="185.1,261.8 189.6,260.2 173.4,321.8 178.8,254.5     "/>

      <rect x="191.6" y="309.6" transform="matrix(-0.9664 0.257 -0.257 -0.9664 464.0369 560.9493)" fill="#262C34" width="7.6" height="2.4"/>

      <rect x="118.3" y="310.8" transform="matrix(0.9742 0.2257 -0.2257 0.9742 73.5686 -19.5046)" fill="#262C34" width="7.6" height="2.4"/>
  </g>
</g>
<g id="guitar">
  <g id="guitarBody">
    <g opacity="0.4">
      <path fill="#FFFFFF" d="M183.9,286.7c-12.6-2.2-20.6,4.6-29.9,11c-6.8,4.7-14.1,5-18.6,4.5c-1.4-0.4-3-0.6-4.6-1
        c-0.1,0-0.2,0-0.2-0.1l0,0l0,0c-10.8-1.8-19.4-1.6-25.8,0.4c-0.2,0-0.4,0.1-0.6,0.2c-3,0.9-5.6,2.4-7.7,4.5
        c-2,1.9-3.5,4.2-4.4,6.9c-3,7.4-3,18.1,0.8,31.3c6.8,23.6,18.2,32.6,30.8,29c0.5-0.1,0.9-0.3,1.4-0.4c7.4-1.7,15.8-7,24-16.6
        c7.5-6,14.4-6.6,20.1-4c3,1.4,10.2,0.2,15-2.8c5.2-3.4,7.8-8.8,0.7-8.5c-18.2,0.6-13.2-13.9-13.2-13.9l9.4-2.7
        c0,0,4.2-9.5-2.6-11.8c-6.8-2.3-3.1-14-1-15c3.2-1.4,6.9-2.4,8.9-3.8C189.7,291,189.4,287.7,183.9,286.7z"/>
    </g>
    <g>
      <path fill="#FFFFFF" d="M119.6,375.5c-12.2,1-22.2-9.9-28.1-30.6c-3.7-13-3.9-24.1-0.7-32.1c0.9-2.8,2.5-5.4,4.6-7.4
        c2.2-2.2,5-3.8,8.1-4.8h0.1c0.2-0.1,0.4-0.2,0.7-0.2c6.6-2.1,15.7-2.2,26.2-0.4l0.3,0.1c1.5,0.2,3,0.6,4.6,0.9
        c1.8,0.2,3.5,0.2,5.3,0.1c4.6-0.3,8.9-1.8,12.6-4.4c0.8-0.6,1.6-1.1,2.5-1.8c6.7-4.7,13-9.2,21.4-9.8c2.2-0.2,4.6-0.1,7,0.3
        c3.9,0.6,5.1,2.4,5.5,3.7c0.5,1.8-0.5,3.8-2.7,5.7c-1.5,1.2-3.7,2-6,2.8c-1,0.4-2.2,0.8-3.1,1.2c-0.6,0.4-2.6,4.4-2.2,8.3
        c0.2,2.3,1.3,3.8,3,4.4c1.9,0.6,3.3,1.8,4.1,3.6c1.8,4.1-0.6,9.7-0.7,9.9l-0.3,0.6l-9.4,2.7c-0.4,1.4-1,5.4,1,8.2
        c1.9,2.6,5.6,3.8,11,3.5c3.8-0.2,5,1.3,5.4,2.5c0.9,2.7-2.1,6.1-5.4,8.2c-3,1.9-7,3.3-10.8,3.5l0,0c-1.5,0.1-3.7,0.1-5.4-0.6
        c-5.8-2.6-12.3-1.4-18.7,3.8c-8,9.2-16.5,15-24.6,16.9c-0.2,0.1-0.3,0.1-0.6,0.2c-0.2,0.1-0.5,0.2-0.8,0.2
        C122.4,375.1,121,375.4,119.6,375.5z M104.7,302.8C104.7,302.8,104.6,302.8,104.7,302.8l-0.4,0.2c-2.7,0.8-5.2,2.2-7.2,4.2
        c-1.9,1.8-3.3,4-4.1,6.4v0.1c-3,7.5-2.7,18.1,0.8,30.6c5.6,19.4,14.6,29.7,25.6,28.9c1.2-0.1,2.4-0.3,3.7-0.6
        c0.2-0.1,0.4-0.2,0.6-0.2c0.2-0.1,0.5-0.2,0.8-0.2c7.6-1.8,15.7-7.4,23.4-16.2l0.2-0.2c4.2-3.4,8.6-5.4,12.9-5.7
        c2.9-0.2,5.8,0.3,8.4,1.5c0.9,0.4,2.4,0.6,4.2,0.4l0,0c3.4-0.2,7-1.4,9.7-3.2c3.3-2.2,4.7-4.6,4.5-5.5c-0.2-0.4-1-0.9-3-0.8
        c-6.3,0.2-10.7-1.3-13.1-4.6c-3.4-4.6-1.4-10.7-1.3-11l0.2-0.6l9.4-2.7c0.5-1.4,1.6-5,0.5-7.4c-0.5-1.1-1.4-1.8-2.6-2.2
        c-2.9-1-4.6-3.5-4.7-7.1c-0.2-4.1,1.7-9.2,3.7-10.1c1-0.5,2.2-0.9,3.3-1.3c2.2-0.8,4.2-1.5,5.4-2.5c1.4-1.1,2.1-2.4,1.8-3.2
        c-0.2-0.9-1.5-1.6-3.6-1.9c-2.2-0.4-4.3-0.5-6.4-0.3c-7.7,0.6-13.8,4.9-20.2,9.4c-0.8,0.6-1.6,1.1-2.5,1.8
        c-4.1,2.8-8.6,4.4-13.7,4.8c-1.9,0.2-3.8,0.1-5.8-0.1h-0.2c-1.4-0.4-3-0.6-4.4-0.9c-0.2,0-0.3,0-0.6-0.1
        c-10.2-1.7-18.8-1.5-25,0.4L104.7,302.8z"/>
    </g>
  </g>
  <g id="guitarNeck">
    <path fill="#876436" d="M306.1,283.9L306.1,283.9c-0.3-0.1-0.6,0-1,0l-33.8-0.2l-2.4,4.3l-1.8,0.6v0.1l-99.4,26.6l3.4,12
      l98.6-29.7l0,0l6.3-1.8l6.1,4.5l16.6-8h0.7v-0.1c1.3,2.7,4.9,4.2,7.8,3.3c3-0.9,4.8-4.2,3.9-7.4
      C310.5,285.8,308.5,284.2,306.1,283.9z"/>
    <path fill="#676A7E" d="M279.3,279.8h-0.2c-0.3-0.3-0.9-0.6-1.6-0.6c-0.8,0-1.8,0.2-2.2,0.4h-0.2v0.2c-0.1,0.1-0.1,0.1-0.1,0.2
      c0,0.1,0,0.2,0,0.3l-0.1,1.7l2.2,0.6l1.9-0.6l0.1-1.3c0.1-0.2,0.2-0.3,0.2-0.4C279.4,280.2,279.4,280.1,279.3,279.8L279.3,279.8z
       M284.8,279.8h-0.2c-0.3-0.3-0.9-0.6-1.6-0.6c-0.8,0-1.8,0.2-2.2,0.4h-0.2v0.2c-0.1,0.1-0.1,0.1-0.1,0.2s0,0.2,0,0.3l-0.1,1.7
      l2.2,0.6l1.9-0.6l0.1-1.3c0.1-0.2,0.2-0.3,0.2-0.4S284.9,280,284.8,279.8L284.8,279.8z M290.7,279.9h-0.2
      c-0.3-0.3-0.9-0.6-1.6-0.6c-0.8,0-1.8,0.2-2.2,0.4h-0.2v0.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.2,0,0.3l-0.1,1.7l2.2,0.6l1.9-0.6
      l0.1-1.3c0.1-0.2,0.2-0.3,0.2-0.4C290.8,280.3,290.8,280.2,290.7,279.9L290.7,279.9z M296.1,279.8H296c-0.3-0.3-0.9-0.6-1.6-0.6
      c-0.8,0-1.8,0.2-2.2,0.4H292v0.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.2,0,0.3l-0.1,1.7l2.2,0.6l1.9-0.6l0.1-1.3
      c0.1-0.2,0.2-0.3,0.2-0.4C296.2,280.2,296.2,280.1,296.1,279.8L296.1,279.8z M301.9,280.3h-0.2c-0.3-0.3-0.9-0.6-1.6-0.6
      c-0.8,0-1.8,0.2-2.2,0.4h-0.2v0.2c-0.1,0.1-0.1,0.1-0.1,0.2s0,0.2,0,0.3l-0.1,1.7l2.2,0.6l1.9-0.6l0.1-1.3
      c0.1-0.2,0.2-0.3,0.2-0.4S302,280.6,301.9,280.3L301.9,280.3z M307.4,280.4h-0.2c-0.3-0.3-0.9-0.6-1.6-0.6c-0.8,0-1.8,0.2-2.2,0.4
      h-0.2v0.2c-0.1,0.1-0.1,0.1-0.1,0.2c0,0.1,0,0.2,0,0.3l-0.1,1.7l2.2,0.6l1.9-0.6l0.1-1.3c0.1-0.2,0.2-0.3,0.2-0.4
      C307.5,280.8,307.5,280.6,307.4,280.4L307.4,280.4z"/>
  </g>
</g>
<path id="handRight" fill="#96522D" d="M252.9,318.9c-6.5,2.7-13.9-0.3-16.6-6.9c-1.4-3.4-1.4-7,0-10c0.2,0.4,0.2,0.7,0.3,1
  c1.8,4.1,6.7,5.8,11.3,4c4.6-1.9,6.7-6.7,4.9-10.8c-0.2-0.4-0.4-0.7-0.6-1c3.2,1.1,5.8,3.5,7.3,7
  C262.3,308.7,259.3,316.2,252.9,318.9z"/>
<g id="armLeft">
  <path fill="#0F1218" d="M109.5,259.3c-5,7.6-7.7,16.6-8.5,25.3c-2.2,21.4,6,40,19.4,56.7l7.9-6.4c-11.6-14.5-19.1-30.1-17.2-48.8
    c0.6-7.1,2.9-14.7,7-21.1L109.5,259.3z"/>

    <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="122.511" y1="329.2471" x2="122.511" y2="444.1297" gradientTransform="matrix(0.7018 -0.3839 -0.3839 -0.7018 182.523 630.5932)">
    <stop  offset="0.3" style="stop-color:#FFFFFF;stop-opacity:0"/>
    <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
  </linearGradient>
  <path opacity="0.43" fill="url(#SVGID_11_)" enable-background="new    " d="M109,267.8c-0.6-0.3-1.3-0.6-1.9-1
    c-11.8,28.8-1.5,67.2,32.2,87.1c0.5-0.6,1-1,1.4-1.7C107.7,333,97.7,295.8,109,267.8z M112.8,269.7c-0.6-0.3-1.3-0.6-1.9-0.9
    c-10.9,27-1.1,63.3,31.2,81.8c0.5-0.5,1-1.1,1.4-1.7C111.9,331,102.4,295.7,112.8,269.7z"/>
  <path id="handLeft" fill="#96522D" d="M115.6,334.7c-1.7,6.8,2.5,13.7,9.4,15.4c3.5,0.9,7,0.2,9.9-1.5c-0.4-0.1-0.7-0.1-1.1-0.2
    c-4.3-1.2-6.8-5.8-5.7-10.6c1.2-4.8,5.6-7.7,9.9-6.5c0.4,0.2,0.8,0.2,1,0.4c-1.6-3-4.4-5.2-8-6.2
    C124.3,323.9,117.3,327.9,115.6,334.7z"/>
  <g>

      <ellipse transform="matrix(0.8773 -0.4799 0.4799 0.8773 -131.9382 87.7732)" fill="#0F1218" cx="105.7" cy="301.9" rx="8.2" ry="8.2"/>
    <path fill="#262C34" d="M103.2,305.8c2.1,1.5,5,0.9,6.4-1.3c1.4-2.2,0.9-5-1.4-6.5c-2.1-1.5-5-0.9-6.4,1.3
      C100.4,301.4,101,304.3,103.2,305.8z"/>
  </g>
</g>
<g id="shoulderLeft">
  <path id="_x3C_Path_x3E_" fill="#0F1218" d="M122.4,254.2l-8.1-1.1c-5,9.8-6.7,20.1-4.5,30.9l8,1.1L122.4,254.2z"/>
  <g>
    <g>
      <g>
        <g>
          <defs>
            <path id="SVGID_12_" d="M118,285.1l-8-1.1c-2.3-10.8-0.6-21.1,4.3-31l8,1.1L118,285.1z"/>
          </defs>
          <clipPath id="SVGID_13_">
            <use xlink:href="#SVGID_12_"  overflow="visible"/>
          </clipPath>

            <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="141.3536" y1="417.3" x2="141.3536" y2="457.1" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
            <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
            <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.4"/>
          </linearGradient>
          <path opacity="0.43" clip-path="url(#SVGID_13_)" fill="url(#SVGID_14_)" enable-background="new    " d="M111.8,284.3l2.1,0.2
            l4.4-30.9l-2.1-0.3L111.8,284.3z M107.9,283.7l2.1,0.2l4.5-30.9l-2.2-0.3L107.9,283.7z"/>
        </g>
      </g>
    </g>
  </g>
</g>
<g id="head">
  <path id="head_1_" fill="#96522D" d="M190,191.3h-31.5H127c-5.6,17.9-5.3,35.8,0,53.8h31.5H190C195.3,227,195.6,209.1,190,191.3z"
    />
  <g id="mouth">
    <path fill="#200D0A" d="M159.5,229h-1.1v6.2h-12.9c0.6,1.2,1.7,1.5,2,1.5h20.8c0.4,0,1.9-0.2,2.7-1.5h-11.5V229z"/>
    <polygon fill="#FFFFFF" points="159.5,229 159.5,229 172,229     "/>
    <path fill="#FFFFFF" d="M172,229l-12.5,0.1v6.2H171c0.2-0.4,0.4-1,0.4-1.7C171.4,230.8,171.4,230.4,172,229z"/>
    <path fill="#FFFFFF" d="M158.4,229l-13.9,0.1c-0.5,0,0.6,1.7,0.6,4.4c0,0.7,0.2,1.3,0.4,1.7h12.9L158.4,229L158.4,229z"/>
  </g>
  <g id="eyes">
    <g>

        <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="216.8632" y1="493.5625" x2="216.8632" y2="517.7" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
        <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
      </linearGradient>
      <path fill="url(#SVGID_15_)" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M186.6,213.9
        c-0.5,7.8-0.6,9.4-11.8,9.7h-2.6c-11.2-0.2-11-4.1-11.8-9.7c-0.7-5.4-2.7-9.7,11.8-9.7h2.6C189.1,204.2,187.1,206.9,186.6,213.9z
        "/>
      <g>
        <path fill="#231F20" d="M180.3,203.4c0,0-0.9-0.5-2.3-1c-0.6-0.3-1.5-0.6-2.4-0.8c-0.5-0.1-0.9-0.2-1.4-0.3l-0.6-0.1h-0.6
          c-0.5,0-1,0-1.4,0.1c-0.5,0.1-0.9,0.2-1.3,0.3c-0.4,0.1-0.8,0.2-1.1,0.3c-0.2,0.1-0.4,0.1-0.5,0.2c-0.2,0.1-0.4,0.1-0.5,0.2
          c-0.3,0.2-0.6,0.3-0.9,0.4c-0.3,0.2-0.5,0.3-0.6,0.4c-0.4,0.2-0.6,0.4-0.6,0.4l-0.2-0.1c0,0,0.1-0.3,0.3-0.6
          c0.1-0.2,0.2-0.5,0.4-0.8c0.2-0.3,0.5-0.6,0.8-0.9c0.3-0.3,0.6-0.6,1.1-0.9c0.4-0.3,1-0.4,1.4-0.6c0.6-0.1,1-0.1,1.6-0.1
          c0.6,0.1,1,0.1,1.6,0.2l0.8,0.2c0.3,0.1,0.5,0.2,0.8,0.2c0.5,0.1,1,0.4,1.4,0.5c0.9,0.4,1.8,0.8,2.4,1.3
          c1.4,0.8,2.1,1.4,2.1,1.4L180.3,203.4z"/>
      </g>
    </g>
    <g>

        <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="179.8517" y1="493.5625" x2="179.8517" y2="517.7" gradientTransform="matrix(0.8 0 0 -0.8 0 618.4)">
        <stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0"/>
        <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
      </linearGradient>
      <path fill="url(#SVGID_16_)" stroke="#000000" stroke-width="3" stroke-miterlimit="10" d="M142.5,204.2h2.6
        c14.5,0,12.4,4.2,11.8,9.7c-0.7,5.6-0.5,9.4-11.8,9.7h-2.6c-11.2-0.2-11.3-1.8-11.8-9.7C130.4,206.9,128.4,204.2,142.5,204.2z"/>
      <g>
        <path fill="#231F20" d="M137.3,205.2c0,0,0.6-0.8,1.9-1.8c0.6-0.5,1.4-1,2.2-1.4c0.5-0.2,0.9-0.5,1.4-0.6l0.8-0.3l0.8-0.3
          c0.5-0.2,1-0.3,1.6-0.4c0.6-0.1,1-0.1,1.6-0.1c0.6,0.1,1,0.2,1.5,0.4c0.5,0.2,0.9,0.4,1.3,0.6c0.3,0.3,0.6,0.6,0.9,0.8
          c0.2,0.3,0.4,0.6,0.5,0.8c0.3,0.4,0.4,0.6,0.4,0.6l-0.3,0.1c0,0-0.3-0.1-0.6-0.3c-0.2-0.1-0.4-0.2-0.6-0.4
          c-0.3-0.1-0.6-0.2-0.9-0.3c-0.2-0.1-0.3-0.1-0.5-0.1s-0.4-0.1-0.6-0.1c-0.4-0.1-0.8-0.1-1.1-0.2c-0.4,0-0.9-0.1-1.3-0.1
          c-0.5,0-1,0-1.4,0.1l-0.9,0.1l-0.6,0.2c-0.5,0.1-0.9,0.3-1.4,0.5c-0.9,0.4-1.6,0.6-2.3,1c-1.4,0.6-2.2,1.3-2.2,1.3L137.3,205.2z
          "/>
      </g>
    </g>
    <g>
      <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="187" y1="207.5" x2="196.7" y2="206.1"/>
      <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="130.4" y1="206.8" x2="120.8" y2="205.3"/>
      <line fill="none" stroke="#000000" stroke-width="3" stroke-miterlimit="10" x1="153.9" y1="205.3" x2="164.1" y2="205.3"/>
    </g>
  </g>
  <g id="antena">
    <g>
      <g>
        <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M155.5,188.9c-0.1-0.8-2.1-19.2-22-21l0.1-1.4
          c21,1.9,23.2,22.2,23.2,22.4L155.5,188.9z"/>
      </g>
      <ellipse fill="#0F1218" cx="134.5" cy="167.3" rx="3.2" ry="3.3"/>
    </g>
    <g>
      <g>
        <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M161.6,188.9c0.1-0.8,2.1-19.2,22-21l-0.1-1.4
          c-21.1,2-23.2,22.2-23.4,22.4L161.6,188.9z"/>
      </g>
      <ellipse fill="#0F1218" cx="182.5" cy="167.3" rx="3.2" ry="3.3"/>
    </g>
  </g>
  <g id="hurr">
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M169.5,190.3c29.9-15.2,41.4,69.2,39.9,69.3"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M159.6,190.3c20.6-1.8,37.6,24.1,37.8,37.8
      c0.4,36.7,4.1,34.3,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M160.3,187.9c21-13.1,30.6,29.5,32.2,40.2
      c4.6,31.4-0.6,30.7,1.8,32.9"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M157.6,187.9c29.4-15.8,35.4,12.2,32.2,40.2
      c-4.2,37.3,13.8,44.2,4.7,38.6"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M154.7,187.9c28.8-10.3,54.6-8.1,32.2,40.2
      c-9.1,19.8-0.6,19.4-1.9,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M162.8,191.1c-0.6-0.4,33,19,32.2,37
      c-1.4,30.6-4.3,27,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M160.2,188.7c4.6-12.3,45,9.8,37.8,37.8
      c-7.5,29.1-2.2,33.8,6.9,40.2"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M162.4,191.9c16.3-8.2,34.7,1.2,37.8,34.6
      c2.5,27.4-0.7,24.2,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M165,191.9c13.2-5.8,40.4,7.3,37.8,34.6
      c-2.4,25.3,6.6,34.2,6.7,43"/>
    <g>
      <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M167,188.7c11-6.6,33.8-0.3,37.8,34.6
        c3.2,27.5,9.2,25,2.1,31.4"/>
    </g>
    <g>
      <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M170.9,191.3c8-5.1-5-14.2,20.2,4.1
        c3.2,27.5,26.1,62.2,19,68.7"/>
    </g>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M169.5,190.3c28.9-11.1,42.3,68.4,39.9,69.3"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M197.5,228.2c4.2,36.5,4.1,34.3,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M192.5,228.2c4.6,31.4-0.6,33.8,1.8,35.9"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M189.9,228.2c-0.2,37.1,2.7,43.4,2.6,40.3"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M186.8,228.2c-3.1,31.5-6.2,26.5-1.9,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M195,228.2c-1.4,30.6-4.3,27,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M198,226.5c-20.5,28.2-11.4,53.3-0.9,58.6"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M200.2,226.5c2.5,27.4-0.2,42,2.6,49.2"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M202.8,226.5c7.3,24.3,6.9,31.4,6.9,40.2"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M204,226.5c4,27.4,9.2,25,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M163.1,190.3c29.9-15.2,41.4,69.2,39.9,69.3"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M153.2,190.3c20.6-1.8,37.6,24.1,37.8,37.8
      c0.4,36.7,4.1,34.3,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M153.9,187.9c21-13.1,30.6,29.5,32.2,40.2
      c4.6,31.4-0.6,30.7,1.8,32.9"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M151.2,187.9c29.4-15.8,35.4,12.2,32.2,40.2
      c-4.2,37.3,13.8,44.2,4.7,38.6"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M148.3,187.9c28.8-10.3,54.6-8.1,32.2,40.2
      c-9.1,19.8-0.6,19.4-1.9,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M156.4,191.1c-0.6-0.4,33,19,32.2,37
      c-1.4,30.6-4.3,27,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M153.8,188.7c4.6-12.3,45,9.8,37.8,37.8
      c-7.5,29.1-2.2,33.8,6.9,40.2"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M156,191.9c16.3-8.2,34.7,1.2,37.8,34.6
      c2.5,27.4-0.7,24.2,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M158.6,191.9c13.2-5.8,40.4,7.3,37.8,34.6
      c-2.4,25.3,6.6,34.2,6.7,43"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M159.8,191.9c11-6.6,33.8-0.3,37.8,34.6
      c3.2,27.5,9.2,25,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M163.1,190.3c28.9-11.1,42.3,68.4,39.9,69.3"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M191.1,228.2c4.2,36.5,4.1,34.3,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M186.1,228.2c4.6,31.4-0.6,33.8,1.8,35.9"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M183.5,228.2c-0.2,37.1,2.7,43.4,2.6,40.3"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M180.4,228.2c-3.1,31.5-6.2,26.5-1.9,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M188.6,228.2c-1.4,30.6-4.3,27,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M191.6,226.5c-20.5,28.2-11.4,53.3-0.9,58.6"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M193.8,226.5c2.5,27.4-0.2,42,2.6,49.2"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M196.4,226.5c7.3,24.3,6.9,31.4,6.9,40.2"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M197.6,226.5c4,27.4,9.2,25,2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M147.2,190.3c-26.4-13.9-23.7,75.8-39.9,69.3"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M153.8,192.9c-54.2,8.7-33.4,11-34.6,35.3
      c-2.6,47.3-3.8,94.5-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M156.4,187.9c-11.7-22-23,24.2-32.2,40.2
      c-13.2,22.9-6.2,20.6-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M159,187.9c-1.3-9.9-30.4,22-32.2,40.2
      c-5.8,57.7-1.3,55.9,1.9,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M158.5,192.9c-21.8-11-26.6,11-28.7,35.3
      c-2.5,27.4,1.3,35.3-1.5,42.5"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M153.8,187.9c-20.9-10.7-32.7,26-32.2,40.2
      c2.6,69.6,2.1,37.8-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M156.4,188.7c-12.5-7.4-45.8,10.2-37.8,37.8
      c9.6,33.2,2.2,15,6.2,14.7"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M154.7,187.9c-14.9-7.4-34,9.9-38.2,38.6
      c-4.6,31.4,0.2,25.8-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M151.6,188.7c-18.2-8.3-35.2,4.4-37.8,37.8
      c-4.2,54.1-5.4,50.2-6.9,40.2"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M150.4,188.7c-16.3-8.2-30.4,5-37.8,37.8
      c-6.3,28-5.3,11.9-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M151.2,190.3c-26.4-13.9-23.7,75.8-39.9,69.3"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M157.8,192.9c-54.2,8.7-33.4,11-34.6,35.3
      c-2.6,47.3-3.8,94.5-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M160.4,187.9c-11.7-22-23,24.2-32.2,40.2
      c-13.2,22.9-6.2,20.6-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M163,187.9c-1.3-9.9-30.4,22-32.2,40.2
      c-5.8,57.7-1.3,55.9,1.9,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M162.5,192.9c-21.8-11-26.6,11-28.7,35.3
      c-2.5,27.4,1.3,35.3-1.5,42.5"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M157.8,187.9c-20.9-10.7-32.7,26-32.2,40.2
      c2.6,69.6,2.1,37.8-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M160.4,188.7c-12.5-7.4-45.8,10.2-37.8,37.8
      c9.6,33.2,2.2,15,6.2,14.7"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M158.7,187.9c-14.9-7.4-34,9.9-38.2,38.6
      c-4.6,31.4,0.2,25.8-2.1,31.4"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M155.6,188.7c-18.2-8.3-35.2,4.4-37.8,37.8
      c-4.2,54.1-5.4,50.2-6.9,40.2"/>
    <path fill="none" stroke="#130E0A" stroke-width="3" stroke-miterlimit="10" d="M154.4,188.7c-16.3-8.2-30.4,5-37.8,37.8
      c-6.3,28-5.3,11.9-2.1,31.4"/>
  </g>
</g>
</svg>

            
          
!
            
              // Pharrell Williams, Daft Punk and Nile Rodgers.
* {box-sizing:border-box; margin:0; padding:0; outline:0; border:0;}
body, html { width: 100%; height: 100%; overflow: hidden;}
html { background: #000; }
body { 
  position: relative; 
  background: radial-gradient(35% 25%, circle, rgba(255,255,255, .6), rgba(255,255,255,0) 40%); 
}

// layout
#youtube {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  opacity: 0.5;
}

#drummer, #pharrell, #nile, #bass {
  width: 35%;
  position: absolute;
}

#bass {
  top: 0;
  left: 0;
}

#pharrell {
  top: 10%;
  left: 15%;
  z-index: 1;
}

#drummer {
  top: 0;
  right: 29%;
}

#nile {
  top: 10%;
  right: 0;
}

            
          
!
            
              var bassAnim = function(el) {
    var head = el.getElementById('head'),
        torso = el.getElementById('torso'),
        shoulderRight = el.getElementById('shoulderRight'),
        shoulderLeft = el.getElementById('shoulderLeft'),
        handLeft = el.getElementById('handLeft'),
        armLeft = el.getElementById('armLeft'),
        guitar = el.getElementById('guitar'),
        armRight = el.getElementById('armRight'),
        handRight = el.getElementById('handRight');

    TweenMax.to(head, .25, {y:4, x:3, rotationZ:-4, transformOrigin:"50% 50%", repeat:-1, ease:Back.easeOut, yoyo:true });
    TweenMax.to([torso, guitar, armRight], .5, {x:-2, y:4, transformOrigin:"50% 50%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to([torso, shoulderRight, shoulderLeft], .5, {y:4, repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to(handLeft, .25, {x:2, y:2, rotationZ:-16, transformOrigin:"10% 60%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to(handRight, .5, {x:-5, y:4, transformOrigin:"50% 50%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to(guitar, 1, {rotationZ:2, repeat:-1, ease:Back.easeOut, yoyo:true});
};
bassAnim(document.querySelector("svg#bass"));


var pharrellAnim = function(el) {
    var head = el.getElementById('head'),
        torso = el.getElementById('torso'),
        shoulderRight = el.getElementById('shoulderRight'),
        shoulderLeft = el.getElementById('shoulderLeft'),
        armLeft = el.getElementById('armLeft'),
        upperArmLeft = el.getElementById('upperArmLeft'),
        foreArmLeft = el.getElementById('foreArmLeft'),
        handLeft = el.getElementById('handLeft'),
        mouth = el.getElementById('mouth');

    var pMouth = new TimelineMax({paused:true, repeat:-1, yoyo:true});
    pMouth.set(mouth, {transformOrigin:"50% 0%"})
          .to(mouth, .2, {scaleY:1.25, ease:Back.easeOut })
          .to(mouth, .2, {scaleY:0.8, scaleX:0.8, ease:Back.easeOut })
          .to(mouth, .2, {scaleY:1.5, scaleX:1, ease:Back.easeOut })
          .to(mouth, .2, {scaleY:0.8, scaleX:0.8, ease:Back.easeOut })
          .to(mouth, .4, {scaleY:1.25, ease:Back.easeOut });
    pMouth.play();

    TweenMax.to(head, .5, {rotationZ:-4, transformOrigin:"50% 100%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to(torso, .5, {rotationZ:2, transformOrigin:"50% 20%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to(upperArmLeft, .5, {rotationZ:10, transformOrigin:"100% 0%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to(foreArmLeft, .5, {rotationZ:30, transformOrigin:"100% 0%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to(handLeft, .5, {x:2, transformOrigin:"50% 50%", rotationZ:40, repeat:-1, ease:Back.easeOut, yoyo:true});

};
pharrellAnim(document.getElementById("pharrell"));


var drummerAnim = function(el) {
    var head = el.getElementById('head'),
        handLeft = el.getElementById('handLeftGroup'),
        handRight = el.getElementById('handRightGroup'),
        baseDrum = el.getElementById('baseDrum'),
        lowDrum = el.getElementById('lowDrum'),
        highHatTop = el.getElementById('highHatTop'),
        highHatBottom = el.getElementById('highHatBottom'),
        footRight = el.getElementById('footRight'),
        footLeft = el.getElementById('footLeft'),
        armRight = el.getElementById('armRight'),
        foreArmRight = el.getElementById('foreArmRight'),
        armLeft = el.getElementById('armLeft'),
        elbowLeft = el.getElementById('elbowLeft');

  
    var tlHead = new TimelineMax({paused:true, yoyo:true, repeat:-1});
    tlHead.set(head, {transformOrigin:"50% 100%", x:-18, y:100})
          .from(head, .25, {y:10, rotationZ:-15, ease:Cubic.easeIn})
          .to(head, .25, {rotationZ:15, ease:Cubic.easeOut});
    tlHead.play();

    TweenMax.from(head, .25, {y:4, repeat:-1, yoyo:true, ease:Cubic.easeOut});
  
  
    // base drum and left foot/knee
    TweenMax.from(baseDrum, .5, {scale:1.05, transformOrigin:"50% 50%", ease:Cubic.easeOut, repeat:-1});
    TweenMax.to(footLeft, .5, {y:-3, ease:Cubic.easeOut, repeat:-1});
    // drummer left hand, elbow, high hat & right foot/knee
    TweenMax.to(armLeft, .25, {rotationZ:1, transformOrigin:"100% 20%", ease:Back.easeOut, repeat:-1});
    TweenMax.to(elbowLeft, .25, {rotationZ:-2, transformOrigin:"0% 50%", ease:Back.easeOut, repeat:-1});
    TweenMax.from(handLeft, .25, {rotationZ:20, transformOrigin:"10% 90%", ease:Back.easeOut, repeat:-1});
    TweenMax.from([highHatTop, highHatBottom], .25, {rotationZ:2, transformOrigin:"50% 50%", ease:Back.easeOut, repeat:-1});
    TweenMax.to(highHatTop, 1, {y:3, transformOrigin:"50% 50%", ease:Back.easeOut, repeat:-1, repeatDelay:1});
    TweenMax.to(footRight, 1, {y:-2, ease:Back.easeOut, repeat:-1, repeatDelay:1});
    // right hand, arm and snare
    TweenMax.from(armRight, 1, {y:2, transformOrigin:"0% 0%", ease:Back.easeOut, repeat:-1});
    TweenMax.from(foreArmRight, 1, {rotationZ:-2, transformOrigin:"100% 10%", ease:Back.easeOut, repeat:-1});
    TweenMax.from(handRight, 1, {rotationZ:-18, transformOrigin:"90% 90%", ease:Back.easeOut, repeat:-1});
    TweenMax.from(lowDrum, 1, {scale:1.05, transformOrigin:"50% 0%", ease:Cubic.easeOut, repeat:-1});
};
drummerAnim(document.getElementById("drummer"));

var nileAnim = function(el) {
    var head = el.getElementById('head'),
        torso = el.getElementById('torso'),
        shoulderRight = el.getElementById('shoulderRight'),
        shoulderLeft = el.getElementById('shoulderLeft'),
        handLeft = el.getElementById('handLeft'),
        armLeft = el.getElementById('armLeft'),
        guitar = el.getElementById('guitar'),
        armRight = el.getElementById('armRight'),
        handRight = el.getElementById('handRight');

    //Nile
    TweenMax.to(head, .5, {y:4, x:3, rotationZ:4, transformOrigin:"50% 50%", repeat:-1, ease:Back.easeOut, yoyo:true });
    TweenMax.to(armLeft, .25, {x:4, y:4, rotationZ:14, transformOrigin:"100% 0%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.from(handLeft, .1, {x:-4, y:6, rotationZ:45, transformOrigin:"50% 50%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to([torso, guitar, handRight, armRight], .5, {x:-2, y:4, transformOrigin:"50% 50%", repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to([torso, shoulderRight, shoulderLeft], .5, {y:4, repeat:-1, ease:Back.easeOut, yoyo:true});
    TweenMax.to(guitar, 1, {rotationZ:2, transformOrigin:"50% 50%", repeat:-1, ease:Back.easeOut, yoyo:true});
};
nileAnim( document.getElementById("nile") );
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console