Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="mole-skew-sample" id="js-mole-sample">
  <div class="mole-scene" id="js-mole-scene">
    <div class="cube-wrapper" id="js-cube-scene">
      <div class="cube-shadow-wrapper" id="js-shadow-wrapper">
        <div class="cube-shadow" id="js-shadow"></div>
      </div>
    </div>

    <div class="mole mole-scene__mole" id="js-mole">
      <div class="mole__inner" id="js-mole-inner">
        <div class="mole__hat" id="js-mole-hat">
          <div class="mole__hat-base">
            <div class="mole__hat-shadow" id="js-mole-hat-shadow"></div>
          </div>

          <div class="mole__hat-cone-wrapper">
            <div class="mole__hat-cone-rotator" id="js-mole-hat-cone">
              <div class="mole__hat-cone">
              </div>
            </div>
          </div>
        </div>

        <div class="mole__head">
          <div class="mole-mouth">
            <div class="mole-mouth__inner" id="js-mole-tongue"></div>
          </div>

          <div class="mole__mouth-wrapper" id="js-mole-mouth">
            <div class="mole__mouth" id="js-mole-mouth-outer">
              <div class="mole__mouth-inner" id="js-mole-mouth-inner"></div>
            </div>
          </div>
        </div>

        <div class="mole__eye" id="js-mole-eye">
          <svg width="13px" height="6px" viewBox="0 0 13 6">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none">
              <path d="M0,0 Q 6.5 10, 13 0" id="js-mole-eye-lash" stroke="#4C4040" stroke-width="2" />
            </g>
          </svg>
        </div>

        <div class="mole__glasses" id="js-mole-glasses"></div>

        <div class="mole__glasses-left" id="js-mole-glasses-left"></div>

        <div class="mole__body" id="js-mole-body"></div>

        <div class="mole__hand" id="js-mole-hand">
          <div class="mole__hand-circle" id="js-mole-hand-circle"></div>
        </div>

        <div class="mole__hand-left" id="js-mole-hand-left"></div>
      </div>
    </div>

    <div class="mole-scene__door">
      <div class="door-shadow">
        <div class="door-shadow__el" id="js-door-shadow"></div>
      </div>

      <div class="mole-scene__door-rotation" id="js-door">
        <div class="shape cuboid-1 cub-1 door">
          <div class="face ft">
          </div>

          <div class="face bk">
          </div>

          <div class="face rt">
          </div>

          <div class="face lt">
          </div>

          <div class="face bm">
          </div>

          <div class="face tp">
            <div class="door-handle">
              <div class="door-handle__shadow">
                <div class="door-handle__shadow-inner" id="js-door-handle-shadow"></div>
              </div>

              <div class="door-handle__part door-handle__part--bottom">
              </div>

              <div class="door-handle__part door-handle__part--top">
              </div>
            </div>
          </div>

          <div class="cr cr-0">
            <div class="face side s0">
            </div>

            <div class="face side s1">
            </div>

            <div class="face side s2">
            </div>
          </div>

          <div class="cr cr-1">
            <div class="face side s0">
            </div>

            <div class="face side s1">
            </div>

            <div class="face side s2">
            </div>
          </div>

          <div class="cr cr-3">
            <div class="face side s0">
            </div>

            <div class="face side s1">
            </div>

            <div class="face side s2">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mole-scene__ground">
    </div>

    <div class="mole-scene__door-wave-wrapper">
      <div class="mole-scene__door-wave" id="js-door-wave"></div>
    </div>
    <div class="mole-scene__mask">
    </div>
  </div>
</div>
              
            
!

CSS

              
                body,
html {
  padding: 0;
}

body {
  background: #50E3C2;
}

.mole {
  width: 12.75rem;
  height: 17.125rem;
}

