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.

            
              <nav class="menu">
  <ol>
    <li class="menu-item"><a href="#0">Home</a></li>
    <li class="menu-item"><a href="#0">About</a></li>
    <li class="menu-item">
      <a href="#0">Widgets</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#0">Big Widgets</a></li>
        <li class="menu-item"><a href="#0">Bigger Widgets</a></li>
        <li class="menu-item"><a href="#0">Huge Widgets</a></li>
      </ol>
    </li>
    <li class="menu-item">
      <a href="#0">Kabobs</a>
      <ol class="sub-menu">
        <li class="menu-item"><a href="#0">Shishkabobs</a></li>
        <li class="menu-item"><a href="#0">BBQ kabobs</a></li>
        <li class="menu-item"><a href="#0">Summer kabobs</a></li>
      </ol>
    </li>
    <li class="menu-item"><a href="#0">Contact</a></li>
  </ol>
</nav>
            
          
!
            
              /*
 *  Brought to you by Yago Estévez. https://twitter.com/yagoestevez
 */
@import "https://fonts.googleapis.com/css?family=Just+Another+Hand";

/***********************************
  BASIC DOM RESET AND GLOBAL VARIABLES SET UP.
 ***********************************/
:root,
*,
*:before,
*:after {
  padding         : 0;
  margin          : 0;
  box-sizing      : border-box;
}

:root {
  --light-color   : #fbfcfd;
  --dark-color    : #0084ac;
  --key-color     : red;
}

/***********************************
  DOM STYLING.
 ***********************************/
html, body {
  box-sizing      : border-box;
  height          : 100%;
  width           : 100%;
  display         : flex;
  justify-content : center;
  align-items     : flex-end; 
  font-family     : 'Just Another Hand', cursive;
  font-size       : 50px;
  color           : var(--light-color);
  background      : linear-gradient(
    to bottom,
    transparent,    transparent 58px,
    #13a1cc 2px,  #13a1cc
  );
  background-size : 100% 60px;
  overflow        : hidden;
}
 
body::before {
  content         : " ";
  position        : absolute;
  top             : 0;
  left            : 0;
  height          : 100%;
  width           : 100px;
  border-right    : 4px double red;
}

nav {
  display         : none;
}

a {
  outline         : 0;
}

a#author, a#author:visited {
  color           : var(--dark-color);
  font-size       : 30px;
  text-decoration : none;
  position        : absolute;
  right           : 20px;
  bottom          : 30px;
  transition      : color 300ms; 
}

a#author:hover, a#author:active {
  color           : var(--key-color);
  text-decoration : underline;
}


/***********************************
  MEDIA QUERIES.
 ***********************************/
@media only screen and (max-width: 800px) {
  #Sketch {
    width           : 100%;
    height          : 100%;
    align-items     : flex-end;
  }
  #SVG {
    width           : 100vw;
    height          : 100vw;
    margin-bottom   : 10px;
  }
  html, body {
    background      : linear-gradient(
      to bottom,
      transparent,    transparent 29px,
      #13a1cc 2px,  #13a1cc
    );
    background-size : 100% 30px;
  }
  body::before {
    width           : 30px;
  }
  a#author, a#author:visited {
    font-size       : 20px;
    right           : 20px;
    bottom          : 20px;
  }
}

/***********************************
  CHARACTER STYLING.
 ***********************************/
#Sketch {
  position          : relative;
  width             : 100%;
  height            : 100%;
  display           : flex;
  justify-content   : center;
  align-items       : center;
}

#SVG {
  width             : 700px;
  height            : 700px;
}


#Jorge > * {
  fill-opacity      : 1;
  fill              : var(--light-color);
  stroke            : var(--dark-color);
  stroke-opacity    : 1;
  stroke-width      : 2.5;
  stroke-linecap    : round;
  stroke-linejoin   : round;
  stroke-dashoffset : 0;
  animation         : stroke-animation 200ms linear -2s infinite forwards;
}

