css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <div class="btn-wrapper">
    <a href="http://dinokiki.com" target="_blank" class="btn-dino">But who's Dinokiki?</a>
  </div>
  <nav>
    <ul class="main-menu">
      <li id="accessories" class="active">
        <span class="current-type">
          <div class="none"></div>
        </span>
        <span class="name">Accessories</span>
      </li>
      <li id="spine">
        <span class="current-type">
          <svg class="menu-spine" viewBox="0 0 536.1 356.5">
          <path id="spine-1" fill="#D8BB36" stroke="#020202" stroke-width="0.7213" stroke-miterlimit="10" d="M535.8,13.3c0,0,0-3.3-1.4-4.7
            c-1.3-1.4-3-4-7.5-4.7c-2.5-0.4-3.9,0.7-4.7,1.8c-0.6,0.8-2.2,2.4-2.2,2.4s-1.7-2.6-3.9-5.4c-0.8-1-3.6-1.9-4.7-2.2
            c-0.5-0.1-1.5-0.1-2.3-0.1s-2.9,0.9-2.9,0.9s-2.7,2.4-3.4,3.2c-1.1,1.3-1.3,2.3-1.7,2.4c-0.5,0-2.6-2.6-5.5-3.3s-6-0.7-6-0.7
            s-3.7,0.6-5.3,2.1c-1.6,1.4-3.3,8.4-3.3,8.4s-1-0.7-1.9-1.3c-0.5-0.3-3-1.2-4.4-1.4c-1.7-0.2-3.3,0.1-3.3,0.1s-1.9,0.3-5.9,2.7
            s-3.9,5.4-3.9,5.4l0.1,4.7l0.7,4.2c0,0-5.2,0.8-5.8,1.4c-0.6,0.5-2.1,1-2.9,2.2c-1.3,1.8-2.3,4.1-2.3,4.1l-0.8,3V42l1.3,2.6l2.2,2.7
            l1,1.3l-2.7,0.8c0,0-6.4,5.4-6.6,10.3s0,4.2,0,4.2s0.6,3.8,1.2,4.5c0.5,0.7,5.6,7,5.6,7l-4.3,4.4c0,0-2.9,4.8-2.5,8.7
            c0.4,4,0.9,5.5,0.9,5.5l2.1,2.8l2.7,3.2l1,0.9l-3.8,3.8c0,0-3.5,6.5-3.3,9.6c0.1,1.9,1,4.3,1.8,5.9c0.5,1,1.7,2.4,1.7,2.4l3.8,3.3
            l-0.9,1.3l-2.3,3c0,0-1.8,3.1-2.3,4.7c-0.4,1.2-0.7,2.5-0.8,3.3c-0.2,2,0.9,5.5,0.9,5.5s1,1.9,2.1,3.7c1.1,1.8,3.4,4.6,3.4,4.6
            s-4.7,2.6-5,3s-4.1,3-5,5.7s-1.4,6.6-1.4,6.6v1.4c0,0,0.2,2.3,0.7,3.6c0.5,1.4,2.2,4.7,2.2,4.7s-2.5,0-5,0.1
            c-2.2,0.1-4.1,0.4-4.6,0.7c-0.5,0.3-2.6,1.2-4.5,2.5c-2,1.5-4.2,3.3-5,5.1c-1.6,3.4-2,8.1-2,8.1s-1.2-0.9-2.5-1.8
            c-0.5-0.4-1.1-0.8-1.6-1.1c-0.9-0.6-3.3-1.4-4.6-1.7c-2.5-0.6-6.3-1.3-9.1-0.2c-4.2,1.6-6.5,4.3-6.5,4.3l-2.4,2.5
            c0,0-0.6-1.8-2.9-4.6c-1.2-1.4-3.2-2.9-4.8-4c-1.5-1-3.9-1.9-5.4-2.1c-2.2-0.3-5.4-0.4-7.4,0.2c-3.5,1.1-7.1,5.5-7.1,5.5
            s-1.5-1.8-3-3.4c-1.2-1.4-3.8-3.8-5.2-4.4c-1.8-0.9-4.4-1.8-7.2-1.9c-2.6,0-5.2,0.7-7,1.3c-1.7,0.6-4,2.7-4,2.7l-3.1,2.8
            c0,0-1.7-2.6-3.5-4.4c-0.7-0.7-4-2.2-5.3-2.7c-1.2-0.4-2.5-0.9-3.5-1.2c-0.9-0.3-3.5-0.2-4.9,0.1c-1.5,0.3-3.3,0.9-5.1,1.8
            c-3.6,1.8-5.7,5.7-5.7,5.7s-3.7-3.3-5.1-4.8s-6.2-3-9.3-2.8c-3.1,0.2-5,0.2-9.1,2.7s-5.2,4.8-5.2,4.8s-2.6-4.3-7.8-6.6
            c-1.4-0.6-2.6-1-3.5-1.2c-2.7-0.6-5.5-0.1-7.9,0.9c-1.1,0.4-2.3,1.1-3.6,2.1c-4.1,3.2-4.8,5.4-4.8,5.4s-1.8-5-8.7-6.3
            c-1.1-0.2-1.9-0.4-2.6-0.5c-3.7-0.7-6.7,0.7-7.6,1.1s-1.8,0.9-2.6,1.5c-3.3,2.6-5.5,5.8-5.5,5.8s-2.2-1.9-4-3.3
            c-0.8-0.6-4.3-2-6.2-2.5c-1.4-0.4-2.9-0.6-4.3-0.6c-3.4,0.1-8.2,2.6-8.2,2.6s-3.7,3.2-4.7,4.6s-0.5,1.3-0.5,1.3s-4.4-4.9-11.2-4.8
            s-10.6,4.3-10.6,4.3s-2.2,2.8-3.1,4.4c-0.9,1.6-1.6,4.6-1.6,4.6s-6.4-2.8-9.3-2.6c-2.9,0.2-5,1.3-5.5,1.5c-0.4,0.2-3.4,2-5.3,3.7
            c-0.8,0.7-2.5,3.6-2.8,4.3c-0.4,0.7-0.7,1.4-0.8,1.9c-0.3,1-0.4,2.3-0.4,2.3s-2.3-1.4-4.2-2.4c-1-0.5-4-0.8-5.7-0.7
            c-1.3,0.1-2.7,0.3-4,0.6c-1.3,0.3-5.2,3-6.2,3.9c-1.8,1.6-3.4,3.4-3.9,5.4c-0.8,3-1,5.5-1,5.5l-0.3,1.2c0,0-6.1-1.9-8-1.6
            s-7.3,0.9-10.5,4.2c-1.3,1.3-2.2,2.6-2.9,3.8c-1.1,1.9-1.2,6.7-1.2,6.7v4.4c0,0-1.8-0.6-3.3-0.9c-0.7-0.2-3.2,0-4.5,0.3
            c-2.3,0.6-5.4,1.6-6.3,2.5c-0.7,0.7-2,2-3,3.2c-1.1,1.2-2.8,4.7-2.8,4.7l-0.9,2.9c0,0-0.1,2.9,0.5,4.4c0.5,1.5,1,2.9,1,2.9l0.2,1.4
            l-1.3,0.2c0,0-5.8-0.5-9.4,2.3s-4.3,4.3-4.3,4.3s-2.4,4.9-2.4,6.3c0,0.7,0.2,2.5,0.3,4c0.2,1.6,1.5,5,1.5,5l-3.7,0.1
            c0,0-2.7,0.8-4.9,1.7c-1.1,0.5-4.2,3.4-5.2,4.6c-0.9,1.1-2.1,3.5-2.3,4.3c-0.4,1.3-0.9,3.1-0.7,5.2c0.1,0.7,0.1,1.3,0.2,1.8
            c0.2,2.1,1.1,4.1,1.1,4.1l0.9,1.5l-4,1.1c0,0-4.4,0.9-8.2,5.8c-1.8,2.4-2.7,4.4-3,5.8c-0.4,1.5-0.7,2.6-0.4,4.4
            c0.2,1.4,2.8,5.9,2.8,5.9s-7.3-2.2-10.7,0.1c-3.3,2.3-5.1,2.9-6.3,5.2s-1.3,4-1.3,4s-0.2,4.5-0.2,5.1s-2.7-2.3-7.1-2.2
            s-7.4,2.2-7.4,2.2l-1.7,1.6l-3.2,4.4l-1.3,2.7v1.4l7.6-3.5l5.4-1.9l7.4-4.1l11.4-7.3l7.1-7.2l12.2-22.2l14.9-24.1l15.8-22.3l8.1-7.7
            l11-13.3l21.8-16.8L142,215l12.1-5.2l5.5-2.3l10.9-5l10.9-5.3c0,0,3.6-1.6,7.8-2.9c5.6-1.6,12.5-3.5,14.4-3.4c3.2,0.2,21.3-1,21.3-1
            l55.8-2.2h52.4c0,0,36.2,2.5,43.6,4.9c7.4,2.3,37.2,5.8,37.2,5.8l3.2-0.2c0,0,2.3-1.3,3.8-1.9c1.1-0.5,0.9-0.4,2.1-1.1
            c2.1-1.2,4.4-2.7,5.2-3.2c1-0.6,3-2,4.8-3.2c2.1-1.4,3.6-2.8,3.8-2.9c0.2-0.1,2-1.6,3.6-3.4c1.8-2.1,3.4-4.4,3.4-4.4
            s3.3-3.5,5.7-7.8c2.1-3.6,3.4-7.9,3.4-9.6c0-3.8,0-36.3,0-36.3V62.3c0,0,1.2-6.1,1.7-8.3c0.5-2.1,7-23.7,7-23.7s8.8-12.9,17-15.5
            s17.6-6.6,17.6-6.6l11.7-0.7l13.7,1.1l9,2.4L535.8,13.3z"/>
          </svg>

        </span>
        <span class="name">Spine</span>
      </li>
      <li id="eyes">
        <span class="current-type">
          <svg class='menu-eyes' viewBox='0 0 24.7 26.7'>	
            <ellipse id='olho_2_' display='inline' fill='#FFFFFF' stroke='#020202' stroke-width='0.7691' stroke-miterlimit='10' cx='13.6' cy='12.9' rx='10.2' ry='8.1'/>
            <ellipse id='centro_olho_3_' display='inline' fill='#020202' cx='13.6' cy='12.9' rx='5' ry='4.3'/>
          </svg>
        </span>
        <span class="name">Eyes</span>
      </li>
      <li id="mouth">
        <span class="current-type">
          <svg class='menu-mouth' viewBox='0 0 56.7 12'>
            <path fill='none' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M0.1,0.3
            c0,0,23.5,9.3,27.4,9.6s13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1'/>
          </svg>
        </span>
        <span class="name">Mouth</span>
      </li>
      <li id="nose">
        <span class="current-type">
          <svg class='menu-nose' viewBox='0 0 14.6 10.9'>
            <path id='narina2_2_' fill='#020202' stroke='#020202' stroke-width='0.7108' stroke-miterlimit='10' d='M11.3,8.8
              c0,0.6-0.5,1-1,1l0,0c-0.6,0-1-0.5-1-1V3.6c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1V8.8z'/>
            <path id='narina_2_' fill='#020202' stroke='#020202' stroke-width='0.7108' stroke-miterlimit='10' d='M5,8.8c0,0.6-0.5,1-1,1
              l0,0c-0.6,0-1-0.5-1-1V3.6c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1V8.8z'/>
          </svg>

        </span>
        <span class="name">Nose</span>
      </li>
      <li id="skin">
        <span class="current-type">
          <div class='skin-tone regular'></div>
        </span>
        <span class="name">Skin Tone</span>
      </li>
    </ul>
    <section class="secondary-menu">
      <ul class="accessories">
        <li>
          <div class="menu-wrapper headphones"></div>
        </li>
        <li>
          <div class="menu-wrapper cat-stuff">
          </div>
        </li>
        <li>
          <div class="menu-wrapper sunglasses">
          </div>
        </li>
        <li>
          <div class="menu-wrapper tie">
          </div>
        </li>
        <li class="active">
          <div class="menu-wrapper none"></div>
        </li>
      </ul>
    </section>
  </nav>
  <main>
    <div class="dino-wrapper">
      <div class="dino">
        <svg viewBox="16.6 116.7 563.5 476.2">
          <g id="spine">
            <path id="spine-1" class="spine-item" fill="#D8BB36" stroke="#010101" stroke-width="0.7213" stroke-miterlimit="10" d="M558.7,220c0,0,0-3.3-1.4-4.7
          c-1.3-1.4-3-4-7.5-4.7c-2.5-0.4-3.9,0.7-4.7,1.8c-0.6,0.8-2.2,2.4-2.2,2.4s-1.7-2.6-3.9-5.4c-0.8-1-3.6-1.9-4.7-2.2
          c-0.5-0.1-1.5-0.1-2.3-0.1s-2.9,0.9-2.9,0.9s-2.7,2.4-3.4,3.2c-1.1,1.3-1.3,2.3-1.7,2.4c-0.5,0-2.6-2.6-5.5-3.3s-6-0.7-6-0.7
          s-3.7,0.6-5.3,2.1c-1.6,1.4-3.3,8.4-3.3,8.4s-1-0.7-1.9-1.3c-0.5-0.3-3-1.2-4.4-1.4c-1.7-0.2-3.3,0.1-3.3,0.1s-1.9,0.3-5.9,2.7
          s-3.9,5.4-3.9,5.4l0.1,4.7l0.7,4.2c0,0-5.2,0.8-5.8,1.4c-0.6,0.5-2.1,1-2.9,2.2c-1.3,1.8-2.3,4.1-2.3,4.1l-0.8,3v3.5l1.3,2.6
          l2.2,2.7l1,1.3l-2.7,0.8c0,0-6.4,5.4-6.6,10.3s0,4.2,0,4.2s0.6,3.8,1.2,4.5c0.5,0.7,5.6,7,5.6,7l-4.3,4.4c0,0-2.9,4.8-2.5,8.7
          c0.4,4,0.9,5.5,0.9,5.5l2.1,2.8l2.7,3.2l1,0.9l-3.8,3.8c0,0-3.5,6.5-3.3,9.6c0.1,1.9,1,4.3,1.8,5.9c0.5,1,1.7,2.4,1.7,2.4l3.8,3.3
          l-0.9,1.3l-2.3,3c0,0-1.8,3.1-2.3,4.7c-0.4,1.2-0.7,2.5-0.8,3.3c-0.2,2,0.9,5.5,0.9,5.5s1,1.9,2.1,3.7c1.1,1.8,3.4,4.6,3.4,4.6
          s-4.7,2.6-5,3s-4.1,3-5,5.7s-1.4,6.6-1.4,6.6v1.4c0,0,0.2,2.3,0.7,3.6c0.5,1.4,2.2,4.7,2.2,4.7s-2.5,0-5,0.1
          c-2.2,0.1-4.1,0.4-4.6,0.7c-0.5,0.3-2.6,1.2-4.5,2.5c-2,1.5-4.2,3.3-5,5.1c-1.6,3.4-2,8.1-2,8.1s-1.2-0.9-2.5-1.8
          c-0.5-0.4-1.1-0.8-1.6-1.1c-0.9-0.6-3.3-1.4-4.6-1.7c-2.5-0.6-6.3-1.3-9.1-0.2c-4.2,1.6-6.5,4.3-6.5,4.3l-2.4,2.5
          c0,0-0.6-1.8-2.9-4.6c-1.2-1.4-3.2-2.9-4.8-4c-1.5-1-3.9-1.9-5.4-2.1c-2.2-0.3-5.4-0.4-7.4,0.2c-3.5,1.1-7.1,5.5-7.1,5.5
          s-1.5-1.8-3-3.4c-1.2-1.4-3.8-3.8-5.2-4.4c-1.8-0.9-4.4-1.8-7.2-1.9c-2.6,0-5.2,0.7-7,1.3c-1.7,0.6-4,2.7-4,2.7l-3.1,2.8
          c0,0-1.7-2.6-3.5-4.4c-0.7-0.7-4-2.2-5.3-2.7c-1.2-0.4-2.5-0.9-3.5-1.2c-0.9-0.3-3.5-0.2-4.9,0.1c-1.5,0.3-3.3,0.9-5.1,1.8
          c-3.6,1.8-5.7,5.7-5.7,5.7s-3.7-3.3-5.1-4.8s-6.2-3-9.3-2.8c-3.1,0.2-5,0.2-9.1,2.7s-5.2,4.8-5.2,4.8s-2.6-4.3-7.8-6.6
          c-1.4-0.6-2.6-1-3.5-1.2c-2.7-0.6-5.5-0.1-7.9,0.9c-1.1,0.4-2.3,1.1-3.6,2.1c-4.1,3.2-4.8,5.4-4.8,5.4s-1.8-5-8.7-6.3
          c-1.1-0.2-1.9-0.4-2.6-0.5c-3.7-0.7-6.7,0.7-7.6,1.1s-1.8,0.9-2.6,1.5c-3.3,2.6-5.5,5.8-5.5,5.8s-2.2-1.9-4-3.3
          c-0.8-0.6-4.3-2-6.2-2.5c-1.4-0.4-2.9-0.6-4.3-0.6c-3.4,0.1-8.2,2.6-8.2,2.6s-3.7,3.2-4.7,4.6s-0.5,1.3-0.5,1.3s-4.4-4.9-11.2-4.8
          s-10.6,4.3-10.6,4.3s-2.2,2.8-3.1,4.4c-0.9,1.6-1.6,4.6-1.6,4.6s-6.4-2.8-9.3-2.6c-2.9,0.2-5,1.3-5.5,1.5c-0.4,0.2-3.4,2-5.3,3.7
          c-0.8,0.7-2.5,3.6-2.8,4.3c-0.4,0.7-0.7,1.4-0.8,1.9c-0.3,1-0.4,2.3-0.4,2.3s-2.3-1.4-4.2-2.4c-1-0.5-4-0.8-5.7-0.7
          c-1.3,0.1-2.7,0.3-4,0.6c-1.3,0.3-5.2,3-6.2,3.9c-1.8,1.6-3.4,3.4-3.9,5.4c-0.8,3-1,5.5-1,5.5l-0.3,1.2c0,0-6.1-1.9-8-1.6
          s-7.3,0.9-10.5,4.2c-1.3,1.3-2.2,2.6-2.9,3.8c-1.1,1.9-1.2,6.7-1.2,6.7v4.4c0,0-1.8-0.6-3.3-0.9c-0.7-0.2-3.2,0-4.5,0.3
          c-2.3,0.6-5.4,1.6-6.3,2.5c-0.7,0.7-2,2-3,3.2c-1.1,1.2-2.8,4.7-2.8,4.7l-0.9,2.9c0,0-0.1,2.9,0.5,4.4c0.5,1.5,1,2.9,1,2.9l0.2,1.4
          l-1.3,0.2c0,0-5.8-0.5-9.4,2.3s-4.3,4.3-4.3,4.3s-2.4,4.9-2.4,6.3c0,0.7,0.2,2.5,0.3,4c0.2,1.6,1.5,5,1.5,5l-3.7,0.1
          c0,0-2.7,0.8-4.9,1.7c-1.1,0.5-4.2,3.4-5.2,4.6c-0.9,1.1-2.1,3.5-2.3,4.3c-0.4,1.3-0.9,3.1-0.7,5.2c0.1,0.7,0.1,1.3,0.2,1.8
          c0.2,2.1,1.1,4.1,1.1,4.1l0.9,1.5l-4,1.1c0,0-4.4,0.9-8.2,5.8c-1.8,2.4-2.7,4.4-3,5.8c-0.4,1.5-0.7,2.6-0.4,4.4
          c0.2,1.4,2.8,5.9,2.8,5.9s-7.3-2.2-10.7,0.1c-3.3,2.3-5.1,2.9-6.3,5.2s-1.3,4-1.3,4S44,552,44,552.6s-2.7-2.3-7.1-2.2
          s-7.4,2.2-7.4,2.2l-1.7,1.6l-3.2,4.4l-1.3,2.7v1.4l7.6-3.5l5.4-1.9l7.4-4.1l11.4-7.3l7.1-7.2l12.2-22.2l14.9-24.1l15.8-22.3l8.1-7.7
          l11-13.3l21.8-16.8l18.9-10.6l12.1-5.2l5.5-2.3l10.9-5l10.9-5.3c0,0,3.6-1.6,7.8-2.9c5.6-1.6,12.5-3.5,14.4-3.4
          c3.2,0.2,21.3-1,21.3-1l55.8-2.2H356c0,0,36.2,2.5,43.6,4.9c7.4,2.3,37.2,5.8,37.2,5.8l3.2-0.2c0,0,2.3-1.3,3.8-1.9
          c1.1-0.5,0.9-0.4,2.1-1.1c2.1-1.2,4.4-2.7,5.2-3.2c1-0.6,3-2,4.8-3.2c2.1-1.4,3.6-2.8,3.8-2.9c0.2-0.1,2-1.6,3.6-3.4
          c1.8-2.1,3.4-4.4,3.4-4.4s3.3-3.5,5.7-7.8c2.1-3.6,3.4-7.9,3.4-9.6c0-3.8,0-36.3,0-36.3V269c0,0,1.2-6.1,1.7-8.3
          c0.5-2.1,7-23.7,7-23.7s8.8-12.9,17-15.5s17.6-6.6,17.6-6.6l11.7-0.7l13.7,1.1l9,2.4L558.7,220z"/>
            <path id="spine-2" class="hidden spine-item" fill="#D7BA36" stroke="#000000" stroke-width="0.7167" stroke-miterlimit="10" d="M558.3,220.7
          c0,0,0-3.3-1.4-4.7c-1.3-1.4-11.3-3.9-12.1-2.9c-0.6,0.8-2.2,2.4-2.2,2.4s-1.7-2.6-3.9-5.4c-0.8-1-12.5,1-13.2,1.8
          c-1.1,1.3-1.3,2.3-1.6,2.3c-0.5,0-2.6-2.6-5.4-3.3c-2.9-0.7-14.5,9.6-14.5,9.6s-1-0.7-1.9-1.3c-0.5-0.3-2.9-1.2-4.3-1.4
          c-1.7-0.2-13,8.1-13,8.1l0.1,4.7l0.7,4.1c0,0-5.1,0.8-5.8,1.4c-0.6,0.5-4.7,15.4-4.7,15.4l2.2,2.7l1,1.3l-2.7,0.8
          c0,0-5.9,18.2-5.4,18.9c0.5,0.7,5.5,7,5.5,7l-4.3,4.4l-1.6,14.2l4.7,5.9l1,0.9c0,0-7.2,10.2-7,13.4c0.1,1.9,7.2,11.5,7.2,11.5
          l-0.9,1.3c0,0-5.2,10.1-5.3,10.9c-0.2,2,6.4,13.8,6.4,13.8s-9,5.9-9.9,8.6s1.5,16.1,1.5,16.1s-12.2,2-14.1,3.4c-2,1.4-7,13.1-7,13.1
          s-7.4-4.2-8.7-4.5c-2.5-0.6-17.8,6.6-17.8,6.6s-4.3-3.9-8-7c-2.4-2-9.8-3.1-10.4-3.2c-2.2-0.3-9.2,5.2-9.2,5.2s-1.5-1.8-3-3.4
          c-1.2-1.4-0.3-4.4-0.6-4.5c-1.7-0.7-9.4-1.7-11.7-1.7c-0.8,0-6.8-0.7-7.5-0.6c-1.8,0.2-3.5,4.6-3.5,4.6L363,394c0,0-3.8-7.2-5.1-7.7
          c-1.2-0.4-6.1-0.2-7.1-0.5c-0.9-0.3-13.1-0.3-13.1-0.3l-2.5,7.9l-5.1-4.7l-18.6-1.8l-4.9,6.5l-7.8-6.5l-14.9,1.9l-4.7,5.4l-3.4-7.9
          l-17.8,3.7l-5.5,5.7c0,0-4.1-6.6-6-7.1c-1.3-0.4-6.9,0.7-8.4,0.7c-3.4,0.1-11.4,1.8-11.4,1.8s-0.4,4-1.4,5.4c-1,1.4-0.5,1.3-0.5,1.3
          l-7.8-7.2l-6.6,0.4l-11.6,8l-0.2,7.2l-9.2-2.6l-13.9,4.9l-0.9,8.7l-7.9-6.7l-12.1,8.1l-4.8,10.8l-0.3,1.2c0,0-6-5.5-7.9-5.2
          s-17.1,11.4-17.1,11.4l2.5,6.8v4.4l-7.7-0.6l-6.3,2.5l-6.7,10.8l1.4,7.3l0.2,1.4l-1.3,0.2l-8.4-2.1c0,0-7.6,13.4-7.6,14.9
          c0,0.7,1.8,9,1.8,9l-8.9-1.7l-8.8,17.5l2.2,5.9l0.9,1.5l-3.9,1.1l-6.7,1.3l-4.9,14.5l2.8,5.9l-8.5-2.8l-8.4,8.1c0,0-1.5,8.4-1.5,9
          c0,0.6-7.4-5.8-7.4-5.8l-11.9,11.8l-1.3,2.6v1.4l7.5-3.5l5.3-1.9l7.4-4l11.4-7.2l7.1-7.1l12.2-22l14.8-23.9l15.7-22.1l8.1-7.7
          l10.9-13.2l21.7-16.7l18.8-10.6l12-5.2l5.5-2.3l10.8-5l10.8-5.3c0,0,3.6-1.6,7.8-2.9c5.6-1.6,12.4-3.5,14.3-3.4
          c3.2,0.2,21.1-1,21.1-1l55.5-2.2l52.1,0c0,0,36,2.5,43.3,4.8c7.4,2.3,36.9,5.7,36.9,5.7l3.2-0.2c0,0,2.2-1.3,3.8-1.9
          c1.1-0.5,0.9-0.4,2.1-1.1c2.1-1.2,4.3-2.7,5.2-3.2c1-0.6,2.9-2,4.8-3.2c2.1-1.4,3.6-2.8,3.8-2.9c0.2-0.1,2-1.6,3.5-3.4
          c1.8-2,3.4-4.4,3.4-4.4s3.2-3.5,5.6-7.7c2.1-3.6,3.3-7.8,3.3-9.6c0-3.8,0-36.1,0-36.1V269c0,0,1.2-6.1,1.7-8.2
          c0.5-2.1,6.9-23.5,6.9-23.5s8.7-12.8,16.9-15.4c8.1-2.6,17.5-6.5,17.5-6.5l11.7-0.7l13.6,1.1l9,2.4L558.3,220.7z"/>
            <path id="spine-3" class="hidden spine-item" fill="#D7BA36" stroke="#000000" stroke-width="0.7167" stroke-miterlimit="10" d="M561.7,223.3
          c0,0,3.1-9.5,1.8-10.9s-6.5-6.6-10.9-7.3c-2.5-0.4-7.1,7-7.8,8c-0.6,0.8-2.2,2.4-2.2,2.4s-1.7-2.6-3.9-5.4c-0.8-1-3.6-1.9-4.7-2.2
          c-0.5-0.1-1.4-0.1-2.2-0.1c-0.8,0-2.9,0.9-2.9,0.9s-2.7,2.3-3.4,3.1c-1.1,1.3-1.6,2.3-1.6,2.3c-0.5,0-2.6-2.6-5.4-3.3
          c-2.9-0.7-5.9-0.7-5.9-0.7s-3.7,0.6-5.3,2.1c-1.6,1.4-0.4,7.8-0.4,7.8s-7.2-5.3-8.6-6.6c-1.2-1.1-5.2-1.5-5.2-1.5s-2.9,0.4-6.8,2.8
          c-3.9,2.4-2.2,12.4-2.2,12.4l1.5,7.8c0,0-5.1,0.8-5.8,1.4c-0.6,0.5-2.1,1-2.9,2.2c-1.3,1.8-2.3,4.1-2.3,4.1l-0.8,3v3.5l1.3,2.6
          l2.2,2.7l1,1.3l-2.7,0.8c0,0-6.4,5.4-6.5,10.2c-0.2,4.8,0,4.2,0,4.2s0.6,3.8,1.2,4.5c0.5,0.7,5.5,7,5.5,7l-2.1,1.3
          c-7.8,5-7,4.6-8.1,5.3c-2.8,1.8-4.6,2.3-6,9.5c-1.9,9.5,7.8,14.6,7.8,14.6l8.6,2.4c0,0-6.4,2.5-6.5,6c-0.1,2.3,0.2,3.8,0.9,5.4
          c0.5,1,1.7,2.4,1.7,2.4l3.8,3.3c0,0-38.5,12.4-18.8,39.4c1.7,2.3,10.6,11.3,10.6,11.3s-2.5,0-5,0.1c-2.2,0.1-4.1,0.4-4.6,0.7
          c-0.5,0.3-2.6,1.2-4.5,2.5c-2,1.4-4.2,3.3-5,5c-1.6,3.4-2,8.1-2,8.1s-0.6-0.5-1.9-1.4c-0.5-0.4-1.7-1.2-2.2-1.5
          c-3.8-2.2-6.9-1.4-8.2-0.9c-5.6,2.4-8,7.1-8,7.1s0.1-3.7-1-7.1c-1.2-3.6-8.2-6.5-10-7.2c-6.5-2.6-11.1-1.6-12.6-1.2
          c-6,1.2-10.1,9.4-10.1,9.4s2.1-9.7-0.2-14.8c-0.8-1.8-7.6-1.6-10.3-1C372.5,383.1,370,395,370,395s-1.4-4.2-2.6-6.4
          c-1.7-3-6.2-3.9-13.2-2.2c-5.8,1.5-7.2,7.6-7.2,7.6s2.7-8.1-5.3-8.2c-4-0.1-6.5,7.7-6.5,7.7c2.1-1.4-3.4-6.4-11.4-15.7
          c-9.8-11.4-24.7-13.4-37.8-3.5c-7.5,5.7-6.8,19.8-6.8,19.8s-1.8-4.9-8.6-6.3c-1.1-0.2-1.9-0.4-2.6-0.5c-3.7-0.7-6.6,0.7-7.5,1.1
          c-0.9,0.4-1.7,0.9-2.6,1.5c-3.3,2.6-5.5,5.7-5.5,5.7s2.5-9,0.2-12.4c-2.7-4.1-17.5-4.8-21.1-2.1c-6.3,4.8-5.3,13.9-6.3,15.3
          c-1,1.4-0.5,1.3-0.5,1.3s0.5-11-6.2-10.9c-6.7,0.1-15.5,10.4-15.5,10.4s-2.2,2.7-3.1,4.4c-0.9,1.6-1.6,4.6-1.6,4.6s-2-3.1-4.9-2.9
          c-2.9,0.2-11.9,3.7-12.8,6.1c-1,2.5,1.8,4.4,1.8,4.4s-5.8-7.4-12.8-8.9c-11.6-2.5-22.2,4.8-23.7,13.7c-1.3,7.5,3.3,12,3.3,12
          s-4.2-3.3-6.1-3s-5.4,0-10.2,3.9c-1.4,1.1-2.8,3.9-2.7,5.3c0.2,2.9,1.9,5.9,1.9,5.9s-6.9-4.3-12-3.3c-18.5,3.5-18.8,16.3-16.2,23.2
          c0.7,1.9,3.1,5.7,3.1,5.7s-6.4,0.7-10,3.4s-4.3,4.3-4.3,4.3s-2.4,4.8-2.4,6.3c0,0.7,0.2,2.4,0.3,4c0.2,1.5,1.5,5,1.5,5l-3.7,0.1
          c0,0-2.7,0.8-4.9,1.7c-1.1,0.5-4.2,3.3-5.2,4.5c-0.8,1-2.1,3.5-2.3,4.3c-0.4,1.3-0.9,3.1-0.7,5.2c0.1,0.7,0.1,1.3,0.2,1.8
          c0.2,2.1,1.1,4.1,1.1,4.1l0.9,1.5l-3.5-1.9c0,0-3.3-0.4-9.2,1.2c-4.1,1.1-8.5,11.2-8.1,12.6c2.6,9.7,8.2,10.8,8.2,10.8
          s-5.8-3.7-9.1-1.4s-4.7,3-5.9,5.4s-0.9,5-0.9,5s0.6,2.8,0.6,3.4c0,0.6-5.7-3.2-10.1-3.1s-6.1-0.2-12.1,4.5
          c-4.6,3.6-3.1,11.2-3.1,11.2l1.7-0.6l7.5-3.5l5.3-1.9l7.4-4l11.4-7.2l7.1-7.1l12.2-22l14.8-23.9l15.7-22.1l8.1-7.7l10.9-13.2
          l21.7-16.7l18.8-10.6l12-5.2l5.5-2.3l10.8-5l10.8-5.3c0,0,3.6-1.6,7.8-2.9c5.6-1.6,12.4-3.5,14.3-3.4c3.2,0.2,21.1-1,21.1-1
          l55.5-2.2l52.1,0c0,0,36,2.5,43.3,4.8c7.4,2.3,36.9,5.7,36.9,5.7l3.2-0.2c0,0,2.2-1.3,3.8-1.9c1.1-0.5,0.9-0.4,2.1-1.1
          c2.1-1.2,4.3-2.7,5.2-3.2c1-0.6,2.9-2,4.8-3.2c2.1-1.4,3.6-2.8,3.8-2.9c0.2-0.1,2-1.6,3.5-3.4c1.8-2,3.4-4.4,3.4-4.4
          s3.2-3.5,5.6-7.7c2.1-3.6,3.3-7.8,3.3-9.6c0-3.8,0-36.1,0-36.1V269c0,0,1.2-6.1,1.7-8.2c0.5-2.1,6.9-23.5,6.9-23.5
          s8.7-12.8,16.9-15.4c8.1-2.6,17.5-6.5,17.5-6.5l11.7-0.7l13.6,1.1l9,2.4L561.7,223.3z"/>
          </g>
          <g id="deer-thing" class="hidden accessories-item">
            <path display="inline" fill="#7D6A5B" d="M499.7,220.8c0,0-8.1-8.2-18.9-25.9c-0.4-0.6-1.6-2.8-2-3.4c-0.5-0.8-7.1-4.2-15.4-9
              c-7.2-4.2-13.5-8.7-14.3-9.4c-0.2-0.1-2.8-2.7-3.9-4.7c-0.9-1.7-0.6-3.1,1.3-1.8c4.5,3.2,8.5,6.3,13.4,9.4c8.4,5.3,17,9.8,16.8,9.2
              c-2.6-8.1-7.5-28.4-6.4-36.3c0.8-5.7,1.4-8.2,2-10.2c0.9-3.1,2.1-2.2,2.3,0c0.4,3.9,0,7.4,0,7.4s-0.1,11.4,2.4,22.4
              c2,9.1,5.9,22.3,16.4,36.7c0.9,1.2,4.1-9.4,5.2-12.8c1.5-4.8,1.8-8.5,3-12.8c0.6-2.5,2.8,1.3,2.6,3.1c-0.4,4.3-0.8,6.7-1.9,11.2
              c-2.1,8.4-5.2,15.2-4.6,15.9c1.6,1.9,4.9,6.5,6.7,8.4C541,257.8,499.7,220.8,499.7,220.8z"/>
            <path display="inline" fill="#7D6A5B" d="M522.5,223.8c0,0,6.8-8.9,14.8-27.3c0.3-0.6,1.2-2.9,1.5-3.5c0.3-0.8,6.3-4.9,13.6-10.6
              c6.4-5,11.9-10.1,12.6-10.8c0.1-0.1,2.4-2.9,3.2-5c0.7-1.7,0.1-3-1.5-1.5c-3.9,3.6-7.4,7.1-11.7,10.7c-7.4,6.2-15,11.6-14.9,11
              c3-16.2,2.1-33.5,1.5-35.6c-1.5-5.3-2.4-7.7-3.2-9.5c-1.3-2.8-2.3-1.8-2.2,0.3c0.1,3.8,1.6,11.9,1.6,11.9s0.9,6.1,0,17
              c-0.8,9-2.8,22.1-11.1,37.3c-0.7,1.3-5.2-8.5-6.6-11.6c-2.1-4.4-2.9-7.9-4.5-11.9c-0.9-2.3-2.5,1.6-2.1,3.3
              c0.9,4.1,1.6,6.3,3.3,10.5c3.1,7.8,6.9,13.9,6.4,14.7c-1.3,2-3.9,6.9-5.4,9C487.6,264.6,522.5,223.8,522.5,223.8z"/>
          </g>
          <path id="skin-color" class="regular" stroke="#010101" stroke-width="0.7213" stroke-miterlimit="10" d="M17.3,571.5
            c0.6-1.2,1.4-2.9,2.3-4.6c0.3-0.7,4.2-4.7,4.9-5.1c1.2-0.7,2.5-1.2,3.5-1.6c5.8-2.2,15-6.5,15-6.5s18.3-11.1,19.5-15.4
            c1.2-4.3,12-21.6,12-21.6s8.9-15.2,13.2-21.7c1.2-1.8,3.6-4.5,4.8-6.6c0.9-1.5,1.9-3.3,2.9-4.9c1.5-2.6,4.1-5.5,5.1-7.3
            c0.4-0.7,0.8-1.4,1.3-2.2c0.6-0.9,2.4-2.8,4.4-4.9c2.9-3,6.3-6.3,7.3-7.5c3.2-3.9,6.1-8.3,11-12.6c7.4-6.5,22-17.5,22-17.5
            s17.9-10.3,19.3-10.5c1.4-0.2,30.7-13.7,30.7-13.7l12.1-6l10.3-2.5l9.7-1.6l25.8-0.9l18.4-1.1l32.3-0.9H334h27.6l9.9,0.7l7.4,0.5
            l4.3,0.7l7.9,1.4l11.7,2l15.1,2.3c0,0,6,0.7,11,1.5c0.8,0.1,1.6,0.2,2.3,0.4c1.3,0.2,2.7,0.5,3.8,0.8c0.9,0.2,4.1,0.1,4.1,0.1
            l0.5-0.2l3.8-1.8c0,0,9-5.6,14.8-9.3c2.6-1.7,5.4-4.7,6.6-6.4c2-2.8,5.1-6.9,7.1-9.7c1.2-1.6,2.6-5.3,3.1-7.2
            c0.4-1.6,0.8-3.1,0.8-3.1v-98.5c0,0,2.3-11.9,2.9-13.2c0.3-0.7,1.7-5.7,2.9-9.9c1-3.5,1.8-6.5,1.8-6.5s0.4-1,1.1-2.3
            c0.4-0.8,0.8-1.6,1.2-2.5c0.5-1,1.6-2.4,3-3.8c1.5-1.5,3.1-3.1,4.3-4c1.6-1.3,3.5-2.7,5.3-3.8c1.4-0.9,11.1-4.6,14.9-6.1
            c1.1-0.4,2.1-0.9,3.1-1.2c2.2-0.8,9.3-1.5,12.2-1.4c6.5,0.3,14.8,0.8,14.8,0.8s6.8,1.4,11.6,3.1c2.7,0.9,6.2,3.9,6.2,3.9l1.8,1.5
            l1.5,1.4l4.3,4.2c0,0,3.9,6,3.6,8.8c-0.1,0.9-0.1,1.7-0.1,2.5c0,3.6,0.5,6.5-2.8,13.3c-1.8,3.8-3.3,5.9-4.3,7
            c-5.4,6.6-12.9,11.8-19.5,15.1c-1.1,0.5-9.8,1.8-17.3,1.8c-6.4,0-12-0.4-12-0.4v38.8l0.2,96.1c0,0-4.8,34.9-7.4,48.8
            c-0.6,3.5-2.6,8.2-3.8,11.8c-2.3,7-5.9,18.3-11.1,24.2c-7.9,8.8-23.1,29-23.1,29s-4.9,8.8-5.6,16.6c-0.4,4.3-0.6,8.9-0.7,12.3
            c-0.1,2.7-0.4,6.5-0.8,8.7c-0.2,1.5-0.4,3.2-0.4,4.5c0,3.1,0,18.4,0,18.4s0.5,5.2-4.7,6.1c-5.2,0.9-34.4,0-34.4,0s-4.3-0.7-5.6-8.1
            c-1.3-7.4-1.3-39.7-1.3-39.7s0-6.5-4.1-6.9s-16.9-0.2-16.9-0.2s-5.2-0.5-6.5,7.2c-1,6.4-3.2,28.8-3.1,37.7c0,1.9,0.6,5.3,0,6.2
            c-0.7,1.1-1.9,2.2-3,2.8c-0.9,0.5-3.2,0.1-4.8,0c-8.4-0.4-32.6,0.2-32.6,0.2s-4.5-2-4.9-3.4c-0.2-0.9-1-3.4-1.5-5.3
            c-0.3-1.1-0.5-4.9-0.5-7.6c0-6,0-15,0-15s1.6-16.2,1.3-17.1c-0.4-0.9,0-4.9-6.1-5.6c-5.3-0.6-21.6-0.2-26,0c-0.7,0-1.9,0.6-2.7,1.5
            c-0.8,0.9-1.7,2.3-2,3.9c-0.4,2.2-1.5,9-2.2,13.4c-0.3,2-0.5,5.3-0.5,6.8c0,7-0.2,24-0.2,24s0,2.7-2.2,3.8s-5.6,1.8-5.6,1.8h-28.9
            c0,0-3.9-0.7-5.1-1.8c-1.2-1-2.5-2.3-2.8-3.5c-0.5-2.3-1.3-8.3-1.3-8.3l-0.5-33.7c0,0,0.7-7.8-2.7-7.8c-2.3,0-7.4,0.1-10.6,0.1
            c-1.6,0-3.8,0.6-5.2,2.2c-2.4,2.6-5.8,8.1-6.7,18.4c-1.4,16.6-0.5,12.4-0.5,12.4v15.1c0,0,0.2,6.2-5.8,6.7s-33,0-33,0
            s-7.4,0.3-7.9-13.9s0-4.9,0-4.9l0.7-16l0.5-18.4c0,0-0.3-4.3-1-5.8c-1.3-2.5-3.8-5.8-8.1-5.8c-4.4,0-8.4,0.3-10.8,0.5
            c-1.4,0.1-3.6,0.8-6.1,1.8c-15.7,6.5-74,30.9-81.2,34.6c-6.1,3.2-15.9,7.7-23.4,10c-1.3,0.4-8.4,1.6-9.2,1.6
            c-3.5,0.2-7.7,0.6-10.9,0.9c-3,0.3-7.2,0.1-9.6-0.6c-2.2-0.7-4.6-1.6-6-2.7C17,573.8,16.8,572.5,17.3,571.5z"/>
          <g id="noses">
            <g id="nose-1" class="nose-item">
              <path id="narina2_2_" fill="#010101" stroke="#010101" stroke-width="0.7108" stroke-miterlimit="10" d="M566,247.5
                c0,0.6-0.5,1-1,1l0,0c-0.6,0-1-0.5-1-1v-5.2c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1V247.5z"/>
              <path id="narina_2_" fill="#010101" stroke="#010101" stroke-width="0.7108" stroke-miterlimit="10" d="M559.7,247.5
                c0,0.6-0.5,1-1,1l0,0c-0.6,0-1-0.5-1-1v-5.2c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1V247.5z"/>
            </g>
            <g id="nose-2" class="hidden nose-item">
              <path id="narina2_1_" display="inline" fill="#010101" stroke="#010101" stroke-width="1.777" stroke-miterlimit="10" d="
                M561.9,239.6c3.2,0,5.9,6.1,6.4,8.7c0.1,0.6-12.9,0.6-12.8,0C556,245.6,558.7,239.6,561.9,239.6z"/>
              <path id="narina_4_" display="inline" fill="#6E973F" d="M561.2,246.2c0,0.1-0.1,0.3-0.2,0.5c-0.6,0.9-1.7,0.8-2.1-0.2
                c-0.1-0.2-0.1-0.3-0.1-0.4v-1.4c0-0.2,0.1-0.4,0.2-0.6c0.5-0.8,1.4-0.8,1.9,0c0.1,0.2,0.2,0.3,0.2,0.4v1.7H561.2z"/>
              <path id="narina_1_" display="inline" fill="#6E973F" d="M565.5,246.2c0,0.1-0.1,0.3-0.2,0.5c-0.6,0.9-1.7,0.9-2.1-0.2
                c0-0.2,0-0.3,0-0.4v-1.4c0-0.2,0.1-0.4,0.2-0.6c0.5-0.8,1.4-0.8,1.9,0c0.1,0.2,0.2,0.3,0.2,0.4V246.2z"/>
            </g>
            <ellipse id="nose-3" class="hidden nose-item" fill="#A12828" cx="562" cy="245.8" rx="7.4" ry="6.1"/>
            <path id="nose-4" class="hidden nose-item" fill="#010101" stroke="#010101" stroke-width="1.777" stroke-miterlimit="10" d="M561.9,250.7
              c-3.2,0-5.9-6.1-6.4-8.7c-0.1-0.6,12.9-0.6,12.8,0C567.8,244.7,565.1,250.7,561.9,250.7z"/>
          </g>
          <g id="eyes">
            <g id="eye-regular" class="eyes-item">

                <ellipse id="olho_2_" fill="#FFFFFF" stroke="#010101" stroke-width="0.7691" stroke-miterlimit="10" cx="518.3" cy="233.6" rx="10.2" ry="8.1"/>
              <ellipse id="centro_olho_3_" fill="#010101" cx="518.3" cy="233.6" rx="5" ry="4.3"/>
            </g>
            <g id="eye-monster" class="eyes-item hidden">
              <path id="olho_1_" display="inline" fill="#DEDDDD" stroke="#010101" stroke-width="2" stroke-miterlimit="10" d="M526.4,233.5
                c0,4.5-8.7,12.5-8.7,12.5s-8-8-8-12.5s7.9-11.5,7.9-11.5S526.4,229.1,526.4,233.5z"/>
              <path id="centro_olho_1_" display="inline" fill="#010101" d="M522.6,233.5c0,0-2.2,4.3-5,4.3c-2.8,0-5-4.3-5-4.3s2.2-4.3,5-4.3
                C520.4,229.2,522.6,233.5,522.6,233.5z"/>
            </g>
            <g id="eye-clock" class="eyes-item hidden">

                <ellipse id="olho_4_" display="inline" fill="#FFFFFF" stroke="#010101" stroke-width="0.7846" stroke-miterlimit="10" cx="518.1" cy="233.7" rx="10.2" ry="8.5"/>

                <line display="inline" fill="none" stroke="#000000" stroke-width="0.77" stroke-miterlimit="10" x1="518.1" y1="233.7" x2="518.1" y2="228.7"/>

                <line display="inline" fill="none" stroke="#000000" stroke-width="0.77" stroke-miterlimit="10" x1="518.5" y1="233.7" x2="510.9" y2="233.7"/>
            </g>
            <path id="eye-happy" class="eyes-item hidden" fill="none" stroke="#010101" stroke-width="0.7213" stroke-miterlimit="10" d="M505.9,231.9
              c0,0,6.2,10.9,23.8,0.6"/>
            <g id="eye-broadway" class="eyes-item hidden">

                <ellipse id="olho_5_" display="inline" fill="#FFFFFF" stroke="#010101" stroke-width="2" stroke-miterlimit="10" cx="517.8" cy="233.8" rx="10.2" ry="8.1"/>
              <polygon display="inline" points="517.1,229.6 521.2,227.4 520.5,232 523.8,235.3 519.2,235.9 517.1,240.1 515.1,235.9 
                510.4,235.3 513.8,232 513,227.4 		"/>
            </g>
            <g id="eye-evil" class="eyes-item hidden">

                <ellipse id="olho_6_" display="inline" fill="#FFFFFF" stroke="#010101" stroke-width="0.7643" stroke-miterlimit="10" cx="517.9" cy="233.1" rx="10.2" ry="8.1"/>
              <ellipse id="centro_olho_2_" display="inline" fill="#010101" cx="517.9" cy="233.1" rx="5" ry="4.3"/>
              <g display="inline" opacity="0.4">
                <g>
                  <path fill="#010101" d="M505,239.3c2.4,4.1,6.4,5.4,10.8,6.2c2,0.4,4.2,0.7,6.3,0.2c2.6-0.6,4-2.2,6.1-3.5
                    c2.7-1.7,0.2-6.1-2.5-4.3c-2.6,1.7-4.1,3.5-7.6,3c-3.2-0.4-7-1.1-8.7-4.1C507.7,234,503.3,236.5,505,239.3L505,239.3z"/>
                </g>
              </g>
            </g>
          </g>
          <g id="mouths">
            <path id="mouth-1" class="hidden mouth-item" fill="none" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M506.1,251.7
              c0,0,23.5,9.3,27.4,9.6s13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1"/>
            <g id="mouth-2" class="hidden mouth-item">
              <g id="teeth_1_" display="inline">
                <path id="dente1_1_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M509.2,252.9
                  c0,0-0.9,13.4,0.4,13.9c1.3,0.5,4.4-12.1,4.4-12.1L509.2,252.9z"/>
                <path id="dente2_1_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M514,261.3
                  c0,0,0.7,3.1,1,3.5c0.4,0.6,2.8,1.4,3.5,0.9c0.5-0.3,1.2-1,1.2-1l2-5.6l0.2-1.4l-7.3-2.6L514,261.3z"/>
                <path id="dente3_1_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M521.5,263.4
                  c0,0,0.1,2.8,1.8,3.3c2.4,0.7,3.2,0.7,3.9,0c1.2-1.2,2.3-2.7,2.5-4.4c0.2-1.7,0.1-1.9,0.1-1.9l-7.9-2.7L521.5,263.4z"/>
              </g>
              <path id="mouth_2" display="inline" fill="none" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M506.1,251.7
                c0,0,1.7,0.7,4.2,1.7c7,2.7,20.3,7.7,23.2,7.9c3.9,0.3,13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1"/>
            </g>
            <g id="mouth-3" class="hidden mouth-item">
              <path id="mouth_1_" display="inline" fill="none" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M506.1,251.7
                c0,0,23.5,9.3,27.4,9.6s13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1"/>
              <g id="teeth_3" display="inline">
                <path id="dente1_4_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M510.9,253.8l0.7,3.3
                  c0,0-0.3,7.2,1,7.7c1.3,0.4,6.2-8.3,6.2-8.3L510.9,253.8z"/>
                <path id="dente2_4_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M517.7,263.8
                  c0,0,0.5,3.2,0.9,3.6c0.4,0.6,5.9-5.6,5.9-5.6l1-2.8l-6.7-2.4L517.7,263.8z"/>
                <path id="dente3_4_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M525.6,269.1
                  c2.2-0.4,7.9-7.8,7.9-7.8l-4.3-1.1l-3.4-1.1C525.8,259.1,523.9,269.5,525.6,269.1z"/>
              </g>
            </g>
            <g id="mouth-4" class="mouth-item">
              <g id="teeth">
                <path id="dente1_2_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7213" stroke-miterlimit="10" d="M510.3,253.5l0.9,4.1
                  c0,0-0.8,6.2,0.5,6.8c1.3,0.5,3.7,0.2,3.7,0.2s1.5-0.2,2-1.2c0.5-1.1,1.3-6.7,1.3-6.7L510.3,253.5z"/>
                <path id="dente2_2_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7213" stroke-miterlimit="10" d="M518,263.8
                  c0,0,0.7,3.2,1,3.5c0.5,0.6,2.8,1.4,3.5,0.9c0.5-0.4,1.2-1,1.2-1l2-5.6v-2.3l-7-2.7L518,263.8z"/>
                <path id="dente3_2_" fill="#FAF3DE" stroke="#010101" stroke-width="0.7213" stroke-miterlimit="10" d="M525.6,265.9
                  c0,0,0.1,2.8,1.8,3.4c2.4,0.8,3.3,0.7,4,0c1.2-1.2,2.3-2.7,2.5-4.5s0.1-3.4,0.1-3.4l-4.2-0.9l-3.7-1.2L525.6,265.9z"/>
              </g>
              <path id="mouth_2_" fill="none" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M506.1,251.7
                c0,0,23.5,9.3,27.4,9.6s13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1"/>
            </g>
            <path id="mouth-5" class="hidden mouth-item" fill="none" stroke="#010101" stroke-width="0.7167" stroke-miterlimit="10" d="M497.1,266.9
              c0,0,32.5-5.9,36.4-5.6s13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1"/>
          </g>
          <g id="glass" class="hidden accessories-item">
            <ellipse display="inline" opacity="0.35" fill="#F8E3CA" enable-background="new    " cx="517.1" cy="233.4" rx="13.3" ry="12.2"/>

              <ellipse display="inline" fill="none" stroke="#3F301B" stroke-width="0.9568" stroke-miterlimit="10" cx="517.1" cy="233.4" rx="13.3" ry="12.2"/>

              <path display="inline" opacity="0.79" fill="none" stroke="#3F301B" stroke-width="0.7167" stroke-miterlimit="10" enable-background="new    " d="
              M506.3,240.8c0,0-4.8,8.4-10.9,8.4s-10,3.9-10,3.9s-4.2,3.8-3,10.6s-6,3.3-6.5,4"/>
          </g>
          <g id="moustache" class="hidden accessories-item">
            <path display="inline" fill="#121212" d="M542.6,255.2c0,0,10.9,2.1,12.9,0c2-2.1,3.3-5.2,4.9-4.4c1.6,0.8,1.2,1.8,1.2,1.8l0.4,4.4
              c0,0-1.7,2.9-2.5,2.9S542.7,259.8,542.6,255.2z"/>
            <path display="inline" fill="#121212" d="M580.1,255.2c0,0-10.9,2.1-12.9,0c-2-2.1-3.3-5.2-4.9-4.4c-1.6,0.8-1.2,1.8-1.2,1.8
              l-1.1,4.3c0,0,2.3,2.9,3.1,2.9C563.9,259.8,580,259.8,580.1,255.2z"/>
          </g>
          <g id="pebble" class="hidden accessories-item">
            <rect x="477.8" y="320.7" display="inline" fill="#942F2F" width="35.9" height="22.4"/>
            <rect x="486" y="324.7" display="inline" fill="#222222" width="19.6" height="14.5"/>
            <rect x="475.6" y="324" display="inline" fill="#151515" width="6.3" height="15.8"/>
            <rect x="509.6" y="324" display="inline" fill="#151515" width="6.3" height="15.8"/>
          </g>
          <g id="necklace" class="hidden accessories-item">
            <line display="inline" fill="none" stroke="#D3B741" stroke-miterlimit="10" x1="494.9" y1="362.8" x2="475" y2="339.2"/>
            <line display="inline" fill="none" stroke="#D3B740" stroke-miterlimit="10" x1="501" y1="357.8" x2="516.9" y2="329.9"/>
            <circle display="inline" fill="#D3B740" cx="496.7" cy="361.7" r="8.8"/>
            <polygon display="inline" fill="#C59D39" points="503.1,360.1 497.9,368.7 490.9,358 494.9,354.7 500.5,355.7 	"/>
            <polygon display="inline" fill="#B99B30" points="497.2,362.5 492,364.1 495.9,357.8 499.3,361.2 	"/>
          </g>  
          <g id="bow-tie-2" class="hidden accessories-item">
            <path fill="#53435B" stroke="#212221" stroke-width="0.5798" stroke-miterlimit="10" d="M519.2,343.8c-1,6.9-22.8-10.5-22.8-10.5
              s21.2-17.2,22.8-10.5C521.2,331.2,520,338.3,519.2,343.8z"/>
            <path fill="#53435B" stroke="#212221" stroke-width="0.5798" stroke-miterlimit="10" d="M473.5,322.9c1-6.9,22.8,10.5,22.8,10.5
              s-21.2,17.2-22.8,10.5C471.5,335.5,472.7,328.3,473.5,322.9z"/>
            <circle fill="#53435B" stroke="#212221" stroke-width="0.616" stroke-miterlimit="10" cx="496.3" cy="333.3" r="5.9"/>
          </g>
          <g id="bow-tie" class="hidden accessories-item">
            <path display="inline" fill="#A33534" stroke="#222222" stroke-width="0.5798" stroke-miterlimit="10" d="M519.2,343.4
              c-1,6.9-22.8-10.5-22.8-10.5s21.1-17.1,22.8-10.4C521.2,330.8,520,338,519.2,343.4z"/>
            <path display="inline" fill="#A33534" stroke="#222222" stroke-width="0.5798" stroke-miterlimit="10" d="M473.5,322.6
              c1-6.9,22.8,10.5,22.8,10.5s-21.2,17.1-22.8,10.4C471.5,335.2,472.7,328,473.5,322.6z"/>

              <circle display="inline" fill="#A33534" stroke="#222222" stroke-width="0.616" stroke-miterlimit="10" cx="496.3" cy="333" r="5.9"/>
          </g>
          <g id="british-hat" class="hidden accessories-item">
            <path display="inline" fill="#928331" d="M492.4,226.9c-6.9,48.1,23.2,49.8,23.2,49.8s0.1,0.7,0,3c0,0.3-3.9-1.4-4.3-1.5
              c-29.5-8.5-21.3-50.5-21.3-50.5"/>
            <path display="inline" d="M545.5,211.5c1.7,6.5-16.3,4.7-31.7,9c-16.9,4.6-31.4,14.7-33.2,7.9l-22.9-87.9c-0.8-3,1.9-6.6,5.7-10.1
              c10.9-10.1,25.6-14.7,40.4-13.5c8.9,0.7,17.7,2.5,18.8,6.7L545.5,211.5z"/>
          </g>
          <g id="engineer-hat" class="hidden accessories-item">
            <path display="inline" fill="#D3B432" d="M478.7,231.3c0,0-0.1-20-0.1-22.4c-0.2-4.7,6.2-11.8,9.5-14.8
              c5.6-5.2,18.8-10.3,22.8-10.4c7.2-0.2,22.9,0.8,28.3,4.3c4.4,2.9,14.4,20.4,16.6,21.8c2.3,1.5,9.9,2.7,12.3,3.7
              c2.3,0.9,7.2,3.1,3.6,5.6s-7.9,1.3-12.3,1.8c-4.4,0.5-44.1-1.3-51.1,0.8c-7,2.1-19.2,16.1-24.7,14
              C478.1,233.6,478.7,231.3,478.7,231.3z"/>
            <path display="inline" opacity="0.58" fill="#EDD364" enable-background="new    " d="M478.7,213.7c0,0,16.4-16.8,29.4-21.8
              c13-5,35.8,1.1,35.8,1.1l2.5,3.5c0,0-12.4-2.8-22.7-3.2c-7.3-0.3-13.1,1.5-15.6,2.5c-5.6,2.3-29.3,23-29.3,23L478.7,213.7z"/>
          </g>
          <g id="indiana-hat" class="hidden accessories-item">
            <g display="inline">
              <path fill="#543D2A" d="M538.1,208.2c1.4,3,0,6.7-3.2,8.1l-50.6,23.4c-3.2,1.5-6.9,0.2-8.3-2.8l-14.5-39.7
                c-1.4-3,20.3-17.1,26.7-20.1c9.7-4.5,25-7.1,26.4-4.1L538.1,208.2z"/>
            </g>
            <path display="inline" fill="#543D2A" d="M532.8,201.5c37.4-14.4,35.4-5.2,28.7,3.7c-4.8,6.3-11,11.3-18,14.9
              c-16.2,8.2-52.6,25.5-76.2,28.3c-31.1,3.8,5.4-21,5.4-21"/>
            <path display="inline" fill="#3A2F27" d="M532.8,201.5l-30.3,14.7c-5.2,2.4-10.5,4.5-15.9,6.4l-13.9,4.8c-1.7-4.1-1.2-4.3-3.2-9.9
              l12.9-4.9c5.4-2,10.7-4.3,15.9-6.9l28-13.8C529.2,196,532.2,200,532.8,201.5z"/>
          </g>
          <g id="bday-hat" class="hidden accessories-item">
          <path fill="#674E75" d="M503.2,221c3.6-1.2,8.5-4,14.2-5.2c5.5-1.2,11.2-0.8,16.3-0.6c1.2,0.1,1,0.1,0.6-1.8
            c-1.6-7.5-16.2-28.5-20.6-34.6c-0.8-1.1-0.8-1.4-1.6-2.2c-0.4-0.4-0.4,0.7-0.7,1.9c-1.6,7.5-8.4,33.7-9.7,40.8
            C501.5,220.3,502.2,221.4,503.2,221z"/>
          <circle fill="#53435B" cx="518.5" cy="197.4" r="2.9"/>
          <circle fill="#53435B" cx="504.9" cy="217.4" r="1.4"/>
          <circle fill="#53435B" cx="514" cy="186.2" r="1.3"/>
          <circle fill="#53435B" cx="510.3" cy="212.7" r="3.7"/>
          <circle fill="#53435B" cx="530.4" cy="212.5" r="1.8"/>
          <circle fill="#53435B" cx="518.2" cy="204.8" r="1.3"/>
          <circle fill="#53435B" cx="525.3" cy="201.1" r="2.2"/>
          <circle fill="#53435B" cx="518.3" cy="213.6" r="1.3"/>
          <circle fill="#53435B" cx="511.6" cy="190.2" r="1.1"/>
          <path fill="#53435B" d="M506.4,205.8c0,0.8-0.7,1.5-1.5,1.5c-0.2,0-0.5,0.1-0.5-0.1c0.4-1.6,0.6-2.8,0.7-2.8
            C505.8,204.5,506.4,205.1,506.4,205.8z"/>
          <path fill="#53435B" d="M521.1,189.8c-0.2,1.1-1.1,1.9-2.2,1.9c-1.3,0-2.3-1-2.3-2.3s1-2.3,2.3-2.3c0.1,0,0.3-0.1,0.4,0
            C520.1,188.1,521.2,189.7,521.1,189.8z"/>
          <circle fill="#53435B" cx="523.5" cy="209.4" r="2.9"/>
          <circle fill="#53435B" cx="511.3" cy="204.1" r="2.2"/>
          <circle fill="#53435B" cx="510" cy="195.4" r="2.3"/>
          <circle fill="#53435B" cx="508.6" cy="200.2" r="1.1"/>
          <circle fill="#53435B" cx="512.6" cy="182.2" r="1.1"/>
          <path fill="#53435B" d="M524.7,195.2C524.7,195.3,524.6,195.3,524.7,195.2c-0.3,0.4-0.6,0.6-1,0.6c-0.6,0-1.1-0.5-1.1-1.1
            s0.4-1,1-1.1C523.6,193.5,524.6,195.1,524.7,195.2z"/>
          <path fill="none" stroke="#674E75" stroke-width="0.5" stroke-miterlimit="10" d="M502.7,219.9c0,0-23.2,36,12.9,58.5"/>
        </g>
          <path id="crown" class="hidden accessories-item" fill="#CC952B" d="M496.1,224.8l-4.5-27.2l11.2,9l1-17.4l7.8,13.8l3.2-14.3l10.2,26.1
          c0,0-4.3,0.3-8,1.1c-2.5,0.5-4.9,2-7.6,2.9c-1.8,0.6-2.7,1-5.6,2.2C500.7,222.3,496.1,224.8,496.1,224.8z"/>
        </svg>
      </div>
    </div>
  </main>