.mole__head {
  width: 10.75rem;
  height: 7.25rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE3MnB4IiBoZWlnaHQ9IjExNnB4IiB2aWV3Qm94PSIwIDAgMTcyIDExNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMy4yICgxMjA0MykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+VW50aXRsZWQgNyBDb3B5PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9ImhlYWQtKy1ub3NlLWNvcHkiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiPgogICAgICAgICAgICA8cGF0aCBkPSJNMC44MDQ5OTkzMDQsOTMuODc3MTM2NSBDMC44MDQ5OTkzMDQsOTMuODc3MTM2NSAxNC45NjM5NzU4LC0xOS42NTU4MTU5IDEwNS40MTE0NDUsMy4zNDQ5MDk5IEMxMTguOTQ4NTU0LDcuMTAyNzIyNDEgMTQwLjA5Nzk2OCwxNy42Mzg4NTQ3IDE2My42ODQ4ODIsMjAuNDUxMzU1NyBDMTY2LjkwNzUzOCwyNC45NTUyNjIgMTYxLjgwMjA3LDM1LjY1MjUyNzEgMTYxLjgwMjA3LDM1LjY1MjUyNzEgQzE2MS44MDIwNywzNS42NTI1MjcxIDE1My4zMTg2NzEsNjEuNTY1NjEzNSAxNDMuMzY1NTQ2LDc4LjkyMzAzNDkgQzExNS44Mzg4NjYsMTI1Ljg2MzI4MiA0LjA4MDA3ODA1LDEyNC44NTU0NjUgMC44MDQ5OTkzMDQsOTMuODc3MTM2NSBaIiBpZD0iaGVhZCIgZmlsbD0iIzRDNDA0MCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMTY2LjQyODEzLDI4LjQwMTIwNjQgQzE2NC45Njk4MDQsMjkuMTc0MTcwMiAxNjIuODIzNzAxLDI4Ljg3MTg3MDkgMTYxLjYzMzEzOCwyNy43MjQ1MjA1IEwxNTkuMjk0NDM0LDI1LjQ3MDcwMzEgQzE1OS4yOTQ0MzQsMjUuNDcwNzAzMSAxNTYuNzMxOTM0LDI3LjE4MjYxNzIgMTU0LjY5Mjg3MSwyNC40Mzk0NTMxIEMxNTcuOTgxOTM0LDEyLjU3MzI0MjIgMTcxLjMwNzEyOSwxOS4xMzY3MTg3IDE3MS4zMDcxMjksMjIuMDA3ODEyNSBDMTcxLjMwNzEyOSwyNi42NTkxNzk3IDE2Ni40MjgxMywyOC40MDEyMDY0IDE2Ni40MjgxMywyOC40MDEyMDY0IFoiIGlkPSJub3NlIiBmaWxsPSIjQzk1NDRBIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
  position: absolute;
  top: 1.25rem;
  left: 0.25rem;
  z-index: 1;
}

.mole__glasses {
  width: 7.375rem;
  height: 3.4375rem;
  position: absolute;
  top: 1.4375rem;
  left: 1.625rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjExOHB4IiBoZWlnaHQ9IjU1cHgiIHZpZXdCb3g9IjAgMCAxMTggNTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjMuMiAoMTIwNDMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPmdsYXNzZXM8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8ZyBpZD0iZ2xhc3MtcmlnaHQtY29weSIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS45Nzk4MDQsIDIuNTAwMDAwKSIgc3Ryb2tlPSIjRjM1RDVDIiBzdHJva2Utd2lkdGg9IjMiPgogICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTMiIGZpbGwtb3BhY2l0eT0iMC4yNSIgZmlsbD0iI0ZGRkZGRiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgY3g9IjYyIiBjeT0iMjkiIHI9IjIyIj48L2NpcmNsZT4KICAgICAgICAgICAgPHBhdGggZD0iTTAuODUxNTYyNSwyMS4zOTA2MjUgTDYuMjU0NDE0MTksMTMuMTQzNyBDNy4xNjE4NTE4MywxMS43NTg1ODUyIDkuMTM1ODQ3NDQsMTEuMTMzNTcyIDEwLjY4OTI3MSwxMS43NTgwNzE4IEwzOS45ODkyNTc4LDIzLjUzNzEwOTQiIGlkPSJQYXRoLTYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICAgICAgPHBhdGggZD0iTTc3Ljg4MjgxMjUsMTIuNjY5NzY2MyBDOTIuMzQzNzUsLTkuNzkyOTY4MzMgMTE1LjExMTMyOCw0LjcwODk4NDQgMTE1LjExMTMyOCw0LjcwODk4NDQiIGlkPSJQYXRoLTciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
  z-index: 3;
}