#Jorge-Eyes {
  fill              : var(--dark-color);
}

#Jorge-Eyebrows {
  fill              : var(--dark-color);
}

#Jorge-BG {
  fill              : var(--dark-color);
  opacity           : 0.1;
}

/***********************************
  MENU STYLING.
 ***********************************/
#About, #Kabobs {
  transform         : rotate(20deg);
}

#Contact, #Widgets {
  transform         : rotate(-20deg);
}

#Widgets-SubMenu, #Kabobs-SubMenu {
  display           : none;
  opacity           : 0;
  transition        : opacity 300ms;
}

#Widgets-SubMenu.showSubMenu, #Kabobs-SubMenu.showSubMenu {
  display           : block;
  opacity           : 1;
}

.menu-item, .menu-item-sm {
  cursor            : pointer;
  font-size         : 40px;
  fill              : var(--dark-color);
  transition        : fill 300ms;
  stroke            : var(--dark-color);
  stroke-width      : .5;
  animation         : thin-stroke-animation 200ms linear -2s infinite forwards;
}

.submenu-item {
  cursor            : pointer;
  font-size         : 40px;
  text-align        : center;
  fill              : var(--dark-color);
  text-anchor       : middle;
}

  .menu-item:hover, .menu-item-sm:hover, .submenu-item:hover {
    fill            : var(--key-color);
    stroke          : var(--key-color);
  }


/***********************************
  ANIMATION FRAMES.
 ***********************************/
/* Irregular ink effect */
@keyframes stroke-animation {
  0% {
    stroke-width    : 2.5;
  }
  
  80% {
    stroke-width    : 1.5;
  }
}

@keyframes thin-stroke-animation {
  0% {
    stroke-width    : 1;
  }
  
  80% {
    stroke-width    : 0.5;
  }
}
            
          
!
            
              /**
 * Brought to you by Yago Estévez. https://twitter.com/yagoestevez
 */