</div>
            
          
!
            
              $black: #222;
$white: #f9f9f9;
$red: #C44B57;
$potato: #F2BB80;
$pink: #9E5186;
$blue: #2D658C;
$pink-2: #796285;

$dino: #6e973f;
$dino-darker: #596d3e;
$dino-lighter: $dino + 20;
$dino-crazy: $red - 25;

@mixin transform($info) {
  transform: $info;
  -webkit-transform: $info;
  -moz-transform: $info;
  -ms-transform: $info;
}
@mixin gradient($info) {
  background: linear-gradient($info);
  background: -webkit-linear-gradient($info);
  background: -moz-linear-gradient($info);
  background: -ms-linear-gradient($info);
}
@mixin browsers($info) {
  animation: $info;
  -webkit-animation: $info;
  -moz-animation: $info;
  -ms-animation: $info;
  -o-animation: $info;
}
@mixin animation($name) {
  @keyframes #{$name} {
    @content;
  }
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @-ms-keyframes #{$name} {
    @content;
  }
}

.hidden {
  display: none!important;
}

body {
  background-color: $pink-2 - 40;
  color: $black;
  font-family: arial, sans-serif;
  font-size: 10pt;
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

nav {
  background-color: #f8f8f8;
  display: table;
  height: 100vh;
  width: 30vw;
  @media (max-width: 1024px) {
    width: 50vw;
  }
}

main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
  overflow-y: hidden;
  position: fixed;
  right: 0;
  top: 0;
  width: 70vw;
  @media (max-width: 1024px) {
    width: 50vw;
  }
}