.mole__glasses-left {
  width: 1.0625rem;
  height: 1.6875rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE3cHgiIGhlaWdodD0iMjdweCIgdmlld0JveD0iMCAwIDE3IDI3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5nbGFzc2VzIGNvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0zLUNvcHktMiIgc3Ryb2tlPSIjRjM1RDVDIiBzdHJva2Utd2lkdGg9IjMiIGZpbGwtb3BhY2l0eT0iMC4yNSIgZmlsbD0iI0ZGRkZGRiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoOC4xMzY1MjMsIDE0LjAwMDAwMCkgcm90YXRlKC05Mi4wMDAwMDApIHRyYW5zbGF0ZSgtOC4xMzY1MjMsIC0xNC4wMDAwMDApICIgY3g9IjguMTM2NTIzNDgiIGN5PSIxNCIgcng9IjExIiByeT0iNiI+PC9lbGxpcHNlPgogICAgPC9nPgo8L3N2Zz4=);
  position: absolute;
  z-index: -1;
  right: 2.9375rem;
  top: 1.5rem;
}

.mole__eye {
  width: 0.6875rem;
  height: 0.28125rem;
  position: absolute;
  left: 5.375rem;
  /* top: 2.4375rem; */
  top: 2.7375rem;
  z-index: 4;
}

.mole__body {
  width: 10.25rem;
  height: 11.375rem;
  position: absolute;
  bottom: 0;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE2NXB4IiBoZWlnaHQ9IjE4M3B4IiB2aWV3Qm94PSIwIDAgMTY1IDE4MyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMy4yICgxMjA0MykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+VW50aXRsZWQgNzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHNrZXRjaDp0eXBlPSJNU1BhZ2UiPgogICAgICAgIDxnIGlkPSJib2R5LWNvcHktMyIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC43NTE4MDEsIDAuOTg0OTQ3KSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjE2Nzk2ODc1LDIwLjk5MjE4NzUgQzQuMTY3OTY4NzUsMjAuOTkyMTg3NSAxNTYuNjgxNjQxLC0xMS4zMTkzMzU0IDE0Ni43Mjg1MTYsNi4wMzgwODU5NCBDMTQ2LjcyODUxNiw2LjAzODA4NTk0IDIxNC41MTE3MTgsMTMzLjA3MDMwNSA3NC4zMTczODI4LDE4MS41MTk1MzEgTDEyLjMzNDk2MDksMTY5LjM2MzI3NCBDMTIuMzM0OTYwOSwxNjkuMzYzMjc0IC04LjMyODEyNDkzLDEwMS45NDkyMTIgNC4xNjc5Njg3NSwyMC45OTIxODc1IFoiIGlkPSJQYXRoLTMiIGZpbGw9IiM0QzQwNDAiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTEiIGZpbGw9IiMzRjMzMzMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE0Ny41MDAwMDAsIDk1LjUwMDAwMCkgcm90YXRlKDcuMDAwMDAwKSB0cmFuc2xhdGUoLTE0Ny41MDAwMDAsIC05NS41MDAwMDApICIgY3g9IjE0Ny41IiBjeT0iOTUuNSIgcng9IjIuNSIgcnk9IjYuNSI+PC9lbGxpcHNlPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
}

.mole__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

.mole__mouth-wrapper {
  position: absolute;
  right: 2rem;
  top: 4.625rem;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
}