const Sketch = `
  <div id="Sketch">
    <svg id="SVG" viewBox="0 0 800 800">
      <rect
        id="canvas-size"
        x="0"
        y="0"
        height="800"
        width="800"
        opacity="0"
      />
      <g id="Jorge">
        <circle
          id="Jorge-BG"
          cx="398"
          cy="459"
          r="317"
        />
        <path
          id="Jorge-Body-Pose1"
          d="m 367.58755,446.58481 c -14.82571,4.00468 -17.9072,6.15051 -31.61081,11.51778 -13.40778,5.2514 -38.53554,13.73454 -46.58425,28.41159 -8.04871,14.67704 -20.83194,60.12857 -24.14611,73.85872 -3.31418,13.73014 -6.01734,26.77243 -8.99563,43.55771 -2.97828,16.78527 -17.04431,20.35849 -22.72576,44.97807 -5.68145,24.61958 -2.84071,41.66388 10.41598,46.87187 13.2567,5.20798 27.46029,2.84072 35.509,-4.26108 8.04871,-7.10181 14.2036,-36.92937 12.78324,-41.66389 -1.42036,-4.73454 8.52217,21.77885 16.57087,16.57087 8.04871,-5.20799 0.47345,-29.82756 -8.52216,-38.82317 -11.56331,-11.56333 -16.09742,-17.99123 -13.25669,-28.88066 2.84072,-10.88942 12.78323,-61.54894 16.0974,-67.23037 3.31418,-5.68145 4.26109,-24.61958 10.88943,1.89381 6.62835,26.51339 8.99561,91.37649 7.1018,106.527 -1.89381,15.15051 -17.04432,106.527 -18.93813,113.15535 -1.89381,6.62834 0.47345,17.99123 -8.99562,13.25669 -9.46906,-4.73453 -44.50462,-17.99123 -66.75692,-8.04869 -18.23735,8.14861 -4.76107,34.98244 -0.0266,38.77006 4.73454,3.78764 98.63758,1.5 108.5801,1.5 9.94252,0 -6.76107,-26.06647 -7.70798,-34.11518 -0.94691,-8.04871 17.04432,-84.74814 21.3054,-87.11541 4.26107,-2.36726 26.51339,12.78323 60.12857,12.78323 33.61519,0 51.60642,-10.88942 53.02678,-7.1018 1.42036,3.78763 11.80979,81.67291 10.38943,87.35434 -1.42036,5.68144 -15.1505,28.4072 -8.04871,28.4072 h 115.04916 c 9.46907,0 -4.73453,-35.03555 -18.46468,-38.34972 -13.73014,-3.31417 -52.55332,15.62396 -57.76131,11.36288 -5.20798,-4.26108 -12.62397,-156.34185 -17.93103,-203.27735 -4.1461,-36.66797 -12.7693,-67.61444 -8.50821,-61.93299 4.26107,5.68143 19.364,34.39964 26.46579,56.17849 7.1018,21.77885 9.46907,47.81879 7.57526,50.65951 -1.89382,2.84073 -11.83634,25.56648 -10.41598,32.19482 1.42036,6.62835 2.36727,14.67706 8.52216,13.73016 6.15489,-0.94691 1.19386,-19.18179 8.04871,-18.93814 16.50926,0.5868 0.47344,35.98246 16.09741,46.87189 15.62396,10.88942 34.08864,4.26107 40.24353,-8.99562 6.1549,-13.25669 -2.36726,-38.34972 -14.2036,-51.13296 -11.83633,-12.78324 -16.09741,-10.41597 -20.83194,-29.82757 -4.73454,-19.41157 -35.69901,-121.35749 -53.97368,-130.67312 -23.18843,-11.82045 -36.11062,-19.40974 -55.9206,-22.14612 -17.96442,-2.48145 -42.43928,-2.76959 -60.47362,2.1018 z"
        />
        <path
          id="Jorge-Body-Pose2"
          opacity="0"
          d="m 371.08755,435.80664 c -15.82571,1.50468 -32.40584,0.91753 -47.11081,1.51778 -18.40778,0.7514 -36.46809,7.43984 -50.58425,12.91159 -30.92735,11.98816 -47.43879,37.61133 -53.14611,48.35872 -13.12433,24.71426 -7.45069,51.93553 0.47388,75.46716 5.44071,16.15593 15.65304,21.06456 36.75569,34.95989 21.10267,13.89534 38.06997,17.1647 47.56645,6.54963 9.49649,-10.61508 12.22097,-24.75449 8.36469,-34.7718 -3.85629,-10.0173 -29.6765,-26.16917 -34.60934,-26.48553 -4.93288,-0.31636 23.2169,5.28954 22.08022,-7.85785 -0.82576,-9.55107 -27.79771,-10.82567 -39.36187,-5.52358 -14.86504,6.81552 -19.81129,5.9084 -23.4395,-4.74457 -3.62816,-10.65297 10.13146,-43.11111 23.04599,-49.974 22.43973,-11.92466 50.26109,-26.61958 56.88943,7.39381 5.22746,26.82477 0.39261,123.50086 3.1018,138.527 2.73161,15.15051 -13.94054,99.57111 -15.08458,108.92311 -0.8991,7.34976 -3.02655,27.88032 -12.49562,23.14578 -9.46906,-4.73453 -44.85817,-15.86991 -67.11047,-5.92737 -18.23735,8.14861 -6.79681,40.53783 -0.73371,40.53783 89.96359,0 83.78834,0.79289 109.28721,-8.04594 9.39414,-3.25635 -6.76107,-26.06647 -7.70798,-34.11518 -0.94691,-8.04871 17.04432,-84.74814 21.3054,-87.11541 4.26107,-2.36726 26.51339,12.78323 60.12857,12.78323 33.61519,0 51.60642,-10.88942 53.02678,-7.1018 1.42036,3.78763 11.80979,81.67291 10.38943,87.35434 -1.42036,5.68144 -14.88124,26.47019 -8.04871,28.4072 36.58195,10.37089 32.37894,7.77817 115.04916,7.77817 9.46907,0 -4.73453,-35.03555 -18.46468,-38.34972 -13.73014,-3.31417 -51.40851,8.98522 -57.76131,6.76669 -12.20166,-4.26108 -25.97964,-160.93805 -27.12341,-207.87355 -0.89899,-36.89067 -2.65416,-81.60224 4.18417,-83.51877 20.76107,-5.81857 37.99511,-2.37096 56.46579,11.17849 18.1018,13.27885 27.99666,34.9423 18.06513,54.17937 -3.4148,6.61436 -27.58374,-5.73419 -33.71772,-2.84859 -6.13398,2.8856 -12.62014,5.29736 -11.44152,11.41211 2.19138,11.3689 18.95327,-3.18441 20.26949,3.5473 3.16998,16.21268 -34.93894,8.61589 -42.00413,26.30122 -7.0652,17.68533 3.57537,34.16736 17.88202,37.15773 14.30665,2.99036 36.81538,-10.99693 46.58351,-25.42239 9.76814,-14.42544 52.94294,-63.70695 9.25912,-115.04125 -17.38923,-20.43466 -31.05936,-33.5809 -80.33403,-38.39653 -25.90401,-2.53161 -33.61062,-1.90974 -52.9206,-1.14612 -18.12083,0.71659 -75.6543,-0.8982 -56.97362,-0.8982 z"
        />
        <g id="Jorge-Head-Group">
          <g id="Jorge-Ears">
            <ellipse
              id="Jorge-Right-Ear"
              cx="293"
              cy="388"
              rx="20"
              ry="20"
            />
            <ellipse
              id="Jorge-Left-Ear"
              cx="496"
              cy="384"
              rx="20"
              ry="20"
            />
          </g>
          <path
            id="Jorge-Head"
            d="M258 305s35 113 51 123c16 11 77 49 88 49s103-42 110-117c6-74 4-78 18-104 15-26 19-41-13-86 5 24 7 49-9 46-16-4 17-73-39-113 8 15 22 57-3 46-25-12-4-70-63-77 0 0 36 43 6 54-29 11-28-59-20-88-57 21-51 50-52 77s-34 1-26-31c-51 50-3 79-13 91-10 10-39-9-32-48-25 26-17 64-6 102 11 37-28 37-31 21-19 37 34 55 34 55z"
          />
          <path
            id="Jorge-Head-Down"
            opacity="0"
            d="m 259.11602,326.65367 c 0,0 36.86473,102.61466 53.12811,112.32966 16.26337,9.71499 77.87213,43.71749 88.58516,43.71749 10.71302,0 102.34965,-38.25281 107.70055,-105.6506 5.35091,-67.39779 2.70698,-70.99717 16.71926,-94.58696 14.01228,-23.58979 18.25564,-37.17104 -14.59099,-78.30763 4.88054,22.57841 7.56167,44.82202 -8.35972,41.79158 -16.31572,-3.10549 15.39677,-65.92772 -41.02455,-101.79388 8.42946,12.97632 23.13757,51.10836 -2.1642,40.9415 -25.30176,-10.16687 -4.89461,-63.2567 -64.66966,-69.26755 0,0 36.72936,38.75553 7.52012,49.0119 -29.20925,10.25639 -29.55999,-53.60396 -21.47083,-80.051688 -57.53903,18.772148 -50.20645,45.405628 -50.69768,69.723018 -0.49122,24.31739 -34.38595,1.31825 -26.47246,-27.83114 -50.7789,44.88979 -2.405,71.24372 -12.27648,82.34861 -9.09979,9.01627 -39.06955,-7.91587 -32.01674,-43.2781 -24.55332,23.38462 -16.24925,57.71693 -4.79341,91.96597 11.45584,34.24903 -26.56745,34.09052 -30.75746,19.83579 -17.89975,33.05966 35.64098,49.10203 35.64098,49.10203 z"
          />
          <path
            id="Jorge-Head-Right"
            opacity="0"
            d="m 265.45588,290.79561 c 0,0 22.8802,116.64601 37.3777,129.14611 14.4975,12.50012 69.76355,56.78505 80.10596,58.00681 10.3424,1.22175 103.54655,-30.24384 117.05979,-103.48591 13.51325,-73.24208 11.40658,-77.48768 27.85577,-101.73859 16.44921,-24.25091 22.22785,-38.64888 -4.38754,-87.47097 1.91528,25.29728 1.74872,49.97687 -13.24653,44.84047 -15.36665,-5.2636 23.02949,-70.48554 -26.99776,-116.22102 6.53066,15.18036 16.00716,58.64158 -7.16008,44.61556 -23.16723,-14.02604 3.10928,-69.872847 -53.85336,-83.276315 0,0 30.65869,46.655815 1.18967,54.563275 -29.46904,7.90748 -21.89832,-62.108612 -10.81337,-90.166656 -57.87343,14.007935 -54.09318,44.028276 -57.5792,70.618456 -3.48603,26.59019 -33.35963,-2.477 -22.10966,-33.515476 -54.58193,43.397756 -11.14557,77.792276 -22.05093,88.834876 -9.90167,8.84196 -36.7375,-13.1296 -25.54895,-51.07405 -26.60016,22.82395 -22.83555,61.39121 -16.01788,100.22666 6.81765,38.83545 -29.87058,34.32543 -32.15014,18.22772 -21.37505,34.18435 28.32651,57.86905 28.32651,57.86905 z"
          />
          <path
            id="Jorge-Mouth"
            d="m 366.64374,408.95344 c 0,0 7.19561,18.40815 30.95943,15.23401 27.32585,-3.64994 31.62378,-18.6434 30.89117,-23.08714 -2.13368,16.52553 -16.60465,21.30468 -34.98943,23.426 -18.38477,2.12132 -26.86117,-15.57287 -26.86117,-15.57287 z"
          />
          <path
            id="Jorge-Mouth-BigSmile"
            opacity="0"
            d="m 350.39374,399.95344 c 0,0 25.3099,31.58373 48.20943,24.48401 37.57585,-11.64994 42.37378,-26.6434 41.64117,-31.08714 -2.13368,16.52553 -29.35465,30.05468 -47.73943,32.176 -18.38477,2.12132 -42.11117,-25.57287 -42.11117,-25.57287 z"
            />
            <path
            id="Jorge-Mouth-SmileOpen"
            opacity="0"
            d="m 350.39374,413.95344 c 0,0 22.60498,8.44782 46.44166,5.87741 32.62611,-3.51821 44.14155,-8.0368 43.40894,-12.48054 -2.13368,16.52553 -22.99069,35.48971 -41.37547,37.61103 -18.38477,2.12132 -48.47513,-31.0079 -48.47513,-31.0079 z"
          />
          <g id="Jorge-Eyes">
            <ellipse
              id="Jorge-Right-Eye"
              cy="350"
              cx="324"
              rx="5"
              ry="5"
            />
            <ellipse
              id="Jorge-Left-Eye"
              cx="453"
              cy="348"
              rx="5"
              ry="5"
            />
          </g>
          <g id="Jorge-Eyebrows">
            <path
              id="Jorge-Left-Eyebrow"
              d="M302 316s33-31 36-30 3 17 1 19-32 16-35 16c-4 0-2-5-2-5z"
            />
            <path
              id="Jorge-Right-Eyebrow"
              d="M479 307s-34-31-37-30c-2 2-2 17 0 19s31 16 34 16c4 0 3-5 3-5z"
            />
          </g>
          <g id="Jorge-Cheeks">
            <path
              id="Jorge-Right-Cheek"
              d="M313 359l26-3"
            />
            <path
              id="Jorge-Left-Cheek"
              d="M465 357l-26-3"
            />
          </g>
          <path
            id="Jorge-Nose"
            d="M382 240s16 148 13 150 3 4 3 4"
          />
        </g>
        <path
          id="Jorge-Belly"
          d="M357 651c74 32 119-8 109-29"
        />
      </g>
      <g id="Jorge-Menu">
        <a xlink:href="#0">
          <text
            x="375"
            y="739"
            id="Home"
            class="menu-item"
          >
            <tspan>Home</tspan>
          </text>
        </a>
        <a xlink:href="#0">
          <text
            y="280"
            x="250"
            id="About"
            class="menu-item"
          >
            <tspan>About</tspan>
          </text>
        </a>
        <a xlink:href="#0">
          <text
            y="560"
            x="-60"
            id="Widgets"
            class="menu-item-sm"
          >
            <tspan>Widgets</tspan>
          </text>
        </a>
        <a xlink:href="#0">
          <text
            y="280"
            x="750"
            id="Kabobs"
            class="menu-item-sm"
          >
            <tspan>Kabobs</tspan>
          </text>
        </a>
        <a xlink:href="#0">
          <text
            y="550"
            x="430"
            id="Contact"
            class="menu-item"
          >
            <tspan>Contact</tspan>
          </text>
        </a>
        <g id="Widgets-SubMenu">
          <a xlink:href="#0">
            <text
              y="520"
              x="398"
              id="BigWidgets"
              class="submenu-item"
            >
              <tspan>Big Widgets</tspan>
            </text>
          </a>
          <a xlink:href="#0">
            <text
              y="570"
              x="398"
              id="BiggerWidgets"
              class="submenu-item"
            >
              <tspan>Bigger Widgets</tspan>
            </text>
          </a>
          <a xlink:href="#0">
            <text
              y="620"
              x="398"
              id="BiggerWidgets"
              class="submenu-item"
            >
              <tspan>Bigger Widgets</tspan>
            </text>
          </a>
        </g>
        <g id="Kabobs-SubMenu">
          <a xlink:href="#0">
            <text
              y="520"
              x="398"
              id="BigWidgets"
              class="submenu-item"
            >
              <tspan>Shishkabobs</tspan>
            </text>
          </a>
          <a xlink:href="#0">
            <text
              y="570"
              x="398"
              id="BiggerWidgets"
              class="submenu-item"
            >
              <tspan>BBQ kabobs</tspan>
            </text>
          </a>
          <a xlink:href="#0">
            <text
              y="620"
              x="398"
              id="BiggerWidgets"
              class="submenu-item"
            >
              <tspan>Summer kabobs</tspan>
            </text>
          </a>
        </g>
      </g>
    </svg>
  </div>
`;