.dino-wrapper {
  width: 60%;
}

.main-menu {
  display: table-cell;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: fixed;
  overflow-y: auto;
  vertical-align: top;
  width: 15vw;
  @media (max-width: 1024px) {
    width: 25vw;
  }
  li {
    background-color: $pink-2;
    border-bottom: 1px solid $pink-2 - 20;
    color: $pink-2 - 40;
    cursor: pointer;
    font-size: 8pt;
    display: block;
    height: 19vh;
    list-type: none;
    min-height: 100px;
    position: relative;
    &.active { 
      background-color: $pink-2 + 10;
    }
    .name {
      bottom: 2.5px;
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
    }
    .current-type {
      bottom: 25px;
      height: calc(100% - 25px);
      left: 0;
      margin: auto;
      position: absolute;
      right: 0;
      width: 100%;
      .menu-wrapper {
        bottom: 0;
        left: 0;
        margin: auto;
        right: 0;
        top: 0;
      }
      @media (only screen and max-width: 768px) {
        @include transform(scale(0.6));
      }
    }
  }
}

.secondary-menu {
  background-color: $pink-2 - 20;
  display: table-cell;
  height: 100vh;
  left: 15vw;
  position: fixed;
  width: 15vw;
  @media (max-width: 1024px) {
    left: 25vw;
    width: 25vw;
  }
  ul {
    height: 100vh;
    margin: 0;
    overflow-y: scroll;
    padding: 0;
    &.mouth {
      li {
        &:first-child {
          div {
            @include transform(scale(1));
          }
        }
        div {
          @include transform(scale(1.25));
        }
      }
    }
    li {
      border-bottom: 1px solid $pink-2 - 40;
      cursor: pointer;
      display: block;
      height: 15vh;
      list-style-type: none;
      min-height: 100px;
      min-width: 100px;
      position: relative;
      &.active {
        background-color: $pink-2 - 30;
      }
      .menu-wrapper {
        bottom: 0;
        left: 0;
        margin: auto;
        right: 0;
        top: 0;
      }
    }
  }
}