.mole__mouth {
  position: absolute;
  background: #3a3535;
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  border-top-right-radius: 0;
  overflow: hidden;
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

.mole__mouth-inner {
  background: #c9544a;
  position: absolute;
  left: -0.1875rem;
  top: 0.625rem;
  border-radius: 50%;
  width: 0.9375rem;
  height: 0.9375rem;
}

.mole__hat {
  position: absolute;
  z-index: 4;
}

.mole__hat-base {
  width: 2.25rem;
  height: 1.5625rem;
  position: absolute;
  z-index: 2;
  left: 3.625rem;
  top: 0.0625rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjM3cHgiIGhlaWdodD0iMjVweCIgdmlld0JveD0iMCAwIDM3IDI1IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5sZWZ0IGhhbmQgY29weSAzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPHBhdGggZD0iTTIuNTEwNjE0NjIsMjMuMzYzNzIwMiBDMi41MTA2MTQ2MiwyMy4zNjM3MjAyIDE3Ljc4Njg0OTMsMjMuNzU3NTYyOSAzNC44NDI1NzgyLDE5LjQ2NzM2OTMgTDIzLjAyNTE5NTQsMC43ODA4NDU4NzMgTDUuNDk3ODUxNiwzLjczMjAxNzc1IEwyLjUxMDYxNDYyLDIzLjM2MzcyMDIgWiIgaWQ9IlBhdGgtMTEiIGZpbGw9IiNFRERFQ0IiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+);
}

.mole__hat-cone {
  width: 1.6875rem;
  height: 4.9375rem;
  position: absolute;
  z-index: 2;
  left: -0.75rem;
  top: -0.25rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI3cHgiIGhlaWdodD0iNzlweCIgdmlld0JveD0iMCAwIDI3IDc5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5sZWZ0IGhhbmQgY29weSAyPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9ImhhdC1jb3B5LTIiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjIuOTAyNjAwNiwwLjA1NDE0ODg0NTcgTDExLjcyNTk4NTUsNzMuMjU1MjMyIEwwLjczNzM4MDY5NiwwLjA1NDE0ODg0NTcgTDIyLjkwMjYwMDYsMC4wNTQxNDg4NDU3IFoiIGlkPSJQYXRoLTEyIiBmaWxsPSIjRTdEOUM4IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDxnIGlkPSJicnVzaCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEuOTMyODcwLCA3NC40ODQ5NDcpIHJvdGF0ZSgtOS4wMDAwMDApIHRyYW5zbGF0ZSgtMTEuOTMyODcwLCAtNzQuNDg0OTQ3KSB0cmFuc2xhdGUoOS45MzI4NzAsIDcwLjk4NDk0NykiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPgogICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTIiIGZpbGw9IiNFRERFQ0IiIGN4PSIyIiBjeT0iMiIgcng9IjIiIHJ5PSIyIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMS42MzI1MzAxMSwyLjMxNTY3NzI3IEwwLjU2ODc0OTAzMyw1LjQxNDc3MjgxIiBpZD0iUGF0aC0xMyIgc3Ryb2tlPSIjRURERUNCIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMi43MzA1NzMxMSwyLjI2OTI3NDk2IEwzLjQ3MDcwNjAzLDUuNDYxMTc1MTIiIGlkPSJQYXRoLTEzLUNvcHkiIHN0cm9rZT0iI0VEREVDQiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTIuMTI2NTI1OTMsMi44MTY2NTAzOSBMMi4xMjY1MjU5NSw2LjM5NzkwNTgzIiBpZD0iUGF0aC0xMy1Db3B5LTIiIHN0cm9rZT0iI0VEREVDQiI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=) no-repeat;
  -webkit-transform: rotateX(40deg) rotateY(-28deg) rotateZ(16deg) translateX(4px);
  transform: rotateX(40deg) rotateY(-28deg) rotateZ(16deg) translateX(4px);
}