/***********************************
  ADDING THE SVG AND ANIMATION LIBRARY TO THE DOM.
 ***********************************/
// Add the SVG container to the HTML.
const nav = document.querySelector( '.menu' );
nav.insertAdjacentHTML( 'afterend', Sketch );

// Define the SVG element to be animated with SnapSVG.
const svg = document.getElementById( 'SVG' );
Snap( svg );

// Insert copy.
const link     = document.createElement( 'a' );
const linkText = document.createTextNode( 'Yago Estévez' );
link.id        = 'author';
link.title     = "Yago Estévez on Twitter";
link.href      = "https://twitter.com/yagoestevez";
link.target    = "_blank";
document.body.appendChild( link );
link.appendChild( linkText );

/***********************************
  VARIABLE DEFINITIONS FOR THE ANIMATION.
 ***********************************/
// Define the constants for speed and slight movements of the character.
const speed             = 300;
const lowPose           = 'translate(0,10)';
const lowerPose         = 'translate(0,20)';
const lowestPose        = 'translate(0,30)';
const lookRightPose     = 'translate(-10,0)';
const lookMoreRightPose = 'translate(-20,0)';
const lookLeftPose      = 'translate(10,0)';
const lookMoreLeftPose  = 'translate(20,0)';
const resetPose         = 'translate(0,0)';