.menu-spine, .menu-nose, .menu-eyes, .menu-mouth, .menu-accessories {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.menu-spine {
  width: 50%;
}

.menu-nose, .menu-eyes {
  width: 10%;
}

.menu-mouth, .menu-accessories {
  width: 25%;
}

.menu-accessories.xs {
  width: 15%;
}

.skin-tone {
  height: 100%;
  opacity: 0.5;
  width: 100%;
  &.darker {
    background-color: $dino-darker;
  }
  &.lighter {
    background-color: $dino-lighter;
  }
  &.crazy {
    background-color: $dino-crazy;
  }
  &.regular {
    background-color: $dino;
  }
}

::-webkit-scrollbar {
  display: none; 
}

.btn-wrapper {
  bottom: 5vh;
  position: absolute;
  right: 0;
  width: 70vw;
  z-index: 2;
  @media (max-width: 1023px) {
    width: 50vw;
  }
}

.btn-dino {
  background-color: $pink-2;
  border-radius: 10px;
  color: $pink-2 - 50;
  font-size: 12pt;
  left: 0;
  margin: auto;
  padding: 10px;
  right: 0;
  text-decoration: none;
}

/* illustrations */
path#skin-color {
  &.darker {
    fill: $dino-darker;
  }
  &.lighter {
    fill: $dino-lighter;
  }
  &.crazy {
    fill: $dino-crazy;
  }
  &.regular {
    fill: $dino;
  }
}
            
          
!
            
              var stuff = {
  'accessories': {
    0: {
      element: 'crown',
      template: "<svg class='menu-accessories' viewBox='0 0 33.4 36.1'><path fill='#CB942C' d='M4.5,36.1L0,8.9l11.2,9l1-17.4L20,14.3L23.2,0l10.2,26.1c0,0-4.3,0.3-8,1.1c-2.5,0.5-4.9,2-7.6,2.9c-1.8,0.6-2.7,1-5.6,2.2C9.1,33.6,4.5,36.1,4.5,36.1z'/></svg>"
    },
    1: {
      element: 'indiana-hat',
      template: "<svg class='menu-accessories' viewBox='0 0 110.6 77.1'><g><g><path fill='#553E2B' d='M83.3,36.5c1.4,3,0,6.7-3.2,8.1L29.5,68c-3.2,1.5-6.9,0.2-8.3-2.8L6.7,25.5C5.3,22.5,27,8.4,33.4,5.4c9.7-4.5,25-7.1,26.4-4.1L83.3,36.5z'/></g><path fill='#553E2B' d='M78,29.8c37.4-14.4,35.4-5.2,28.7,3.7c-4.8,6.3-11,11.3-18,14.9c-16.2,8.2-52.6,25.5-76.2,28.3c-31.1,3.8,5.4-21,5.4-21'/><path fill='#3B3027' d='M78,29.8L47.7,44.5c-5.2,2.4-10.5,4.5-15.9,6.4l-13.9,4.8c-1.7-4.1-1.2-4.3-3.2-9.9l12.9-4.9c5.4-2,10.7-4.3,15.9-6.9l28-13.8C74.4,24.3,77.4,28.3,78,29.8z'/></g></svg>"
    },
    2: {
      element: 'engineer-hat',
      template: "<svg class='menu-accessories' viewBox='0 0 94.4 52.2'><g><path fill='#D4B531' d='M0.1,47.6c0,0-0.1-20-0.1-22.4c-0.2-4.7,6.2-11.8,9.5-14.8C15.1,5.2,28.3,0.1,32.3,0c7.2-0.2,22.9,0.8,28.3,4.3C65,7.2,75,24.7,77.2,26.1c2.3,1.5,9.9,2.7,12.3,3.7c2.3,0.9,7.2,3.1,3.6,5.6s-7.9,1.3-12.3,1.8c-4.4,0.5-44.1-1.3-51.1,0.8c-7,2.1-19.2,16.1-24.7,14C-0.5,49.9,0.1,47.6,0.1,47.6z'/><path opacity='0.58' fill='#EED464' enable-background='new' d='M0.1,30c0,0,16.4-16.8,29.4-21.8c13-5,35.8,1.1,35.8,1.1l2.5,3.5c0,0-12.4-2.8-22.7-3.2c-7.3-0.3-13.1,1.5-15.6,2.5c-5.6,2.3-29.3,23-29.3,23L0.1,30z'/></g></svg>" 
    },
    3: {
      element: 'british-hat',
      template: "<svg class='menu-accessories xs' viewBox='0 0 88.1 163'><g><path fill='#938431' d='M34.8,110.2C27.9,158.3,58,160,58,160s0.1,0.7,0,3c0,0.3-3.9-1.4-4.3-1.5C24.2,153,32.4,111,32.4,111'/><path fill='#010101' d='M87.9,94.8c1.7,6.5-16.3,4.7-31.7,9c-16.9,4.6-31.4,14.7-33.2,7.9L0.1,23.8c-0.8-3,1.9-6.6,5.7-10.1C16.7,3.6,31.4-1,46.2,0.2C55.1,0.9,63.9,2.7,65,6.9L87.9,94.8z'/></g></svg>" 
    },
    4: {
      element: 'bday-hat',
      template: "<svg class='menu-accessories xs' viewBox='0 0 39.5 102.1'><g><path fill='#A389B3' d='M8.1,44.5c3.6-1.2,8.5-4,14.2-5.2c5.5-1.2,11.2-0.8,16.3-0.6c1.2,0.1,1,0.1,0.6-1.8		C37.6,29.4,23,8.4,18.6,2.3c-0.8-1.1-0.8-1.4-1.6-2.2c-0.4-0.4-0.4,0.7-0.7,1.9c-1.6,7.5-8.4,33.7-9.7,40.8		C6.4,43.8,7.1,44.9,8.1,44.5z'/><circle fill='#54445B' cx='23.4' cy='20.9' r='2.9'/><circle fill='#54445B' cx='9.8' cy='40.9' r='1.4'/><circle fill='#54445B' cx='18.9' cy='9.7' r='1.3'/>	<circle fill='#54445B' cx='15.2' cy='36.2' r='3.7'/><circle fill='#54445B' cx='35.3' cy='36' r='1.8'/><circle fill='#54445B' cx='23.1' cy='28.3' r='1.3'/><circle fill='#54445B' cx='30.2' cy='24.6' r='2.2'/><circle fill='#54445B' cx='23.2' cy='37.1' r='1.3'/><circle fill='#54445B' cx='16.5' cy='13.7' r='1.1'/>	<path fill='#54445B' d='M11.3,29.3c0,0.8-0.7,1.5-1.5,1.5c-0.2,0-0.5,0.1-0.5-0.1c0.4-1.6,0.6-2.8,0.7-2.8		C10.7,28,11.3,28.6,11.3,29.3z'/><path fill='#54445B' d='M26,13.3c-0.2,1.1-1.1,1.9-2.2,1.9c-1.3,0-2.3-1-2.3-2.3s1-2.3,2.3-2.3c0.1,0,0.3-0.1,0.4,0C25,11.6,26.1,13.2,26,13.3z'/>	<circle fill='#54445B' cx='28.4' cy='32.9' r='2.9'/><circle fill='#54445B' cx='16.2' cy='27.6' r='2.2'/><circle fill='#54445B' cx='14.9' cy='18.9' r='2.3'/><circle fill='#54445B' cx='13.5' cy='23.7' r='1.1'/><circle fill='#54445B' cx='17.5' cy='5.7' r='1.1'/><path fill='#54445B' d='M29.6,18.7C29.6,18.8,29.5,18.8,29.6,18.7c-0.3,0.4-0.6,0.6-1,0.6c-0.6,0-1.1-0.5-1.1-1.1s0.4-1,1-1.1	C28.5,17,29.5,18.6,29.6,18.7z'/><path fill='none' stroke='#A389B3' stroke-width='0.5' stroke-miterlimit='10' d='M7.6,43.4c0,0-23.2,36,12.9,58.5'/></g></svg>" 
    },
    5: {
      element: 'bow-tie',
      template: "<svg class='menu-accessories' viewBox='0 0 48.5 24.7'><g><path fill='#A43635' stroke='#222222' stroke-width='0.5798' stroke-miterlimit='10' d='M47.1,22.7c-1,6.9-22.8-10.5-22.8-10.5S45.4-4.9,47.1,1.8C49.1,10.1,47.9,17.3,47.1,22.7z'/><path fill='#A43635' stroke='#222222' stroke-width='0.5798' stroke-miterlimit='10' d='M1.4,1.9c1-6.9,22.8,10.5,22.8,10.5		S3,29.5,1.4,22.8C-0.6,14.5,0.6,7.3,1.4,1.9z'/><circle fill='#A43635' stroke='#222222' stroke-width='0.616' stroke-miterlimit='10' cx='24.2' cy='12.3' r='5.9'/></g></svg>" 
    },
    6: {
      element: 'bow-tie-2',
      template: "<svg class='menu-accessories' viewBox='0 0 48.5 24.8'><g><path fill='#54445B' stroke='#222221' stroke-width='0.5798' stroke-miterlimit='10' d='M47.1,22.8c-1,6.9-22.8-10.5-22.8-10.5S45.5-4.9,47.1,1.8C49.1,10.2,47.9,17.3,47.1,22.8z'/><path fill='#54445B' stroke='#222221' stroke-width='0.5798' stroke-miterlimit='10' d='M1.4,1.9c1-6.9,22.8,10.5,22.8,10.5	S3,29.6,1.4,22.9C-0.6,14.5,0.6,7.3,1.4,1.9z'/><circle fill='#54445B' stroke='#222221' stroke-width='0.616' stroke-miterlimit='10' cx='24.2' cy='12.3' r='5.9'/></g></svg>" 
    },
    7: {
      element: 'necklace',
      template: "<svg class='menu-accessories' viewBox='0 0 42.7 40.8'><g><line fill='none' stroke='#D3B841' stroke-miterlimit='10' x1='20.3' y1='33.1' x2='0.4' y2='9.5'/><line fill='none' stroke='#D3B740' stroke-miterlimit='10' x1='26.4' y1='28.1' x2='42.3' y2='0.2'/><circle fill='#D3B740' cx='22.1' cy='32' r='8.8'/><polygon fill='#C49C39' points='28.5,30.4 23.3,39 16.3,28.3 20.3,25 25.9,26'/><polygon fill='#B99A31' points='22.6,32.8 17.4,34.4 21.3,28.1 24.7,31.5'/></g></svg>" 
    },
    8: {
      element: 'pebble',
      template: "<svg class='menu-accessories' viewBox='0 0 40.3 22.4'><g><rect x='2.2' y='0' fill='#953030' width='35.9' height='22.4'/><rect x='10.4' y='4' fill='#222222' width='19.6' height='14.5'/><rect x='0' y='3.3' fill='#171617' width='6.3' height='15.8'/><rect x='34' y='3.3' fill='#171617' width='6.3' height='15.8'/></g></svg>" 
    },
    9: {
      element: 'moustache',
      template: "<svg class='menu-accessories' viewBox='0 0 37.5 9.2'><g><path fill='#141414' d='M0,4.5c0,0,10.9,2.1,12.9,0s3.3-5.2,4.9-4.4C19.4,0.9,19,1.9,19,1.9l0.4,4.4c0,0-1.7,2.9-2.5,2.9		S0.1,9.1,0,4.5z'/><path fill='#141414' d='M37.5,4.5c0,0-10.9,2.1-12.9,0s-3.3-5.2-4.9-4.4c-1.6,0.8-1.2,1.8-1.2,1.8l-1.1,4.3c0,0,2.3,2.9,3.1,2.9C21.3,9.1,37.4,9.1,37.5,4.5z'/></g></svg>" 
    },
    10: {
      element: 'glass',
      template: "<svg class='menu-accessories' viewBox='0 0 55.3 47.6'><g><ellipse opacity='0.35' fill='#F8E3CA' enable-background='new' cx='41.5' cy='12.7' rx='13.3' ry='12.2'/>	<ellipse fill='none' stroke='#40311C' stroke-width='0.9568' stroke-miterlimit='10' cx='41.5' cy='12.7' rx='13.3' ry='12.2'/	<path opacity='0.79' fill='none' stroke='#40311C' stroke-width='0.7167' stroke-miterlimit='10' enable-background='new    ' d='M30.7,20.1c0,0-4.8,8.4-10.9,8.4s-10,3.9-10,3.9s-4.2,3.8-3,10.6s-6,3.3-6.5,4'/></g></svg>" 
    },
    11: {
      element: 'deer-thing',
      template: "<svg class='menu-accessories' viewBox='0 0 123.8 104.8'><g><path fill='#52473E' d='M55,84.1c0,0-8.1-8.2-18.9-25.9c-0.4-0.6-1.6-2.8-2-3.4c-0.5-0.8-7.1-4.2-15.4-9c-7.2-4.2-13.5-8.7-14.3-9.4c-0.2-0.1-2.8-2.7-3.9-4.7c-0.9-1.7-0.6-3.1,1.3-1.8c4.5,3.2,8.5,6.3,13.4,9.4c8.4,5.3,17,9.8,16.8,9.2c-2.6-8.1-7.5-28.4-6.4-36.3C26.4,6.5,27,4,27.6,2c0.9-3.1,2.1-2.2,2.3,0c0.4,3.9,0,7.4,0,7.4s-0.1,11.4,2.4,22.4	c2,9.1,5.9,22.3,16.4,36.7c0.9,1.2,4.1-9.4,5.2-12.8c1.5-4.8,1.8-8.5,3-12.8c0.6-2.5,2.8,1.3,2.6,3.1c-0.4,4.3-0.8,6.7-1.9,11.2c-2.1,8.4-5.2,15.2-4.6,15.9c1.6,1.9,4.9,6.5,6.7,8.4C96.3,121.1,55,84.1,55,84.1z'/>	<path fill='#52473E' d='M77.8,87.1c0,0,6.8-8.9,14.8-27.3c0.3-0.6,1.2-2.9,1.5-3.5c0.3-0.8,6.3-4.9,13.6-10.6c6.4-5,11.9-10.1,12.6-10.8c0.1-0.1,2.4-2.9,3.2-5c0.7-1.7,0.1-3-1.5-1.5c-3.9,3.6-7.4,7.1-11.7,10.7c-7.4,6.2-15,11.6-14.9,11c3-16.2,2.1-33.5,1.5-35.6c-1.5-5.3-2.4-7.7-3.2-9.5c-1.3-2.8-2.3-1.8-2.2,0.3c0.1,3.8,1.6,11.9,1.6,11.9s0.9,6.1,0,17c-0.8,9-2.8,22.1-11.1,37.3c-0.7,1.3-5.2-8.5-6.6-11.6c-2.1-4.4-2.9-7.9-4.5-11.9c-0.9-2.3-2.5,1.6-2.1,3.3	c0.9,4.1,1.6,6.3,3.3,10.5c3.1,7.8,6.9,13.9,6.4,14.7c-1.3,2-3.9,6.9-5.4,9C42.9,127.9,77.8,87.1,77.8,87.1z'/></g></svg>" 
    },
    12: {
      element: 'none-accessories',
      template: "" 
    }
  },
  'eyes': {
    0: {
      element: 'eye-evil',
      template: "<svg class='menu-eyes' viewBox='0 0 24.7 26.7'><ellipse id='olho_6_' fill='#FFFFFF' stroke='#020202' stroke-width='0.7643' stroke-miterlimit='10' cx='13.3' cy='12.4' rx='10.2' ry='8.1'/>	<ellipse id='centro_olho_2_' fill='#020202' cx='13.3' cy='12.4' rx='5' ry='4.3'/><g opacity='0.4'><g><path fill='#020202' d='M0.4,18.6c2.4,4.1,6.4,5.4,10.8,6.2c2,0.4,4.2,0.7,6.3,0.2c2.6-0.6,4-2.2,6.1-3.5c2.7-1.7,0.2-6.1-2.5-4.3c-2.6,1.7-4.1,3.5-7.6,3c-3.2-0.4-7-1.1-8.7-4.1C3.1,13.3-1.3,15.8,0.4,18.6L0.4,18.6z'/></g></g></svg>"
    },
    1: {
      element: 'eye-broadway',
      template: "<svg class='menu-eyes' viewBox='0 0 22.4 18.2'><ellipse id='olho_5_' fill='#FFFFFF' stroke='#020202' stroke-width='2' stroke-miterlimit='10' cx='11.2' cy='9.1' rx='10.2' ry='8.1'/><polygon fill='#010101' points='10.5,4.9 14.6,2.7 13.9,7.3 17.2,10.6 12.6,11.2 10.5,15.4 8.5,11.2 3.8,10.6 7.2,7.3 6.4,2.7 '/></svg>"
    },
    2: {
      element: 'eye-happy',
      template: "<svg class='menu-eyes' viewBox='0 0 25.3 26.7'><path fill='none' stroke='#020202' stroke-width='0.7213' stroke-miterlimit='10'd='M1.3,11.2c0,0,6.2,10.9,23.8,0.6'/></svg>"
    },
    3: {
      element: 'eye-clock',
      template: "<svg class='menu-eyes' viewBox='0 0 24.7 26.7'><ellipse id='olho_4_' display='inline' fill='#FFFFFF' stroke='#020202' stroke-width='0.7846' stroke-miterlimit='10' cx='13.5' cy='13' rx='10.2' ry='8.5'/><line display='inline' fill='none' stroke='#010101' stroke-width='0.77' stroke-miterlimit='10' x1='13.5' y1='13' x2='13.5' y2='8'/><line display='inline' fill='none' stroke='#010101' stroke-width='0.77' stroke-miterlimit='10' x1='13.9' y1='13' x2='6.3' y2='13'/></svg>"
    },
    4: {
      element: 'eye-monster',
      template: "<svg class='menu-eyes' viewBox='0 0 24.7 26.7'><path fill='#DFDDDD' stroke='#020202' stroke-width='2' stroke-miterlimit='10' d='M21.8,12.8c0,4.5-8.7,12.5-8.7,12.5s-8-8-8-12.5S13,1.3,13,1.3S21.8,8.4,21.8,12.8z'/><path fill='#020202' d='M18,12.8c0,0-2.2,4.3-5,4.3s-5-4.3-5-4.3s2.2-4.3,5-4.3S18,12.8,18,12.8z'/></svg>"
    },
    5: {
      element: 'eye-regular',
      template: "<svg class='menu-eyes' viewBox='0 0 24.7 26.7'><ellipse id='olho_2_' display='inline' fill='#FFFFFF' stroke='#020202' stroke-width='0.7691' stroke-miterlimit='10' cx='13.6' cy='12.9' rx='10.2' ry='8.1'/><ellipse id='centro_olho_3_' display='inline' fill='#020202' cx='13.6' cy='12.9' rx='5' ry='4.3'/></svg>"
    },
  },
  'mouth': {
    0: {
      element: 'mouth-1',
      template: "<svg class='menu-mouth' viewBox='0 0 56.7 12'><path fill='none' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M0.1,0.3c0,0,23.5,9.3,27.4,9.6s13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1'/></svg>"
    },
    1: {
      element: 'mouth-2',
      template: "<svg class='menu-mouth' viewBox='0 0 56.7 16.2'><g><g><path id='dente1_1_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M3.3,1.6c0,0-0.9,13.4,0.4,13.9S8.1,3.4,8.1,3.4L3.3,1.6z'/><path id='dente2_1_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M8.1,9.9		c0,0,0.7,3.1,1,3.5c0.4,0.6,2.8,1.4,3.5,0.9c0.5-0.3,1.2-1,1.2-1l2-5.6L16,6.3L8.7,3.7L8.1,9.9z'/><path id='dente3_1_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M15.6,12c0,0,0.1,2.8,1.8,3.3c2.4,0.7,3.2,0.7,3.9,0c1.2-1.2,2.3-2.7,2.5-4.4S23.9,9,23.9,9L16,6.3L15.6,12z'/></g><path fill='none' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M0.1,0.3c0,0,1.7,0.7,4.2,1.7	c7,2.7,20.3,7.7,23.2,7.9c3.9,0.3,13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1'/></g></svg>"
    },
    2: {
      element: 'mouth-3',
      template: "<svg class='menu-mouth' viewBox='0 0 56.7 18.1'><g><path fill='none' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M0.1,0.3c0,0,23.5,9.3,27.4,9.6s13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1'/><g><path id='dente1_4_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M4.9,2.4l0.7,3.3c0,0-0.3,7.2,1,7.7c1.3,0.4,6.2-8.3,6.2-8.3L4.9,2.4z'/><path id='dente2_4_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M11.7,12.4c0,0,0.5,3.2,0.9,3.6c0.4,0.6,5.9-5.6,5.9-5.6l1-2.8l-6.7-2.4L11.7,12.4z'/><path id='dente3_4_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M19.6,17.7c2.2-0.4,7.9-7.8,7.9-7.8l-4.3-1.1l-3.4-1.1C19.8,7.7,17.9,18.1,19.6,17.7z'/></g></g></svg>"
    },
    3: {
      element: 'mouth-4',
      template: "<svg class='menu-mouth' viewBox='0 0 56.7 18.9'><g><g><path id='dente1_2_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7213' stroke-miterlimit='10' d='M4.4,2.1l0.9,4.1c0,0-0.8,6.2,0.5,6.8c1.3,0.5,3.7,0.2,3.7,0.2s1.5-0.2,2-1.2c0.5-1.1,1.3-6.7,1.3-6.7L4.4,2.1z'/><path id='dente2_2_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7213' stroke-miterlimit='10' d='M12.1,12.4		c0,0,0.7,3.2,1,3.5c0.5,0.6,2.8,1.4,3.5,0.9c0.5-0.4,1.2-1,1.2-1l2-5.6V7.9l-7-2.7L12.1,12.4z'/><path id='dente3_2_' fill='#FAF3DE' stroke='#020202' stroke-width='0.7213' stroke-miterlimit='10' d='M19.7,14.5c0,0,0.1,2.8,1.8,3.4c2.4,0.8,3.3,0.7,4,0c1.2-1.2,2.3-2.7,2.5-4.5s0.1-3.4,0.1-3.4l-4.2-0.9l-3.7-1.2L19.7,14.5z'/></g><path fill='none' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M0.1,0.3c0,0,23.5,9.3,27.4,9.6s13.9,2,14.3,1.7c0.5-0.3,14.9-0.1,14.9-0.1'/></g></svg>"
    },
    4: {
      element: 'mouth-5',
      template: "<svg class='menu-mouth' viewBox='0 0 65.7 6.3'><path id='mouth_5' fill='none' stroke='#020202' stroke-width='0.7167' stroke-miterlimit='10' d='M0.1,6c0,0,32.5-5.9,36.4-5.6s13.9,2,14.3,1.7C51.3,1.8,65.7,2,65.7,2'/></svg>"
    },
  },
  'nose': {
    0: {
      element: 'nose-1',
      template: "<svg class='menu-nose' viewBox='0 0 14.6 10.9'><path fill='#020202' stroke='#020202' stroke-width='0.7108' stroke-miterlimit='10' d='M11.3,8.8c0,0.6-0.5,1-1,1l0,0c-0.6,0-1-0.5-1-1V3.6c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1V8.8z'/><path id='narina_2_' fill='#020202' stroke='#020202' stroke-width='0.7108' stroke-miterlimit='10' d='M5,8.8c0,0.6-0.5,1-1,1l0,0c-0.6,0-1-0.5-1-1V3.6c0-0.6,0.5-1,1-1l0,0c0.6,0,1,0.5,1,1V8.8z'/></svg>"
    },
    1: {
      element: 'nose-2',
      template: "<svg class='menu-nose' viewBox='0 0 12.8 9.1'><path fill='#020202' d='M6.4,0C3.2,0,0.5,6,0,8.7c-0.1,0.6,12.9,0.6,12.8,0C12.3,6.1,9.6,0,6.4,0z M5.5,7.1C4.9,8,3.8,7.9,3.4,6.9C3.3,6.7,3.3,6.6,3.3,6.5V5.1c0-0.2,0.1-0.4,0.2-0.6c0.5-0.8,1.4-0.8,1.9,0c0.1,0.2,0.2,0.3,0.2,0.4v1.7h0.1	C5.7,6.7,5.6,6.9,5.5,7.1z M10,6.6c0,0.1-0.1,0.3-0.2,0.5C9.2,8,8.1,8,7.7,6.9c0-0.2,0-0.3,0-0.4V5.1c0-0.2,0.1-0.4,0.2-0.6c0.5-0.8,1.4-0.8,1.9,0C9.9,4.7,10,4.8,10,4.9V6.6z'/></svg>"
    },
    2: {
      element: 'nose-3',
      template: "<svg class='menu-nose' viewBox='0 0 14.8 13.2'><ellipse fill='#A22928' cx='7.4' cy='7.1' rx='7.4' ry='6.1'/></svg>"
    },
    3: {
      element: 'nose-4',
      template: "<svg class='menu-nose' viewBox='0 0 14.6 12.9'><path fill='#020202' stroke='#020202' stroke-width='1.777' stroke-miterlimit='10' d='M7.3,12c-3.2,0-5.9-6.1-6.4-8.7c-0.1-0.6,12.9-0.6,12.8,0C13.2,6,10.5,12,7.3,12z'/></svg>"
    },
  },
  'spine': {
    0: {
      element: 'spine-1',
      template: "<svg class='menu-spine' viewBox='0 0 536.1 356.5'><path fill='#D8BB36' stroke='#020202' stroke-width='0.7213' stroke-miterlimit='10' d='M535.8,13.3c0,0,0-3.3-1.4-4.7c-1.3-1.4-3-4-7.5-4.7c-2.5-0.4-3.9,0.7-4.7,1.8c-0.6,0.8-2.2,2.4-2.2,2.4s-1.7-2.6-3.9-5.4c-0.8-1-3.6-1.9-4.7-2.2c-0.5-0.1-1.5-0.1-2.3-0.1s-2.9,0.9-2.9,0.9s-2.7,2.4-3.4,3.2c-1.1,1.3-1.3,2.3-1.7,2.4c-0.5,0-2.6-2.6-5.5-3.3s-6-0.7-6-0.7s-3.7,0.6-5.3,2.1c-1.6,1.4-3.3,8.4-3.3,8.4s-1-0.7-1.9-1.3c-0.5-0.3-3-1.2-4.4-1.4c-1.7-0.2-3.3,0.1-3.3,0.1s-1.9,0.3-5.9,2.7s-3.9,5.4-3.9,5.4l0.1,4.7l0.7,4.2c0,0-5.2,0.8-5.8,1.4c-0.6,0.5-2.1,1-2.9,2.2c-1.3,1.8-2.3,4.1-2.3,4.1l-0.8,3V42l1.3,2.6l2.2,2.7l1,1.3l-2.7,0.8c0,0-6.4,5.4-6.6,10.3s0,4.2,0,4.2s0.6,3.8,1.2,4.5c0.5,0.7,5.6,7,5.6,7l-4.3,4.4c0,0-2.9,4.8-2.5,8.7c0.4,4,0.9,5.5,0.9,5.5l2.1,2.8l2.7,3.2l1,0.9l-3.8,3.8c0,0-3.5,6.5-3.3,9.6c0.1,1.9,1,4.3,1.8,5.9c0.5,1,1.7,2.4,1.7,2.4l3.8,3.3l-0.9,1.3l-2.3,3c0,0-1.8,3.1-2.3,4.7c-0.4,1.2-0.7,2.5-0.8,3.3c-0.2,2,0.9,5.5,0.9,5.5s1,1.9,2.1,3.7c1.1,1.8,3.4,4.6,3.4,4.6s-4.7,2.6-5,3s-4.1,3-5,5.7s-1.4,6.6-1.4,6.6v1.4c0,0,0.2,2.3,0.7,3.6c0.5,1.4,2.2,4.7,2.2,4.7s-2.5,0-5,0.1c-2.2,0.1-4.1,0.4-4.6,0.7c-0.5,0.3-2.6,1.2-4.5,2.5c-2,1.5-4.2,3.3-5,5.1c-1.6,3.4-2,8.1-2,8.1s-1.2-0.9-2.5-1.8c-0.5-0.4-1.1-0.8-1.6-1.1c-0.9-0.6-3.3-1.4-4.6-1.7c-2.5-0.6-6.3-1.3-9.1-0.2c-4.2,1.6-6.5,4.3-6.5,4.3l-2.4,2.5c0,0-0.6-1.8-2.9-4.6c-1.2-1.4-3.2-2.9-4.8-4c-1.5-1-3.9-1.9-5.4-2.1c-2.2-0.3-5.4-0.4-7.4,0.2c-3.5,1.1-7.1,5.5-7.1,5.5s-1.5-1.8-3-3.4c-1.2-1.4-3.8-3.8-5.2-4.4c-1.8-0.9-4.4-1.8-7.2-1.9c-2.6,0-5.2,0.7-7,1.3c-1.7,0.6-4,2.7-4,2.7l-3.1,2.8c0,0-1.7-2.6-3.5-4.4c-0.7-0.7-4-2.2-5.3-2.7c-1.2-0.4-2.5-0.9-3.5-1.2c-0.9-0.3-3.5-0.2-4.9,0.1c-1.5,0.3-3.3,0.9-5.1,1.8c-3.6,1.8-5.7,5.7-5.7,5.7s-3.7-3.3-5.1-4.8s-6.2-3-9.3-2.8c-3.1,0.2-5,0.2-9.1,2.7s-5.2,4.8-5.2,4.8s-2.6-4.3-7.8-6.6c-1.4-0.6-2.6-1-3.5-1.2c-2.7-0.6-5.5-0.1-7.9,0.9c-1.1,0.4-2.3,1.1-3.6,2.1c-4.1,3.2-4.8,5.4-4.8,5.4s-1.8-5-8.7-6.3c-1.1-0.2-1.9-0.4-2.6-0.5c-3.7-0.7-6.7,0.7-7.6,1.1s-1.8,0.9-2.6,1.5c-3.3,2.6-5.5,5.8-5.5,5.8s-2.2-1.9-4-3.3c-0.8-0.6-4.3-2-6.2-2.5c-1.4-0.4-2.9-0.6-4.3-0.6c-3.4,0.1-8.2,2.6-8.2,2.6s-3.7,3.2-4.7,4.6s-0.5,1.3-0.5,1.3s-4.4-4.9-11.2-4.8s-10.6,4.3-10.6,4.3s-2.2,2.8-3.1,4.4c-0.9,1.6-1.6,4.6-1.6,4.6s-6.4-2.8-9.3-2.6c-2.9,0.2-5,1.3-5.5,1.5c-0.4,0.2-3.4,2-5.3,3.7c-0.8,0.7-2.5,3.6-2.8,4.3c-0.4,0.7-0.7,1.4-0.8,1.9c-0.3,1-0.4,2.3-0.4,2.3s-2.3-1.4-4.2-2.4c-1-0.5-4-0.8-5.7-0.7c-1.3,0.1-2.7,0.3-4,0.6c-1.3,0.3-5.2,3-6.2,3.9c-1.8,1.6-3.4,3.4-3.9,5.4c-0.8,3-1,5.5-1,5.5l-0.3,1.2c0,0-6.1-1.9-8-1.6s-7.3,0.9-10.5,4.2c-1.3,1.3-2.2,2.6-2.9,3.8c-1.1,1.9-1.2,6.7-1.2,6.7v4.4c0,0-1.8-0.6-3.3-0.9c-0.7-0.2-3.2,0-4.5,0.3c-2.3,0.6-5.4,1.6-6.3,2.5c-0.7,0.7-2,2-3,3.2c-1.1,1.2-2.8,4.7-2.8,4.7l-0.9,2.9c0,0-0.1,2.9,0.5,4.4c0.5,1.5,1,2.9,1,2.9l0.2,1.4l-1.3,0.2c0,0-5.8-0.5-9.4,2.3s-4.3,4.3-4.3,4.3s-2.4,4.9-2.4,6.3c0,0.7,0.2,2.5,0.3,4c0.2,1.6,1.5,5,1.5,5l-3.7,0.1c0,0-2.7,0.8-4.9,1.7c-1.1,0.5-4.2,3.4-5.2,4.6c-0.9,1.1-2.1,3.5-2.3,4.3c-0.4,1.3-0.9,3.1-0.7,5.2c0.1,0.7,0.1,1.3,0.2,1.8c0.2,2.1,1.1,4.1,1.1,4.1l0.9,1.5l-4,1.1c0,0-4.4,0.9-8.2,5.8c-1.8,2.4-2.7,4.4-3,5.8c-0.4,1.5-0.7,2.6-0.4,4.4c0.2,1.4,2.8,5.9,2.8,5.9s-7.3-2.2-10.7,0.1c-3.3,2.3-5.1,2.9-6.3,5.2s-1.3,4-1.3,4s-0.2,4.5-0.2,5.1s-2.7-2.3-7.1-2.2s-7.4,2.2-7.4,2.2l-1.7,1.6l-3.2,4.4l-1.3,2.7v1.4l7.6-3.5l5.4-1.9l7.4-4.1l11.4-7.3l7.1-7.2l12.2-22.2l14.9-24.1l15.8-22.3l8.1-7.7l11-13.3l21.8-16.8L142,215l12.1-5.2l5.5-2.3l10.9-5l10.9-5.3c0,0,3.6-1.6,7.8-2.9c5.6-1.6,12.5-3.5,14.4-3.4c3.2,0.2,21.3-1,21.3-1l55.8-2.2h52.4c0,0,36.2,2.5,43.6,4.9c7.4,2.3,37.2,5.8,37.2,5.8l3.2-0.2c0,0,2.3-1.3,3.8-1.9c1.1-0.5,0.9-0.4,2.1-1.1c2.1-1.2,4.4-2.7,5.2-3.2c1-0.6,3-2,4.8-3.2c2.1-1.4,3.6-2.8,3.8-2.9c0.2-0.1,2-1.6,3.6-3.4c1.8-2.1,3.4-4.4,3.4-4.4s3.3-3.5,5.7-7.8c2.1-3.6,3.4-7.9,3.4-9.6c0-3.8,0-36.3,0-36.3V62.3c0,0,1.2-6.1,1.7-8.3c0.5-2.1,7-23.7,7-23.7s8.8-12.9,17-15.5s17.6-6.6,17.6-6.6l11.7-0.7l13.7,1.1l9,2.4L535.8,13.3z'/></svg>"
     },
    1: {
      element: 'spine-2',
      template: "<svg class='menu-spine' viewBox='0 0 532.8 352.3'><path fill='#D7BA37' stroke='#010101' stroke-width='0.7167' stroke-miterlimit='10' d='M532.4,11.2c0,0,0-3.3-1.4-4.7S519.8,2.5,519,3.6c-0.6,0.8-2.2,2.4-2.2,2.4s-1.7-2.6-3.9-5.4c-0.8-1-12.5,1-13.2,1.8c-1.1,1.3-1.3,2.3-1.6,2.3c-0.5,0-2.6-2.6-5.4-3.3c-2.9-0.7-14.5,9.6-14.5,9.6s-1-0.7-1.9-1.3c-0.5-0.3-2.9-1.2-4.3-1.4c-1.7-0.2-13,8.1-13,8.1l0.1,4.7l0.7,4.1c0,0-5.1,0.8-5.8,1.4c-0.6,0.5-4.7,15.4-4.7,15.4l2.2,2.7l1,1.3l-2.7,0.8c0,0-5.9,18.2-5.4,18.9c0.5,0.7,5.5,7,5.5,7l-4.3,4.4L444,91.4l4.7,5.9l1,0.9c0,0-7.2,10.2-7,13.4c0.1,1.9,7.2,11.5,7.2,11.5l-0.9,1.3c0,0-5.2,10.1-5.3,10.9c-0.2,2,6.4,13.8,6.4,13.8s-9,5.9-9.9,8.6c-0.9,2.7,1.5,16.1,1.5,16.1s-12.2,2-14.1,3.4c-2,1.4-7,13.1-7,13.1s-7.4-4.2-8.7-4.5c-2.5-0.6-17.8,6.6-17.8,6.6s-4.3-3.9-8-7c-2.4-2-9.8-3.1-10.4-3.2c-2.2-0.3-9.2,5.2-9.2,5.2s-1.5-1.8-3-3.4c-1.2-1.4-0.3-4.4-0.6-4.5c-1.7-0.7-9.4-1.7-11.7-1.7c-0.8,0-6.8-0.7-7.5-0.6c-1.8,0.2-3.5,4.6-3.5,4.6l-3.1,2.8c0,0-3.8-7.2-5.1-7.7c-1.2-0.4-6.1-0.2-7.1-0.5c-0.9-0.3-13.1-0.3-13.1-0.3l-2.5,7.9l-5.1-4.7l-18.6-1.8l-4.9,6.5l-7.8-6.5l-14.9,1.9l-4.7,5.4l-3.4-7.9l-17.8,3.7l-5.5,5.7c0,0-4.1-6.6-6-7.1c-1.3-0.4-6.9,0.7-8.4,0.7c-3.4,0.1-11.4,1.8-11.4,1.8s-0.4,4-1.4,5.4c-1,1.4-0.5,1.3-0.5,1.3l-7.8-7.2l-6.6,0.4l-11.6,8l-0.2,7.2l-9.2-2.6l-13.9,4.9l-0.9,8.7l-7.9-6.7l-12.1,8.1l-4.8,10.8l-0.3,1.2c0,0-6-5.5-7.9-5.2c-1.9,0.3-17.1,11.4-17.1,11.4l2.5,6.8v4.4l-7.7-0.6l-6.3,2.5L80.4,251l1.4,7.3l0.2,1.4l-1.3,0.2l-8.4-2.1c0,0-7.6,13.4-7.6,14.9c0,0.7,1.8,9,1.8,9l-8.9-1.7l-8.8,17.5l2.2,5.9l0.9,1.5l-3.9,1.1l-6.7,1.3l-4.9,14.5l2.8,5.9l-8.5-2.8l-8.4,8.1c0,0-1.5,8.4-1.5,9c0,0.6-7.4-5.8-7.4-5.8L1.7,347.8l-1.3,2.6v1.4l7.5-3.5l5.3-1.9l7.4-4l11.4-7.2l7.1-7.1l12.2-22L66,282l15.7-22.1l8.1-7.7l10.9-13.2l21.7-16.7l18.8-10.6l12-5.2l5.5-2.3l10.8-5l10.8-5.3c0,0,3.6-1.6,7.8-2.9c5.6-1.6,12.4-3.5,14.3-3.4c3.2,0.2,21.1-1,21.1-1l55.5-2.2l52.1,0c0,0,36,2.5,43.3,4.8s36.9,5.7,36.9,5.7l3.2-0.2c0,0,2.2-1.3,3.8-1.9c1.1-0.5,0.9-0.4,2.1-1.1c2.1-1.2,4.3-2.7,5.2-3.2c1-0.6,2.9-2,4.8-3.2c2.1-1.4,3.6-2.8,3.8-2.9c0.2-0.1,2-1.6,3.5-3.4c1.8-2,3.4-4.4,3.4-4.4s3.2-3.5,5.6-7.7c2.1-3.6,3.3-7.8,3.3-9.6c0-3.8,0-36.1,0-36.1V59.6c0,0,1.2-6.1,1.7-8.2c0.5-2.1,6.9-23.5,6.9-23.5s8.7-12.8,16.9-15.4S493,5.9,493,5.9l11.7-0.7l13.6,1.1l9,2.4L532.4,11.2z'/></svg>"
    },
    2: {
      element: 'spine-3',
      template: "<svg class='menu-spine' viewBox='0 0 540.3 357.6'><path fill='#D7BA37' stroke='#010101' stroke-width='0.7167' stroke-miterlimit='10' d='M537.8,18.6c0,0,3.1-9.5,1.8-10.9s-6.5-6.6-10.9-7.3c-2.5-0.4-7.1,7-7.8,8c-0.6,0.8-2.2,2.4-2.2,2.4s-1.7-2.6-3.9-5.4c-0.8-1-3.6-1.9-4.7-2.2c-0.5-0.1-1.4-0.1-2.2-0.1c-0.8,0-2.9,0.9-2.9,0.9s-2.7,2.3-3.4,3.1c-1.1,1.3-1.6,2.3-1.6,2.3c-0.5,0-2.6-2.6-5.4-3.3c-2.9-0.7-5.9-0.7-5.9-0.7s-3.7,0.6-5.3,2.1s-0.4,7.8-0.4,7.8s-7.2-5.3-8.6-6.6c-1.2-1.1-5.2-1.5-5.2-1.5s-2.9,0.4-6.8,2.8s-2.2,12.4-2.2,12.4l1.5,7.8c0,0-5.1,0.8-5.8,1.4c-0.6,0.5-2.1,1-2.9,2.2c-1.3,1.8-2.3,4.1-2.3,4.1l-0.8,3v3.5l1.3,2.6l2.2,2.7l1,1.3l-2.7,0.8c0,0-6.4,5.4-6.5,10.2c-0.2,4.8,0,4.2,0,4.2s0.6,3.8,1.2,4.5c0.5,0.7,5.5,7,5.5,7l-2.1,1.3c-7.8,5-7,4.6-8.1,5.3c-2.8,1.8-4.6,2.3-6,9.5c-1.9,9.5,7.8,14.6,7.8,14.6l8.6,2.4c0,0-6.4,2.5-6.5,6c-0.1,2.3,0.2,3.8,0.9,5.4c0.5,1,1.7,2.4,1.7,2.4l3.8,3.3c0,0-38.5,12.4-18.8,39.4c1.7,2.3,10.6,11.3,10.6,11.3s-2.5,0-5,0.1c-2.2,0.1-4.1,0.4-4.6,0.7c-0.5,0.3-2.6,1.2-4.5,2.5c-2,1.4-4.2,3.3-5,5c-1.6,3.4-2,8.1-2,8.1s-0.6-0.5-1.9-1.4c-0.5-0.4-1.7-1.2-2.2-1.5c-3.8-2.2-6.9-1.4-8.2-0.9c-5.6,2.4-8,7.1-8,7.1s0.1-3.7-1-7.1c-1.2-3.6-8.2-6.5-10-7.2c-6.5-2.6-11.1-1.6-12.6-1.2c-6,1.2-10.1,9.4-10.1,9.4s2.1-9.7-0.2-14.8c-0.8-1.8-7.6-1.6-10.3-1c-9.3,2.1-11.9,13.9-11.9,13.9s-1.4-4.2-2.6-6.4c-1.7-3-6.2-3.9-13.2-2.2c-5.8,1.5-7.2,7.6-7.2,7.6s2.7-8.1-5.3-8.2c-4-0.1-6.5,7.7-6.5,7.7c2.1-1.4-3.4-6.4-11.4-15.7c-9.8-11.4-24.7-13.4-37.8-3.5c-7.5,5.7-6.8,19.8-6.8,19.8s-1.8-4.9-8.6-6.3c-1.1-0.2-1.9-0.4-2.6-0.5c-3.7-0.7-6.6,0.7-7.5,1.1c-0.9,0.4-1.7,0.9-2.6,1.5c-3.3,2.6-5.5,5.7-5.5,5.7s2.5-9,0.2-12.4c-2.7-4.1-17.5-4.8-21.1-2.1c-6.3,4.8-5.3,13.9-6.3,15.3s-0.5,1.3-0.5,1.3s0.5-11-6.2-10.9c-6.7,0.1-15.5,10.4-15.5,10.4s-2.2,2.7-3.1,4.4c-0.9,1.6-1.6,4.6-1.6,4.6s-2-3.1-4.9-2.9s-11.9,3.7-12.8,6.1c-1,2.5,1.8,4.4,1.8,4.4s-5.8-7.4-12.8-8.9c-11.6-2.5-22.2,4.8-23.7,13.7c-1.3,7.5,3.3,12,3.3,12s-4.2-3.3-6.1-3s-5.4,0-10.2,3.9	c-1.4,1.1-2.8,3.9-2.7,5.3c0.2,2.9,1.9,5.9,1.9,5.9s-6.9-4.3-12-3.3C78,238,77.7,250.7,80.2,257.7c0.7,1.9,3.1,5.7,3.1,5.7s-6.4,0.7-10,3.4s-4.3,4.3-4.3,4.3s-2.4,4.8-2.4,6.3c0,0.7,0.2,2.4,0.3,4s1.5,5,1.5,5l-3.7,0.1c0,0-2.7,0.8-4.9,1.7c-1.1,0.5-4.2,3.3-5.2,4.5c-0.8,1-2.1,3.5-2.3,4.3c-0.4,1.3-0.9,3.1-0.7,5.2c0.1,0.7,0.1,1.3,0.2,1.8c0.2,2.1,1.1,4.1,1.1,4.1	l0.9,1.5l-3.5-1.9c0,0-3.3-0.4-9.2,1.2c-4.1,1.1-8.5,11.2-8.1,12.6c2.6,9.7,8.2,10.8,8.2,10.8s-5.8-3.7-9.1-1.4c-3.3,2.2-4.7,3-5.9,5.4c-1.2,2.3-0.9,5-0.9,5s0.6,2.8,0.6,3.4c0,0.6-5.7-3.2-10.1-3.1s-6.1-0.2-12.1,4.5c-4.6,3.6-3.1,11.2-3.1,11.2l1.7-0.6l7.5-3.5l5.3-1.9l7.4-4l11.4-7.2l7.1-7.1l12.2-22L68,286.8l15.7-22.1l8.1-7.7l10.9-13.2l21.7-16.7l18.8-10.6l12-5.2l5.5-2.3l10.8-5l10.8-5.3c0,0,3.6-1.6,7.8-2.9c5.6-1.6,12.4-3.5,14.3-3.4c3.2,0.2,21.1-1,21.1-1l55.5-2.2l52.1,0c0,0,36,2.5,43.3,4.8c7.4,2.3,36.9,5.7,36.9,5.7l3.2-0.2c0,0,2.2-1.3,3.8-1.9c1.1-0.5,0.9-0.4,2.1-1.1c2.1-1.2,4.3-2.7,5.2-3.2c1-0.6,2.9-2,4.8-3.2c2.1-1.4,3.6-2.8,3.8-2.9c0.2-0.1,2-1.6,3.5-3.4c1.8-2,3.4-4.4,3.4-4.4s3.2-3.5,5.6-7.7c2.1-3.6,3.3-7.8,3.3-9.6c0-3.8,0-36.1,0-36.1V64.4c0,0,1.2-6.1,1.7-8.2c0.5-2.1,6.9-23.5,6.9-23.5s8.7-12.8,16.9-15.4c8.1-2.6,17.5-6.5,17.5-6.5l11.7-0.7l13.6,1.1l9,2.4L537.8,18.6z'/></svg>"
    },
  },
  'skin': {
    0: {
      element: 'lighter',
      template: "<div class='skin-tone lighter'></div>"
    },
    1: {
      element: 'regular',
      template: "<div class='skin-tone regular'></div>"
    },
    2: {
      element: 'darker',
      template: "<div class='skin-tone darker'></div>"
    },
    3: {
      element: 'crazy',
      template: "<div class='skin-tone crazy'></div>"
    },
  }
}
, current = 'accessories';