.mole__hat-cone-wrapper {
  position: absolute;
  z-index: 5;
  width: 2.25rem;
  height: 1.5625rem;
  left: 3.625rem;
  top: 0.0625rem;
}

.mole__hat-cone-rotator {
  -webkit-transform-origin: center top 2px;
  -ms-transform-origin: center top 2px;
  transform-origin: center top 2px;
}

.mole__hat-shadow {
  width: 1.375rem;
  height: 1.4375rem;
  position: absolute;
  z-index: 0;
  left: -0.0625rem;
  top: -0.0625rem;
  opacity: 1;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIycHgiIGhlaWdodD0iMjNweCIgdmlld0JveD0iMCAwIDIyIDIzIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMy4zLjIgKDEyMDQzKSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5oYXQgc2hhZG93PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPHBhdGggZD0iTTIxLjQ3MzE0NDUsMCBMNC4wNDA3NzE0OCwyLjkzMjEyODkxIEwxLDIyLjY3NDgwNDcgQzEsMjIuNjc0ODA0NyAxMS41NTI0OTAyLDIyLjY3NDgwNDcgMTguNDczMTQ0NSwyMS40MzY3Njc2IEwyMS40NzMxNDQ1LDAgWiIgaWQ9IlBhdGgtMTc2IiBvcGFjaXR5PSIwLjEiIGZpbGw9IiMwMDAwMDAiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgIDwvZz4KPC9zdmc+);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: translateX(4px) translateY(4px);
  -ms-transform: translateX(4px) translateY(4px);
  transform: translateX(4px) translateY(4px);
}

.mole__hand {
  width: 3.375rem;
  height: 6.375rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjU0cHgiIGhlaWdodD0iMTAycHgiIHZpZXdCb3g9IjAgMCA1NCAxMDIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjMuMiAoMTIwNDMpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPmhhbmQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8bGluZWFyR3JhZGllbnQgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSIgaWQ9ImxpbmVhckdyYWRpZW50LTEiPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjNEM0MDQwIiBvZmZzZXQ9IjAlIj48L3N0b3A+CiAgICAgICAgICAgIDxzdG9wIHN0b3AtY29sb3I9IiMzQTJGMkYiIG9mZnNldD0iMTAwJSI+PC9zdG9wPgogICAgICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8ZyBpZD0icmlnaHQtaGFuZC1jb3B5IiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgMi43OTczMDQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAuMjIyNjU2MjUsMC4xMjEwOTM3NSBMMTEuMjQxNjI4Miw3NS41Mjg1MjkzIEMxMi42Nzg3NDA0LDg1LjM2MzI4OTMgMjEuODk4MjA0NSw5My4zMzU5Mzc1IDMxLjg0MzMwMjksOTMuMzM1OTM3NSBMMjUuOTMwMzcyNCw5My4zMzU5Mzc1IEMzOC4wNzU5NDM5LDkzLjMzNTkzNzUgNDcuOTIxODc1LDgzLjQ4Mjc1OTggNDcuOTIxODc1LDcxLjM0Mzk0NzYgTDQ3LjkyMTg3NSw1Ljk2MDkzNzUiIGlkPSJQYXRoLTgiIGZpbGw9InVybCgjbGluZWFyR3JhZGllbnQtMSkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4KICAgICAgICAgICAgPGcgaWQ9ImZpbmdlcnMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzLjAwMDAwMCwgODYuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+CiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC04IiBjeD0iMTciIGN5PSIzIiByeD0iMiIgcnk9IjMiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTgtQ29weSIgY3g9IjkuNSIgY3k9IjciIHJ4PSIyLjUiIHJ5PSI0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC04LUNvcHktMiIgY3g9IjIiIGN5PSI1IiByeD0iMiIgcnk9IjMiPjwvZWxsaXBzZT4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
  position: absolute;
  z-index: 5;
  top: 6.625rem;
  left: 1rem;
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
}