// Store character poses for animation.
const BodyInitialPose   = Snap.select( '#Jorge-Body-Pose1'       );
const BodyEndingPose    = Snap.select( '#Jorge-Body-Pose2'       );
const BodyInitPosePath  = BodyInitialPose.node.getAttribute( 'd' );
const BodyEndPosePath   = BodyEndingPose.node.getAttribute(  'd' );

// Store character pieces individually.
const Head              = Snap.select( '#Jorge-Head'             );
const HeadDown          = Snap.select( '#Jorge-Head-Down'        );
const Eyebrows          = Snap.select( '#Jorge-Eyebrows'         );
const Eyes              = Snap.select( '#Jorge-Eyes'             );
const Cheeks            = Snap.select( '#Jorge-Cheeks'           );
const Ears              = Snap.select( '#Jorge-Ears'             );
const Mouth             = Snap.select( '#Jorge-Mouth'            );
const MouthSmile        = Snap.select( '#Jorge-Mouth-BigSmile'   );
const MouthOpen         = Snap.select( '#Jorge-Mouth-SmileOpen'  );
const Nose              = Snap.select( '#Jorge-Nose'             );
const HeadPath          = Head.node.getAttribute(         'd'    );
const HeadDownPath      = HeadDown.node.getAttribute(     'd'    );
const MouthPath         = Mouth.node.getAttribute(        'd'    );
const MouthSmilePath    = MouthSmile.node.getAttribute(   'd'    );
const MouthOpenPath     = MouthOpen.node.getAttribute(    'd'    );