var createSecondaryMenu = function createSecondaryStuff(id) {
  var i = 0;
  
  $('.secondary-menu ul').removeClass(current).addClass(id);
  current = id;
  
  $('.secondary-menu ul').empty();
  
  for(i = 0; i < Object.keys(stuff[id]).length; i++) {
    $('.secondary-menu ul').append('<li>' + stuff[id][i].template + '</li>');
  }
  
};

var putOnDino = function putOnDino(num) {
  var type;
  
  // get the type of element that will change
  type = $('.secondary-menu ul')[0].className;
  
  // change the fill of the skin element
  if (type === 'skin')
    $('path#skin-color').removeClass('crazy lighter darker regular').addClass(stuff[type][num].element);
  else {
    // hide the other elements from that type
    $('.' + type + '-item').addClass('hidden');
    console.log(stuff[type][num].element);
    // show svg element
    $('#' + stuff[type][num].element).removeClass('hidden');
  }
};

var changeMainMenu = function changeMainMenu(num) {
  var type = $('.main-menu li.active').attr('id');
  $('.main-menu li.active .current-type').empty().append(stuff[type][num].template);
};

$(function() {
  $('.main-menu li').on('click', function() {
    $('.main-menu li').removeClass('active');
    $(this).addClass('active');
    createSecondaryMenu($(this).attr('id'));
  });
  
  $('.secondary-menu ul').on('click', 'li', function() {
    $('.secondary-menu li').removeClass('active');
    $(this).addClass('active');
    putOnDino($('li').index(this) - 6);
    changeMainMenu($('li').index(this) - 6);
  });
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console