.mole__hand-circle {
  content: '';
  width: 2.5rem;
  height: 3.75rem;
  background: #4b4040;
  border-radius: 50%;
  border-bottom-right-radius: 0;
  position: absolute;
  right: 0.25rem;
  top: -3.125rem;
  opacity: 0;
  z-index: -1;
}

.mole__hand-left {
  width: 7.5rem;
  height: 6.6875rem;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/mole-hand-left.svg);
  position: absolute;
  z-index: -1;
  left: 5.3125rem;
  top: 4.375rem;
}

.mole-mouth {
  position: absolute;
  width: 1.5625rem;
  height: 1.5625rem;
  right: 0.9375rem;
  top: 4.25rem;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
}

.mole-mouth__inner {
  position: absolute;
  width: 0.9375rem;
  left: -1.25rem;
  top: 0.3125rem;
}

.mole-scene {
  position: absolute;
  left: 50%;
  top: 15.625rem;
  margin-left: -8.75rem;
  border: 1px solid redr;
  width: 100%;
  height: 100%;
}

.mole-scene__ground {
  background: #664001;
  position: absolute;
  z-index: 0;
  width: 13.1875rem;
  height: 13.1875rem;
  border-top-right-radius: 0.55rem;
  border-bottom-right-radius: 0.25rem;
  -webkit-transform: rotateX(68deg) rotateZ(48deg) translateX(-5.1875rem) translateY(-8.5rem);
  transform: rotateX(68deg) rotateZ(48deg) translateX(-5.1875rem) translateY(-8.5rem);
  top: -2.5rem;
}

.mole-scene__door {
  top: -2.225rem;
  -webkit-transform: rotateX(68deg) rotateZ(48deg) translateX(-7.625rem) translateY(-7.25rem);
  transform: rotateX(68deg) rotateZ(48deg) translateX(-7.625rem) translateY(-7.25rem);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  position: absolute;
  z-index: 1;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width: 13.0625rem;
  height: 13.0625rem;
}

.mole-scene__door-wave {
  width: 120px;
  height: 120px;
  position: absolute;
  z-index: 12;
  left: 0;
  top: 0;
  border-radius: 20px;
  opacity: 0;
  background: #fff;
  -webkit-transform: scale(0) translateZ(0);
  transform: scale(0) translateZ(0);
}

.mole-scene__door-wave-wrapper {
  position: absolute;
  -webkit-transform: rotateX(70deg) rotateZ(48deg) translate(35px, -180px);
  transform: rotateX(70deg) rotateZ(48deg) translate(35px, -180px);
  z-index: 6;
  opacity: 0.75;
}

.mole-scene__door-rotation {
  -webkit-transform: translateX(8px) translateY(8px);
  -ms-transform: translateX(8px) translateY(8px);
  transform: translateX(8px) translateY(8px);
  -webkit-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.mole-scene__mask {
  position: absolute;
  top: 0rem;
  left: -0.375rem;
  width: 19.125rem;
  height: 7.5rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwNnB4IiBoZWlnaHQ9IjY3M3B4IiB2aWV3Qm94PSIwIDAgMzA2IDY3MyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDMuMy4zICgxMjA3MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+VW50aXRsZWQgMTQ8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8ZyBpZD0ibW9sZS1tYXNrIiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIj4KICAgICAgICAgICAgPGcgaWQ9IlBhZ2UtMSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0ibW9sZS1tYXNrIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0LjAwMDAwMCwgMi4wMDAwMDApIiBmaWxsPSIjNTBFM0MyIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iUGFnZS0xIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Im1vbGUtbWFzayI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iUGFnZS0xIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjk0Ljg4ODIwMiwxMS4xNjU3NDUyIEMyOTUuOTM3MjAxLDEwLjgxODEwOTYgMjk2LjkyMTk2Nyw5LjY2MDkwNjYgMjk3LjA5MTg2OCw4LjU1NDE1Mzg3IEwyOTcuNDY3NzczLDYuMTA1NDY4NzUgTDMwMS4yMDg0OTYsNi4xMDU0Njg3NSBMMzAxLjIwODQ4Niw2NzAuMTM2NzE5IEwwLjk2NTY0NzQ2Myw2NzAuMTM2NzE5IEwwLjk2NTY1NzU0NywwLjcyNDEyMTA5NCBMMTQxLjk0MTk0Niw1OC40MjkyMTU1IEMxNDQuNDk0NjE3LDU5LjQ3MzQ2MDUgMTQ4LjY4NzU3Myw1OS42MTYyMzAzIDE1MS4zMDc5NzIsNTguNzQ3ODM3NCBMMjk0Ljg4ODIwMiwxMS4xNjU3NDUyIFoiIGlkPSJQYXRoLTEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjc4MzIwMzEzLDAuOTg2NjUzNjUgTDQ4Ljk4MzcyMzksMjAuNjkzMzU5NCIgaWQ9IlBhdGgtMiIgc3Ryb2tlPSIjOTc5Nzk3IiBzdHJva2Utd2lkdGg9IjAuMSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=);
  z-index: 2;
}