/***********************************
  ANIMATION FUNCTIONS.
 ***********************************/
// Define the animation when showing sub-menus.
const enterMenuPose = ( ) => {
  BodyInitialPose.animate( { d: BodyEndPosePath }, speed, mina.backout, null );
  Head.animate( { d: HeadDownPath }, speed, mina.backout, null );
  Eyebrows.animate( { transform: lowPose }, speed, mina.backout, null );
  Eyes.animate( { transform: lowestPose }, speed, mina.backout, null );
  Cheeks.animate( { transform: lowestPose}, speed, mina.backout, null );
  Ears.animate( { transform: lowerPose}, speed, mina.backout, null );
  Mouth.animate( { d: MouthOpenPath }, speed, mina.backout, null );
  Nose.animate( { transform: lowPose }, speed, mina.backout, null );
}

// Define the animation when looking at About menu.
const enterLookRight = ( ) => {
  Head.animate( { transform: 'matrix(1,0,0,1,5,0)' }, speed, mina.backout, null );
  Ears.animate( { transform: 'matrix(1,0,0,1,8,0)' }, speed, mina.backout, null );
  Eyes.animate( { transform: lookMoreRightPose }, speed, mina.backout, null );
  Cheeks.animate( { transform: lookRightPose}, speed, mina.backout, null );
  Mouth.animate( { d: MouthSmilePath }, speed, mina.backout, null );
}

