cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

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

Quick-add: + add another resource

Add External JavaScript

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

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 353 409">
  <path class="st0" d="M-3.4-1.9h508.5v507H-3.4z" />
  <path id="face" class="st1" d="M252.6 263.1l.1-39.9s.8-20-3.8-26.5c-4.8-6.8-27.8-15-27.8-15l-46-15.7-46 15.7s-23 8.3-27.8 15c-4.6 6.5-3.8 26.5-3.8 26.5l.1 39.9-.1 40s-.8 20.1 3.8 26.5c4.8 6.7 27.8 15 27.8 15l46 15.7 46-15.7s23-8.3 27.8-15c4.6-6.5 3.8-26.5 3.8-26.5l-.1-40z"
  />
  <path class="st2" d="M257.7 86.7c.9 0 1.9.1 2.8.2-5.2-8-13.9-13.6-24.3-14.6-4.2-.4-8.2 0-12 1l-8.8-25.7 3.6-8.8c.4 0 .8-.1 1.2-.3l7.7 1.1h.1c.2 0 .3-.1.4-.3.1-.2 0-.4-.2-.5l-1.3-.9 2 .1c.2 0 .4-.1.4-.3 0-.2 0-.4-.2-.5l-2.1-1 2.8-.5c.2 0 .3-.2.3-.4s-.1-.4-.3-.4l-2.2-.5 1.9-.7c.2-.1.3-.3.3-.5.6-.2 1-.4 1-.6 0-.4-.5-1.4-1-1.6-3-1.1-18.3-.8-24.5-1-1.3 0-4.4.1-5.2 1.2-.5.6 1.5 1.7 1.5 1.7s8.5 1.8 11.3 2.7c1 .3 1.6.8 2.1 1.3L191.4 92c-.7-.1-1.3-.1-1.8-.1l-1.5-7.1 3.1-.8c.9-.2 1.5-1.2 1.2-2.1l-.2-.6c-.2-.9-1.2-1.5-2.1-1.2l-9.6 2.4c-.9.2-1.5 1.2-1.2 2.1l.2.6c.2.9 1.2 1.5 2.1 1.2l3.5-.9 1.4 6.5c-2.7.5-4.7 2.1-7.8 6.2-10.4-1.4-17.8-.9-25.5-23.6-2.6-7.7-5.7-17.3-8.1-22.1 4.7-12.1 8.8-23.5 9.9-26.5.2-.2.4-.5.5-.8.3-1-.2-2-1.2-2.3-1.5-.5-2.2-1.3-2.3-1.7 0-.1 0-.2.2-.4 1-.8 4.7-1.5 12.5 1.3 1 .3 2-.2 2.4-1.1.3-1-.2-2-1.1-2.4-7.7-2.8-13.4-3-16.2-.6-1.2 1-1.7 2.5-1.4 4 .3 1.5 1.5 2.9 3.1 3.8-2.6 7-12.4 32.5-19.1 47.1-4.8-2.2-10.2-3.2-15.8-2.7-.7.1-1.4.1-2.1.3.6.7 1.1 1.5 1.6 2.3-15.9.9-28.7 14.1-28.7 30.3 0 16.7 13.6 30.3 30.3 30.3 15.4 0 28.2-11.6 30.1-26.5l2.5 2.1c.7-3.1.9-6.4.7-9.7-.9-10.5-6.8-19.3-15.2-24.4.8-1.9 1.7-3.9 2.6-6l13.2 17.7c7.3 16.7 9.1 17.4 22.2 19l7.2.1c1.4 3.6 5 6.2 9.1 6.2h.4l1.1 5.2-3.6.9c-.9.2-1.5 1.2-1.2 2.1l.1.6c.2.9 1.2 1.5 2.1 1.2l9.6-2.5c.9-.2 1.5-1.2 1.2-2.1l-.2-.6c-.2-.9-1.2-1.5-2.1-1.2l-3 .8-1-4.8 9.1-.7c3.4 13 15.3 22.6 29.3 22.6 16.7 0 30.3-13.6 30.3-30.3.4-6-1.4-11.6-4.5-16.4zm-31.9-52.3c-.1.1-.1.2-.1.3 0 .2.1.3.3.4l1.6.3-2 .4c-.2 0-.3.2-.3.4s.1.3.2.4l1.3.6-1.4-.1c-.2 0-.4.1-.4.3-.1.2 0 .4.2.5l1.1.7-4.8-.7c1.5-1.1 2.5-2.8 4.3-3.5zM129 80c-2.1 3.7-6.9 13.6-9.8 19.5l.8-21.9c3.2.2 6.2 1 9 2.4zm-11.1-2.6c.5 0 1.1 0 1.6.1l-.7 19.6-1.7-19.6c.3 0 .5-.1.8-.1zm-1.2.1l2 22.8h-.5c-.6 0-1.2.2-1.7.4L106.8 80c3.1-1.5 6.4-2.4 9.9-2.5zm-10.2 2.6l8.4 18-10.5-16.9c.7-.3 1.4-.7 2.1-1.1zm-2.5 1.4l12 19.2-19.3-12.1c1.9-2.8 4.4-5.2 7.3-7.1zm-11.9 21.7c0-5.3 1.6-10.1 4.3-14.2l17 10.6-18.2-8.5-.2.4 20.7 9.6c-.7.6-1.1 1.3-1.3 2.2l-22.1-1.9v.4l20 1.8-20.2.7v-1.1zm.1 1.5l22.2-.8V104.2l-19.6 10.4c-1.5-2.9-2.4-6.3-2.6-9.9zm2.8 10.4l17.9-9.5-16.5 11.5.2.3 17.8-12.5c.2 1 .8 1.8 1.6 2.3l-12.2 17.4.3.2 11.5-16.4-9.5 17.8c-4.6-2.4-8.6-6.3-11.1-11.1zm11.7 11.3l10.1-18.9c.4.2.9.3 1.4.3h.3l-1.9 21.1c-3.5-.1-6.8-1-9.9-2.5zm11.2 2.6h-.8l1.8-20 .7 19.9c-.6.1-1.1.1-1.7.1zm2.1-.1l-.7-21.2c.2-.1.4-.1.6-.2l9.9 18.6c-3 1.5-6.3 2.5-9.8 2.8zm10.1-3l-9.3-17.4 11.3 16.2c-.6.4-1.3.8-2 1.2zm2.4-1.5l-12.1-17.3c.8-.5 1.3-1.4 1.5-2.3l17.6 12.4c-1.8 2.8-4.2 5.3-7 7.2zm7.3-7.6l-16-11.2 17.2 9.2c-.4.6-.8 1.3-1.2 2zm1.3-2.5L122 104.1v-.1-.1l21.6.7c-.2 3.5-1 6.8-2.5 9.7zm2.6-11.1v1l-19.4-.7 19.4-1.7v1.4zm-.1-1.8l-21.7 1.9c-.1-.7-.5-1.4-1-1.9.1-.2.2-.3.3-.5l19.7-9.2c1.6 3 2.5 6.3 2.7 9.7zm-2.8-10l-17.6 8.2 16.4-10.2c.4.6.8 1.3 1.2 2zm-1.4-2.4l-17.5 11c3.2-5.4 8-13.3 10-16.9.2-.3.4-.7.6-1.1 2.7 1.9 5.1 4.3 6.9 7zm.4-22.9c.9-2.2 1.9-4.5 2.8-6.9.7 3.1 1.9 7 3.7 12.3l2.2 6.3-8.7-11.7zm118.1 35.3l-21 1.8c-.3-.9-.8-1.7-1.6-2.2l19.9-9.3c1.6 3 2.5 6.3 2.7 9.7zm-2.8-10l-17.6 8.2 16.4-10.2c.5.6.9 1.3 1.2 2zm-1.4-2.4L235 100.7l11.7-18.8c2.8 1.9 5.2 4.3 7 7.1zm-7.3-7.3l-10.3 16.5 8.2-17.7c.7.3 1.4.7 2.1 1.2zm-2.5-1.4l-9.4 20.3c-.3-.1-.7-.2-1-.3l.8-22.8c3.4.3 6.7 1.3 9.6 2.8zm-11.7-2.9c.5 0 1.1 0 1.6.1l-.7 19.6-1.7-19.6c.3 0 .6-.1.8-.1zm-1.2.1l1.9 21.5-7.1-20.7c1.7-.5 3.5-.8 5.2-.8zM217 95l-8.8-1c.7-1.8 1.6-3.5 2.6-5.1l10.4 6.5-2.9-.3-8.7-4-.2.4L217 95zm-6-6.4c1.9-2.8 4.5-5.3 7.4-7.1l9.1 14.7-5.4-.6-11.1-7zm15.9 10.5l.8.5-1.2-.6.4.1zm-8.2-17.8l2.1-1.2 7.5 16.1h-.3l-9.3-14.9zm10.4 18h.4l.9 1.4-2.5-1.5 1.2.1zm1.2.1h.5l.4 1.2c-.1 0-.2.1-.2.1l-.7-1.3zm-.6-3c-.2 0-.5-.1-.8-.1h-.1l-7.6-16.4c.8-.4 1.6-.7 2.4-1l6.1 17.5zM195 110.7c1.9-1 3.3-2.7 4.2-4.6l2.8.1c.1 1.3.4 2.7.7 3.9l-7.7.6zm2.9-14.6l3.8.4c-.3 1.1-.5 2.3-.6 3.5l-1.4-.1c-.3-1.4-.9-2.7-1.8-3.8zm4.6-2.6l-5.6-.6 17-41.5 7.9 22.7c-9 3.2-16.2 10.3-19.3 19.4zm4.7 3.5l18.1 1.9 5 2.3c-.3.2-.5.5-.7.7-.7-.1-1.6-.3-2.4-.4l-20.5-1.3c0-1 .2-2.1.5-3.2zm19.2 9.7h3c.2.4.5.7.8 1l-.3.4-6.2.5 2.7-1.9zm-3.4 1.8l-1.6.1 3.8-2h.5l-2.7 1.9zm-16.4-2.2l17.7.4-4 2.1-13.1 1c-.2-1.2-.4-2.4-.6-3.5zm.9 4.3l11-.9-9.4 5c-.6-1.3-1.1-2.7-1.6-4.1zm1.9 4.5l10.2-5.4 2.1-.2-10.9 7.6.2.3 11.4-8 6.9-.5-11.1 15.8.3.2 11.3-16.1h.1l-9.3 17.4c-4.8-2.4-8.7-6.3-11.2-11.1zm11.6 11.3l9.4-17.6 2.1-.2h.3l-1.8 20.3c-3.6-.1-6.9-1-10-2.5zm11.2 2.6h-.8l1.8-20 .7 19.9c-.6.1-1.1.1-1.7.1zm2.1-.1l-.7-20.3c.4-.1.7-.2 1-.3l9.5 17.8c-3 1.5-6.3 2.5-9.8 2.8zm10.1-3l-9.3-17.4 11.3 16.2c-.6.4-1.2.8-2 1.2zm2.4-1.5l-11.5-16.5c.9-.6 1.5-1.5 1.7-2.6l16.8 11.8c-1.8 2.9-4.2 5.4-7 7.3zm7.3-7.6l-16-11.2 17.2 9.2c-.4.6-.8 1.3-1.2 2zm1.4-2.5l-18.3-9.8v-.1-.5l20.8.7c-.2 3.5-1.1 6.8-2.5 9.7zm-16.9-10.7l19.4-1.7v2.3l-19.4-.6z"
  />
  <g>
      <path class="st3" d="M334.8 68.2H279v40.5h55.8l-20-20.3z" />
        <path class="st4" d="M327.5 106.4h-46.7v-36h46.7l-17.8 18 17.8 18zm-45.2-1h42.2l-16.7-16.9.3-.3 16.4-16.6h-42.2v33.8z" />
      <path class="st3" d="M15.3 68.2h45.1v40.5H15.3l14-20.3z" />
        <path class="st4" d="M59.1 106.4H20.4l12.5-18-12.5-18h38.7v36zm-36.6-1H58V71.5H22.5l11.8 16.9-11.8 17z" />
      <path class="st4" d="M300.8 94.1L279 108.7V59.4z" />
      <path class="st4" d="M45.5 94.1l15.3 14.6V59.4z" />
      <path class="st3" d="M45.5 53.5h255.2V94H45.5z" />
      <path class="st4" d="M298.4 91.7H48.6v-36h249.9v36zm-248.3-1h246.8V56.8H50.1v33.9z" />
  </g>
  <g id="hair">
    <path id="h1" class="st5" d="M242.1 304.8c-6.3-.4-10.7 3.5-12.9 6.9-2.8 4.5-2.2 10.4-2.2 10.4s1.8-5.5 5.8-8.1c2.4-1.5 5.9-3.2 9.2-2.2 4.2 1.2 5 6.2 4.1 9-2 5.7-9.2 8.4-18.2 3-11.8-7.1-15.8-29.3-37.4-27.2-6.1.6-11.8 3.8-15.6 8.7-3.7-4.9-9.5-8.1-15.6-8.7-21.5-2.1-25.5 20.1-37.4 27.2-9 5.4-16.3 2.7-18.2-3-1-2.8-.2-7.8 4.1-9 3.3-1 6.9.7 9.2 2.2 4 2.6 5.8 8.1 5.8 8.1s.6-6-2.1-10.4c-2.1-3.4-6.5-7.2-12.8-6.9-7.5.4-13.2 6.3-13.2 14 0 8 5.8 20.4 29.9 26.2 6.8 1.6 38.7 3.5 50.3-13.6 11.7 17.1 43.6 15.2 50.3 13.6 24.1-5.8 29.9-18.2 29.9-26.2.2-7.7-5.5-13.5-13-14z"
    />
    <path id="h2" class="st6" d="M235 305.5c-2.9-1.3-5.1-.6-6.1.2-3.8 2.8-.5 7.1-.5 7.1s-.9-2.5 1.6-4.4c.8-.6 2.2-1.3 4.3.3 1.1.9 1.2 3.9.6 5.2-1.3 2.9-4.3 5.5-10.1 6.6-17.2 3.5-23-.3-29.9-6.1-5.1-4.3.8-13.7-14.4-12.8-2.7.2-4.3 1.3-5.2 3-.9-1.6-2.6-2.8-5.2-3-15.2-.9-9.3 8.5-14.4 12.8-6.9 5.8-12.6 9.6-29.9 6.1-5.8-1.2-8.8-3.7-10.1-6.6-.6-1.4-.5-4.4.6-5.2 2-1.6 3.5-.9 4.3-.3 2.5 1.9 1.6 4.4 1.6 4.4s3.2-4.3-.5-7.1c-1-.7-3.2-1.4-6.1-.2-4 1.8-4.3 6.9-3.4 9.9 1 3.3 4.9 8.2 11.5 11.4 8.7 4.2 18.4 7.3 29.8 4.1 10.3-2.8 13.6-5.6 18.7-11.9 1.3-1.7 2.4-3.6 3.1-5.7.7 2 1.8 4 3.1 5.7 5.1 6.3 8.4 9.1 18.7 11.9 11.4 3.1 21.1.1 29.8-4.1 6.6-3.2 10.5-8.1 11.5-11.4.9-3.1.6-8.2-3.4-9.9z"
    />
    <path id="h3" d="M238.9 312.4c-4-4.1-9-3.8-11.4-2.3-5.9 3.8-3.3 11.3-3.3 11.3s-.6-4.4 4.3-7.2c1.1-.6 4.4-1.1 7.4 2.9 3.7 4.9-.8 16.4-10.4 17.8-18.7 2.7-26.4-4.6-28.1-16.2-1.1-8.1 9.1-24.2-13.3-24.2-4.4 0-7.3.6-9.1 1.8-1.9-1.2-4.7-1.9-9.1-1.8-22.4 0-12.2 16.1-13.3 24.2-1.6 11.5-9.3 18.9-28.1 16.2-9.6-1.4-14.1-12.9-10.4-17.8 3-4 6.3-3.5 7.4-2.9 4.9 2.8 4.3 7.2 4.3 7.2s2.6-7.5-3.3-11.3c-2.4-1.5-7.4-1.8-11.4 2.3-5.6 5.7-5.8 11.8-4.5 17 1.6 5.6 6.4 11.7 12.7 14.8 10.6 5.2 26.8 4.4 40.8-6.8 9-7.2 12.5-12.1 14.8-19.2 2.3 7.1 5.8 12.1 14.8 19.2 14 11.2 30.3 11.9 40.8 6.8 6.3-3.1 11.1-9.2 12.7-14.8 1.6-5.3 1.3-11.3-4.3-17z"
    />
    <path id="h4" d="M222.1 335.3s4.3 2 1.6 8.9c-2.2 5.6-13.1 7.2-16.3-4.6-3.6-13.4 7.2-29.8-7.7-43.1-6.9-6.2-17.4-4.8-24.6 3.6-7.2-8.5-17.7-9.8-24.6-3.6-14.9 13.3-4.1 29.7-7.7 43.1-3.2 11.9-14.1 10.2-16.3 4.6-2.8-6.9 1.5-8.9 1.5-8.9s-8.4 1-5.4 10.4c3.3 10.5 17 15.3 33.5 6.3 3.2-1.8 12.5-7.8 19-16.5 6.5 8.7 15.8 14.8 19 16.5 16.4 9 30.1 4.2 33.5-6.3 2.9-9.4-5.5-10.4-5.5-10.4z"
    />
    <path id="h5" d="M205.9 345.4c-3.7-13.4 11.8-32.9-5.1-46.4-7-5.6-17.6-6.7-25.8-1.2-8.2-5.4-18.8-4.4-25.8 1.2-16.9 13.5-1.4 33-5.1 46.4-4.4 15.8-14.1 11.9-14.1 11.9s.6 12.1 27.2-.5c3.1-1.5 11-6.9 17.7-14.5 6.7 7.6 14.6 13 17.7 14.5 26.6 12.6 27.2.5 27.2.5s-9.5 3.9-13.9-11.9z"
    />
    <path id="h6" d="M234.6 311.8c-17.2-18.1-48.7-18.2-57.1-13.1-.9.5-1.7 1.1-2.5 1.6-.7-.5-1.6-1.1-2.4-1.6-8.4-5.1-39.9-5-57.1 13.1-15.7 16.5-6 39.5-3.1 39.1 1.8-.3 4.8-9.6 10.5-10.6 4.3-.8 5.8 3.9 10.1 3.4 4.9-.5 4.9-5.4 8.8-5.6 3.4-.2 3.1 3.6 7 3.6 3.6 0 3.4-4.4 6.5-4.3 5 .2 4.1 4.3 7.6 4.3 4.2 0 8.8-3.3 12.1-8.2 3.3 4.9 7.9 8.2 12.1 8.2 3.5 0 2.7-4.1 7.6-4.3 3.1-.1 2.9 4.2 6.5 4.3 3.9 0 3.6-3.7 7-3.6 3.9.2 4 5.1 8.8 5.6 4.3.5 5.8-4.2 10.1-3.4 5.7 1 8.7 10.3 10.5 10.6 3 .5 12.7-22.6-3-39.1z"
    />
    <path id="h7" d="M233.7 264.9s-7.3 18.9-7.9 25.5c-.2 2 1.9 6.1 1 7.9-.7 1.5-3.8 3.1-6.4 4.2 1.8-3.8 2.3-7.4 0-7.9-1.9-.4-1.9 5.2-5.6 5.5-4.8.5-15.4-11-29.6-12-7.9-.6-8.9 3.9-8.9 3.9s-.5.7-1.1 1.8c-.6-1.2-1.1-1.8-1.1-1.8s-1-4.5-8.9-3.9c-14.2 1-24.8 12.5-29.6 12-3.8-.4-3.6-6.5-5.6-6.1-2.7.6-1.7 5.4.8 10-3-1.1-8.2-3.4-8.8-5.5-.5-1.7 2.8-4.7 3-6.4.6-7-7.4-27.3-7.4-27.3l.2 30.3-1 9.2 6.1 22.9 10.7 16.4.3-1.4 10 16.3.5-2.5 13.8 12.4 12 5.8v-1.6l7.7 3.3 14.4-7 .6 1.4 16.6-14 5-7 .7 3.5 18.7-44.3-.6-12.1.4-31.5zm-25.5 51.2s-.5 10.6-3.8 13.7c-3.2 3-13.3 3.9-13.3 3.9l-17-6.2-13.8 5.6-6.6 1.1s-7.8-3.2-9.7-5.1c-3-3.1-.8-14.9-.8-14.9 5.5 1.4 11.7 1.2 17-.5 6.8-2.1 12.5-4.2 14.8-9.2 2.3 5 8 7.1 14.8 9.2 6.5 2 14.3 2 20.6-.7l-2.2 3.1z"
    />
  </g>
  <g id="glasses-fill">
    <path id="g1" class="st9" d="M175.3 221.2H94.5v38s1.5 0 1.9.3c.2.2.4 1.3.4 1.3s.7 2.6 1 3.5c.3.8 1.2 2.7 1.6 3 .6.5 5.3.2 5.3.2h55s1.6-.2 2.1-.7c.7-.7.9-1.3 1-2.3 1.4-11.6 6.4-20.2 12.4-20.2s11 8.6 12.4 20.2c.1 1 .3 1.6 1 2.3.5.5 2.1.7 2.1.7h55s4.6.2 5.3-.2c.5-.4 1.4-2.2 1.7-3 .3-.9 1-3.5 1-3.5s.1-1.1.4-1.3c.3-.3 1.9-.3 1.9-.3v-38h-80.7z"/>
    <path id="g2" d="M87.9 232.5s.7 2.1 3.5 1.7c1.3-.1 3.3 23.6 9.4 34 3.8 6.5 19.6 9.7 29.6 9.2 20.5-1.2 27.1-13.1 28.9-16.5 4.6-8.7 6.1-14.6 8.9-20.6 2.5-5.3 7.2-5 7.2-5s4.8-.3 7.3 4.9c2.9 6 4.5 11.9 9.3 20.5 1.8 3.3 8.6 15.1 29.1 16 9.9.4 25.8-3.1 29.4-9.6 5.9-10.6 7.6-34.3 8.8-34.2 2.8.3 3.4-1.8 3.4-1.8s.3-10.6-.4-11.9c-.2-.3-22-5.5-39.6-5.3-13.6.1-39 6.5-39 6.5l-8.6.5-8.6-.3s-25.4-5.9-39.1-5.8c-17.6.1-39.3 5.6-39.5 6-.5 1.1 0 11.7 0 11.7z"/>
    <path id="g3" d="M84.3 233.7s.6 1.9 3.5 1.7c1.1-.1 2.6 14.4 6.8 24.3.7 1.5 1.4 4.3 2.2 5.6 3.7 6.1 17.6 7.3 29.1 7.1 20.9-.2 29.3-3.9 33.8-10.6 3-4.4 3.3-15.7 6.3-21.2 2.6-4.9 4.9-7.4 9.2-7.4 4.1 0 6.7 2.5 9.2 7.4 3 5.5 3.3 16.8 6.3 21.2 4.4 6.6 12.8 10.3 33.8 10.6 11.5.1 25.4-1 29.1-7.1.8-1.3 1.5-4 2.2-5.6 4.3-9.9 5.7-24.4 6.8-24.3 2.9.3 3.5-1.7 3.5-1.7s.4-9.8-.3-11c-.2-.3-21.6-6.2-39.5-6.2-22.6 0-41.3 4-41.3 4l-8.8.4h-2l-8.8-.4s-18.7-4-41.3-4c-18 0-39.3 5.9-39.5 6.2-.6 1.2-.3 11-.3 11z"/>
    <path id="g4" d="M258.6 221.7l-2.1-.1c-.2 0-.4.1-.6.2-1.8-4.9-5.5-9.7-13.2-10.9-15.3-2.5-22.8 11.3-22.8 11.3s-7.4-13.9-22.7-11.5c-7.6 1.2-11.5 5.8-13.3 10.7-.1.1-.3.2-.4.2-1.4.4-2.8-1.1-9.3-1.1-4.6 0-6.7.9-8.1 1.1-1.8-4.8-5.5-9.3-13-10.6-15.3-2.7-22.9 11.1-22.9 11.1s-7.3-14-22.6-11.7c-8 1.2-11.8 6.2-13.6 11.2h-.2l-2-.1c-.6 0-1.2.6-1.2 1.3l-.2 5c0 .7.5 1.3 1.1 1.4h1.2c0 1.7.1 3.1.2 4 .7 4 7.7 29.8 36.7 41.9 29.3-11.4 36.8-37 37.6-41 .2-.9.3-2.4.3-4.2 1.4-.6 3.6-1 6.7-1 4.9 0 7.3 1 8 2 .1.1.1.3.2.4 0 .9.1 1.7.2 2.3.7 4 7.9 29.8 37 41.6 29.2-11.6 36.6-37.3 37.3-41.3.2-1 .3-2.6.3-4.5h1c.6 0 1.2-.5 1.2-1.3l.2-5c.2-.7-.3-1.3-1-1.4z"/>
    <path id="g5" d="M260.7 225.4l-19.3-1.5c-3.4-.3-7.3-3.1-8.6-6.3l-7.2-18c-1.3-3.2-3.4-3.2-4.7 0l-7.4 17.9c-1.3 3.2-5.2 6-8.6 6.2l-8.7.6c-3.1-.8-7.1-5.7-21.1-5.7-14.3 0-18.6 6.1-22 5.9l-7.6-.6c-3.4-.3-7.3-3.1-8.6-6.3l-7.2-18c-1.3-3.2-3.4-3.2-4.7 0l-7.4 17.9c-1.3 3.2-5.2 6-8.6 6.2L89.6 225c-3.4.3-4.1 2.3-1.5 4.5l14.8 12.6c2.6 2.2 4.1 6.8 3.2 10.1l-4.7 18.8c-.8 3.3.9 4.6 3.8 2.8l16.5-10.1c2.9-1.8 7.7-1.8 10.6 0l16.4 10.3c2.9 1.8 4.6.6 3.8-2.8l-4.5-18.9c-.8-3.3.7-7.9 3.3-10.1l14.9-12.4c2.5-2.1 2.1-4-.8-4.4 2.7-.9 6-1.7 9.8-1.7 3.7 0 6.9.6 9.4 1.4-2.6.5-2.9 2.4-.5 4.4l14.8 12.6c2.6 2.2 4.1 6.8 3.3 10.1l-4.7 18.8c-.8 3.3.9 4.6 3.8 2.8l16.5-10.1c2.9-1.8 7.7-1.8 10.6 0l16.4 10.3c2.9 1.8 4.6.6 3.8-2.8l-4.5-18.9c-.8-3.3.7-7.9 3.3-10.1l14.9-12.4c2.4-2.1 1.8-4.1-1.6-4.4z"/>
    <path id="g6" d="M260.8 219.4c-2.5-7.2-50.7-2.8-65.4 4.9-.4.2-.9.5-1.3.7-5.2 1.8-14 4.7-19.1 4-5.1.7-13.8-2.1-19.1-4-.4-.2-.8-.5-1.2-.7-14.7-7.7-62.9-12.1-65.4-4.9-2 5.9 12.2 38.7 36.2 48.3 9.8 4 24.5 1.9 33.9-8 4.6-4.8 7.6-9.2 9.1-13.3 0 0 2.7-5.9 6.6-6.2 3.8.2 6.5 6.1 6.5 6.2 1.5 4 4.5 8.4 9.1 13.3 9.4 9.9 24.1 12 33.9 8 24-9.6 38.2-42.4 36.2-48.3z"/>
  </g>
  <g id="glasses-l">
    <path id="l1" class="st1" d="M151.2 252.1c-2 5.6-4.9 8.6-9.3 8.6H113c-4.4 0-7.9-3.8-7.9-8.5v-15c0-4.7 3.6-8.5 7.9-8.5h33.5c4.4 0 7.9 3.8 7.9 8.5l-3.2 14.9z"/>
    <path id="l2" class="st10" d="M130.2 219c19 1.3 34.4 3.5 31.6 19.5-.5 3.1-1.2 33.7-32.6 35.5-19.4 1.1-28.1-9.8-31.1-26-4.4-23.4 8-30.6 32.1-29z"/>
    <path id="l3" class="st10" d="M96.6 229c4.6-7 8.2-7.9 30.4-7.9 19.4 0 33.9-.2 33.3 15.1 0 1.5-1.8 20.2-5.2 24.4-4.5 5.6-9.5 7.4-29 7.3-15-.1-21.4.3-26.6-7.3-2.1-3.1-3.8-9.9-4.6-14.3-1.5-7.9-.9-13.5 1.7-17.3z"/>
    <path id="l4" class="st10" d="M159.5 238.4c-.6 3-6.6 22.2-29.8 30.7-23-9-28.6-28.3-29.1-31.3-.6-3.3-.5-15.3 11.6-17.1 12.2-1.7 18 8.7 18 8.7s6-10.3 18.1-8.3c12.1 2 11.9 14 11.2 17.3z"/>
    <path id="l5" class="st10" d="M140.8 245.2l5.3 21.9-19.1-12-19.2 11.8 5.4-21.8-17.1-14.7 22.5-1.5 8.6-20.8 8.4 20.9 22.4 1.7z"/>
    <path id="l6" class="st10" d="M155.5 256.7c-4 6.6-18.3 10.9-30.1 4.8-14.9-7.8-24.7-27.5-19-36.1 3.8-5.8 33-2.3 40.9 2.2 13.5 7.6 14.5 18.8 8.2 29.1z"/>
  </g>
  <g id="glasses-r">
    <path id="r1" class="st1" d="M245.4 252.2c0 4.7-3.6 8.5-7.9 8.5h-28.9c-4.4 0-7.3-2.9-9.3-8.6l-3.3-14.9c0-4.7 3.5-8.5 7.9-8.5h33.5c4.4 0 7.9 3.8 7.9 8.5v15z"/>
    <path id="r2" class="st10" d="M220.6 218.3c24.1-2 36.6 5 32.6 28.6-2.8 16.2-11.3 27.3-30.7 26.4-31.4-1.3-32.6-32-33.2-35-3-15.9 12.4-18.4 31.3-20z"/>
    <path id="r3" class="st10" d="M223.6 221.1c22.2 0 25.9.9 30.4 7.9 2.6 3.9 3.2 9.4 1.7 17.3-.8 4.4-2.5 11.2-4.6 14.3-5.1 7.6-11.5 7.2-26.6 7.3-19.5.1-24.6-1.7-29.1-7.3-3.3-4.2-5.1-22.9-5.2-24.4-.6-15.3 13.9-15.1 33.4-15.1z"/>
    <path id="r4" class="st10" d="M249.4 238.4c-.6 3-6.6 22.2-29.8 30.7-23-9-28.6-28.3-29.1-31.3-.6-3.3-.6-15.3 11.6-17.1 12.2-1.7 18 8.7 18 8.7s6-10.3 18.1-8.3c12.1 2 11.9 14 11.2 17.3z"/>
    <path id="r5" class="st10" d="M236.8 245.2l5.2 21.9-19.1-12-19.1 11.8 5.4-21.8-17.1-14.7 22.5-1.5 8.5-20.8 8.5 20.9 22.4 1.7z"/>
    <path id="r6" class="st10" d="M224.6 261.5c-11.8 6.2-26.1 1.9-30-4.8-6.2-10.3-5.2-21.5 8.2-29.1 7.9-4.5 37.1-8 40.9-2.2 5.6 8.6-4.2 28.3-19.1 36.1z"/>
  </g>
  <g id="text">
    <path class="st8" d="M70.2 78.8V67h2.4v11.8h-2.4zM77.6 78.8h-2.4V66.7h.6l6 6.9V67h2.4v12.1h-.6l-6-6.7v6.4zM88.8 78.8v-9.5h-2.9V67h8.3v2.3h-2.9v9.5h-2.5zM95.9 78.8V67h5.9v2.4h-3.6v2.4h3.1v2.4h-3.1v2.4h3.8V79h-6.1zM110.1 78.8l-2.4-4.5h-1.1v4.5h-2.4V67h4.7c4.2 0 4.6 5.9 1.2 6.9l2.7 4.9h-2.7zm-3.5-6.8h2.1c1.6 0 1.6-2.6 0-2.6h-2.1V72z"
    />
    <path class="st8" d="M119.8 69.2c-4.7 0-4.7 7.2 0 7.2 1 0 1.8-.3 2.3-.5l.3 2.4c-.7.3-1.8.5-2.6.5-8 0-8-12 0-12 .8 0 1.6.1 2.3.5l-.3 2.4c-.4-.2-1-.5-2-.5zM130.2 78.8v-4.7h-3.5v4.7h-2.4V67h2.4v4.7h3.5V67h2.4v11.8h-2.4zM139.1 66.6h.2l5 12.3h-2.7l-.5-1.3h-3.9l-.5 1.3H134l5.1-12.3zm1.2 8.7l-1.1-3.1-1.1 3.1h2.2zM148.4 78.8H146V66.7h.6l6 6.9V67h2.4v12.1h-.6l-6-6.7v6.4zM163.1 78.9c-7.8 0-8.2-11.7 0-12 1.4 0 2.5.4 2.8.4l-.3 2.4c-.5-.2-1.2-.5-2.5-.4-4.8.2-4.6 7.2 0 7.2.2 0 .4 0 .7-.1v-3.6h2.4V78c-.9.6-2 .9-3.1.9zM168.8 78.8V67h5.9v2.4h-3.6v2.4h3.1v2.4h-3.1v2.4h3.8V79h-6.1zM181 66.6h.2l5 12.3h-2.7l-.5-1.3h-3.9l-.5 1.3H176l5-12.3zm1.2 8.7l-1.1-3.1-1.1 3.1h2.2zM187.9 67h4.7c2.1 0 3.4 1.5 3.4 3.6 0 .9-.3 1.8-1.1 2.3.8.5 1.2 1.4 1.2 2.4 0 2-1.6 3.6-3.5 3.6h-4.7V67zm2.4 4.7H192.4c.7 0 1.1-.5 1.1-1.2s-.4-1.2-1.1-1.2h-2.1v2.4zm0 4.7H192.4c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2h-2.1v2.4zM200.5 67v9.5h3.8v2.4h-6.1V67h2.3zM206.3 78.8V67h5.9v2.4h-3.6v2.4h3.1v2.4h-3.1v2.4h3.8V79h-6.1zM225.2 78.8v-4.7h-3.5v4.7h-2.4V67h2.4v4.7h3.5V67h2.4v11.8h-2.4zM230.2 78.8V67h2.4v11.8h-2.4zM235.3 78.8V67h4.6c4.6 0 4.6 7.3 0 7.3h-2.3v4.5h-2.3zm4.4-6.8c1.6 0 1.6-2.6 0-2.6h-2.1V72h2.1zM245 75.6c1.4 1 2.8 1 3.4.9.7 0 1.3-.5 1.2-1.2 0-.7-.6-1-1.2-1.2-1.9-.7-3.5-1.6-3.5-3.6s1.4-3.5 3.3-3.6c.6 0 1.4 0 2.9.5l-.3 2.3c-1.3-.5-2.1-.5-2.4-.5-.8 0-1.2.7-1.2 1.3.1.7.6 1 1.3 1.2 1.8.7 3.4 1.7 3.4 3.6 0 2-1.4 3.5-3.6 3.6-.7 0-2.1 0-3.7-.9l.4-2.4zM255.9 78.8v-9.5H253V67h8.2v2.3h-2.9v9.5h-2.4zM263 78.8V67h5.9v2.4h-3.6v2.4h3.1v2.4h-3.1v2.4h3.8V79H263zM277.2 78.8l-2.4-4.5h-1.1v4.5h-2.4V67h4.7c4.2 0 4.6 5.9 1.2 6.9l2.7 4.9h-2.7zm-3.5-6.8h2.1c1.6 0 1.6-2.6 0-2.6h-2.1V72z"
    />
  </g>