.mole-scene__mole {
  position: absolute;
  z-index: 2;
  top: -10.625rem;
  left: 3.125rem;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

.mole-hand {
  width: 3.0625rem;
  height: 8.0625rem;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQ5cHgiIGhlaWdodD0iMTI5cHgiIHZpZXdCb3g9IjAgMCA0OSAxMjkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjMuMyAoMTIwNzIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlVudGl0bGVkIDE0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPGxpbmVhckdyYWRpZW50IHgxPSI1MCUiIHkxPSIwJSIgeDI9IjUwJSIgeTI9IjEwMCUiIGlkPSJsaW5lYXJHcmFkaWVudC0xIj4KICAgICAgICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzRDNDA0MCIgb2Zmc2V0PSIwJSI+PC9zdG9wPgogICAgICAgICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjM0EyRjJGIiBvZmZzZXQ9IjEwMCUiPjwvc3RvcD4KICAgICAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPHBhdGggZD0iTTEuMjI3NzgzMiwzMS45Mjk3NDggQy0zLjY2MjEwODkxLC0xMy4wNzc5NDQzIDUwLjQxNDY3MjcsLTcuMzYxMDQ5NjcgNDguOTA3NjU1NCwzNy43OTkyNTU5IEM0OC45MDc2NTU0LDM3Ljc5OTI1NTkgMjEuNzI2NjMzMSw2NC40ODY5ODY2IDEuMjI3NzgzMiwzMS45Mjk3NDggWiIgaWQ9ImhhbmQtdG9wIiBmaWxsPSIjNEIzRjNGIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgPHBhdGggZD0iTTEuMjIyNjU2MjUsMzEuOTE4Mzk3NyBMMTIuMjQxNjI4MiwxMDcuMzI1ODMzIEMxMy42Nzg3NDA0LDExNy4xNjA1OTMgMjIuODk4MjA0NSwxMjUuMTMzMjQxIDMyLjg0MzMwMjksMTI1LjEzMzI0MSBMMjYuOTMwMzcyNCwxMjUuMTMzMjQxIEMzOS4wNzU5NDM5LDEyNS4xMzMyNDEgNDguOTIxODc1LDExNS4yODAwNjQgNDguOTIxODc1LDEwMy4xNDEyNTIgTDQ4LjkyMTg3NSwzNy43NTgyNDE1IiBpZD0iaGFuZC1ib2R5IiBmaWxsPSJ1cmwoI2xpbmVhckdyYWRpZW50LTEpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgPGcgaWQ9ImZpbmdlcnMiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LjAwMDAwMCwgMTE3Ljc5NzMwNCkiIGZpbGw9IiMwMDAwMDAiPgogICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC04IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiBjeD0iMTciIGN5PSIzIiByeD0iMiIgcnk9IjMiPjwvZWxsaXBzZT4KICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtOC1Db3B5IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiBjeD0iOS41IiBjeT0iNyIgcng9IjIuNSIgcnk9IjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtOC1Db3B5LTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIGN4PSIyIiBjeT0iNSIgcng9IjIiIHJ5PSIzIj48L2VsbGlwc2U+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -1.5625rem;
  margin-top: -2.5rem;
  -webkit-transform-origin: center 0.625rem;
  -ms-transform-origin: center 0.625rem;
  transform-origin: center 0.625rem;
}

.mole-hand--squash {
  margin-top: -4.375rem;
}

.path-easing-rectangle {
  width: 2.5rem;
  height: 2.5rem;
  background: #3a0839;
  position: absolute;
  top: 2.5rem;
  left: 50%;
  margin-left: -1.25rem;
  border-radius: 0.25rem;
}

.path-easing-rectangle--quake {
  top: 50%;
  margin-top: -1.25rem;
}

.path-easing-rectangle--eased-quake {
  top: 1.25rem;
}

.path-easing-rectangle--extreme-ease {
  border-radius: 100%;
  width: 8.75rem;
  height: 8.75rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.375rem;
  margin-top: -4.375rem;
}

.path-easing-rectangle--jump {
  top: auto;
  bottom: 3.75rem;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

.path-easing-rectangle--paused-jump {
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

.mole-skew-sample {
  -webkit-transform: scale(0.75);
  -ms-transform: scale(0.75);
  transform: scale(0.75);
}

.mole-tongue-example {
  width: 6.25rem;
  height: 3.75rem;
  border-radius: 0.25rem;
  border: 0.125rem solid #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -3.125rem;
  margin-top: -1.875rem;
  overflow: hidden;
}

.mole-tongue-example__tongue {
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
  position: absolute;
  left: 0;
  top: 0;
  margin-left: -6.25rem;
}

.mole-tongue-example__tongue svg {
  width: 100%;
  height: 100%;
}

.path-easing-tutorial__repeatative {
  width: 8.75rem;
  height: 15rem;
  background: rgba(95, 50, 90, 0.75);
  position: absolute;
  z-index: 5;
  top: 3.6875rem;
  left: 7.625rem;
}
              
            
!

JS

              
                var moleEl = document.querySelector('#js-mole'),
  moleHandEl = document.querySelector('#js-mole-hand'),
  moleHandLeftEl = document.querySelector('#js-mole-hand-left'),
  mouthEl = document.querySelector('#js-mole-mouth'),

  handAngleEasing = mojs.easing.path('M0,100 C0,100 12.0486221,-124.260309 24,99.7583642 C28.9933624,142.723104 100,100 100,100'),
  skewEasing = mojs.easing.path('M0,100 C0,100 18.1450901,69.0663515 24.0949898,99.9609384 C30.0448895,130.855525 100,100 100,100'),
  mouthEasing = mojs.easing.path('M0,0 C0,-145.307194 29.1828098,57.0115012 32.0031223,63.7232245 C86.2226562,57.0115012 100,72.4825934 100,72.4825934');

new mojs.Tween({
  repeat: 99999,
  duration: 1800,
  delay: 2000,
  onUpdate: function(progress) {
    var skewProgress = skewEasing(progress),
      handAngleProgress = handAngleEasing(progress),
      mouthProgress = mouthEasing(progress);

    moleEl.style['transform'] = 'skewX(' + 75 * skewProgress + 'deg)';
    moleHandEl.style['transform'] = 'rotate(' + (-200 * handAngleProgress) + 'deg)';
    moleHandLeftEl.style['transform'] = 'translate(' + (100 * skewProgress) + 'px,' + (-80 * skewProgress) + 'px) rotate(' + (-110 * skewProgress) + 'deg)';
    mouthEl.style['transform'] = 'scale(' + mouthProgress + ') translateX(' + (-100 * skewProgress) + 'px)';
  }
}).run();
              
            
!
999px

Console