// Define the animation when looking at Contact menu.
const enterLookLeft = ( ) => {
  Head.animate( { transform: 'matrix(1,0,0,1,-5,0)' }, speed, mina.backout, null );
  Ears.animate( { transform: 'matrix(1,0,0,1,-8,0)' }, speed, mina.backout, null );
  Eyes.animate( { transform: lookMoreLeftPose }, speed, mina.backout, null );
  Cheeks.animate( { transform: lookLeftPose}, speed, mina.backout, null );
  Mouth.animate( { d: MouthSmilePath }, speed, mina.backout, null );
}

// Define the animation when looking at Home menu.
const enterLookDown = ( ) => {
  Head.animate( { transform: lowerPose }, speed, mina.backout, null );
  Ears.animate( { transform: lowerPose }, speed, mina.backout, null );
  Eyes.animate( { transform: lowestPose }, speed, mina.backout, null );
  Eyebrows.animate( { transform: lowerPose }, speed, mina.backout, null );
  Cheeks.animate( { transform: lowestPose}, speed, mina.backout, null );
  Mouth.animate( { d: MouthSmilePath, transform: lowerPose }, speed, mina.backout, null );
  Nose.animate( { transform: lowerPose }, speed, mina.backout, null );
}

// Define the animation when hiding sub-menus.
const leavePose = ( ) => {  
  BodyInitialPose.animate( { d: BodyInitPosePath }, speed, mina.backout, null );
  Head.animate( { d: HeadPath, transform: resetPose }, speed, mina.backout, null );
  Eyebrows.animate( { transform: resetPose }, speed, mina.backout, null );
  Eyes.animate( { transform: resetPose }, speed, mina.backout, null );
  Cheeks.animate( { transform: resetPose }, speed, mina.backout, null );
  Ears.animate( { transform: resetPose }, speed, mina.backout, null );
  Mouth.animate( { d: MouthPath, transform: resetPose }, speed, mina.backout, null );
  Nose.animate( { transform: resetPose }, speed, mina.backout, null );
}