</svg>
            
          
!
            
              html, body {
  background: #C70F4F;
}

$id-slug: (h, g, r, l);
  @each $a in $id-slug {
    @for $i from 2 through 7 {
    ##{$a}#{$i} {
      visibility: hidden;
    }
  } 
}

$turq: #A4D2B4;
$dkTurq: darken($turq, 25%);
$flesh: #F4979C;

svg {
  height: 100vh;
  margin: 0 auto;
  display: table;
}

.st0{fill:#C70F4F;} .st1{fill:$flesh;} .st2{fill:#8C1A11;} .st3{fill:#FF665B;}  .st9{fill:$dkTurq;} .st8{fill:#FCFCFC;}
.st4, .st5{fill:#3A1C31;} 
            
          
!
            
              var h1 = $("#h1"),
    g1 = $("#g1"),
    r1 = $("#r1"),
    l1 = $("#l1");

function hair() {
  var tl = new TimelineMax({
    repeat: -1,
    yoyo: true
  });

  tl.add("begin");

  // tween the hair
  for (var i = 2; i <= 7; i++) {
    tl.to(h1, 0.5, {
      morphSVG: {
        shape: "#h" + i
      },
      ease: Back.easeInOut
    }, "begin+=" + i * 1.2);
  }

  return tl;
}

function glassFill() {
  var tl = new TimelineMax({
    repeat: -1,
    yoyo: true
  });

  tl.add("start");

  // tween the glasses
  for (var i = 2; i <= 7; i++) {
    tl.to(g1, 0.5, {
      morphSVG: {
        shape: "#g" + i
      },
      ease: Back.easeInOut
    }, "start+=" + i * 1.2);
  }

  return tl;
}

function glassRight() {
  var tl = new TimelineMax({
    repeat: -1,
    yoyo: true
  });

  tl.add("start");

  // tween the glasses
  for (var i = 2; i <= 7; i++) {
    tl.to(r1, 0.5, {
      morphSVG: {
        shape: "#r" + i
      },
      ease: Back.easeInOut
    }, "start+=" + i * 1.2);
  }

  return tl;
}

function glassLeft() {
  var tl = new TimelineMax({
    repeat: -1,
    yoyo: true
  });

  tl.add("start");

  // tween the glasses
  for (var i = 2; i <= 7; i++) {
    tl.to(l1, 0.5, {
      morphSVG: {
        shape: "#l" + i
      },
      ease: Back.easeInOut
    }, "start+=" + i * 1.2);
  }

  return tl;
}

var master = new TimelineMax();
master.add("start");
master.add(hair(), "start-=2")
      .add(glassFill(), "start-=2")
      .add(glassRight(), "start-=2")
      .add(glassLeft(), "start-=2");
            
          
!
999px
Close

Asset uploading is a PRO feature.

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

Go PRO

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

Console