// Reset the character's pose and submenus so it can start a new pose.
const resetToNewPose = ( ) => {
  onSubMenu = false;
  leavePose( );
  WidgetsSubMenuGroup.classList.remove( 'showSubMenu' );
  KabobsSubMenuGroup.classList.remove( 'showSubMenu' );
}


/***********************************
  LISTENERS.
 ***********************************/
let onSubMenu = false;

// Listeners for the About Menu Item.
const AboutMenuItem       = document.querySelector( '#About' );
AboutMenuItem.addEventListener( 'mouseover', ( ) => {
  resetToNewPose( );
  enterLookRight( );
} );
AboutMenuItem.addEventListener( 'mouseout', ( ) => {
  leavePose( );
} );

// Listeners for the Contact Menu Item.
const ContactMenuItem     = document.querySelector( '#Contact' );
ContactMenuItem.addEventListener( 'mouseover', ( ) => {
  resetToNewPose( );
  enterLookLeft( );
} );
ContactMenuItem.addEventListener( 'mouseout', ( ) => {
  leavePose( );
} );

// Listeners for the Home Menu Item.
const HomeMenuItem        = document.querySelector( '#Home' );
HomeMenuItem.addEventListener( 'mouseover', ( ) => {
  resetToNewPose( );
  enterLookDown( );
} );
HomeMenuItem.addEventListener( 'mouseout', ( ) => {
  leavePose( );
} );


// Listeners for the Widgets Menu Item.
const WidgetsMenuItem     = document.querySelector( '#Widgets' );
const WidgetsSubMenuGroup = document.querySelector( '#Widgets-SubMenu' );
WidgetsMenuItem.addEventListener( 'mouseover', ( ) => {
  KabobsSubMenuGroup.classList.remove( 'showSubMenu' );
  onSubMenu = true;
  enterMenuPose( );
  WidgetsSubMenuGroup.classList.add( 'showSubMenu' );
} );
WidgetsMenuItem.addEventListener( 'mouseout', ( ) => {
  if ( !onSubMenu ) {
    leavePose( );
    WidgetsSubMenuGroup.classList.remove( 'showSubMenu' );
  }
} );

// Listeners for the Kabobs Menu Item.
const KabobsMenuItem      = document.querySelector( '#Kabobs' );
const KabobsSubMenuGroup  = document.querySelector( '#Kabobs-SubMenu' );
KabobsMenuItem.addEventListener( 'mouseover', ( ) => {
  WidgetsSubMenuGroup.classList.remove( 'showSubMenu' );
  onSubMenu = true;
  enterMenuPose( );
  KabobsSubMenuGroup.classList.add( 'showSubMenu' );
} );
KabobsMenuItem.addEventListener( 'mouseout', ( ) => {
  if ( !onSubMenu ) {
    leavePose( );
    KabobsSubMenuGroup.classList.remove( 'showSubMenu' );
  }
} );

// Listener to check if the mouse is outside the Menu Area.
const outsideMenuArea = document.querySelector( '#canvas-size' );
outsideMenuArea.addEventListener( 'mouseover', ( ) => {
  resetToNewPose( );
} );

            
          
!
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