<div id="main-ctr" class="standard">
  <svg xmlns="http://www.w3.org/2000/svg" width="151" height="110" viewBox="0 0 151 110">
    <g id="Page-1" fill="none" fill-rule="evenodd">
      <circle id="face" cx="75" cy="55" r="50" fill="#FFEB97"/>
      <g id="face-components">
        <path id="wk-l-eye" stroke="#000" stroke-width="3" d="M55 59.12C55 54.7 51.418 51 47 51s-8 3.7-8 8.12" stroke-linecap="round"/>
        <path id="wk-r-eye" stroke="#000" stroke-width="3" d="M110 59c0-4.418-3.582-8.12-8-8.12s-8 3.702-8 8.12" stroke-linecap="round"/>
        <path id="sm-mouth-3" stroke="#000" stroke-width="3" d="M47.34 72.117s6.627 11.526 26.77 11.526 28.482-12.926 28.482-12.926" stroke-linecap="round"/>
        <path id="hp-love" fill="#F9767E" d="M32.72 45.607h.003L31.42 56.22l-10.612-1.303c-1.4-.167-2.735-.87-3.67-2.07-1.864-2.383-1.44-5.827.944-7.69 1.122-.878 2.48-1.248 3.797-1.146.2-1.34.893-2.608 2.045-3.508 2.384-1.863 5.828-1.44 7.69.945.96 1.226 1.313 2.733 1.106 4.16z"/>
        <path id="sm-mouth-2" stroke="#000" stroke-width="3" d="M57.786 79.82s12.038 6.573 26.507.926c14.47-5.647 17.3-18.03 17.3-18.03" stroke-linecap="round"/>
        <path id="sm-mouth-1" stroke="#000" stroke-width="3" d="M63.5 81.903s2.91 2.202 11.502 2.202c8.59 0 11.502-2.202 11.502-2.202" stroke-linecap="round"/>
        <path id="st-mouth" stroke="#000" stroke-width="3" d="M61.5 76.903h27.003" stroke-linecap="round"/>
        <path id="st-l-eye" stroke="#000" stroke-width="5" d="M47 63.5c1.38 0 2.5-1.12 2.5-2.503S48.38 58.5 47 58.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
        <path id="st-r-eye" stroke="#000" stroke-width="5" d="M101.5 64c1.38 0 2.5-1.12 2.5-2.503S102.88 59 101.5 59 99 60.114 99 61.497C99 62.88 100.12 64 101.5 64z" stroke-linecap="round"/>
        <path id="hg-l-eye" stroke="#000" stroke-width="5" d="M47 53.5c1.38 0 2.5-1.12 2.5-2.503S48.38 48.5 47 48.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
        <path id="hg-r-eye" stroke="#000" stroke-width="5" d="M101.5 54c1.38 0 2.5-1.12 2.5-2.503S102.88 49 101.5 49 99 50.114 99 51.497C99 52.88 100.12 54 101.5 54z" stroke-linecap="round"/>
        <path id="rg-mouth" stroke="#000" stroke-width="3" d="M60.9 79.478s4.24-3.546 13.496-3.546c9.255 0 14.503 3.546 14.503 3.546" stroke-linecap="round"/>
        <path id="rg-l-eye" stroke="#000" stroke-width="3" d="M39.5 57.5s4.85 1.294 8.11 2.665c3.26 1.372 6.89 3.335 6.89 3.335" stroke-linecap="round"/>
        <path id="rg-r-eye" stroke="#000" stroke-width="3" d="M108.5 57.5s-4.85 1.294-8.11 2.665C97.13 61.537 93.5 63.5 93.5 63.5" stroke-linecap="round"/>
        <path id="mouth" stroke="#000" stroke-width="3" d="M61.5 76.903h27.003" stroke-linecap="round"/>
        <path id="l-eye" stroke="#000" stroke-width="5" d="M47 63.5c1.38 0 2.5-1.12 2.5-2.503S48.38 58.5 47 58.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
        <path id="r-eye" stroke="#000" stroke-width="5" d="M101.5 64c1.38 0 2.5-1.12 2.5-2.503S102.88 59 101.5 59 99 60.114 99 61.497C99 62.88 100.12 64 101.5 64z" stroke-linecap="round"/>
      </g>
    </g>
  </svg>
  <p>Click the expressions below.</p>
  <div class="buttons-ctr">
    <button class="standard active">standard</button>
    <button class="wink">wink</button>
    <button class="wink">rage</button>
    <button class="wink">happy</button>
  </div>
</div>
@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100);

html,
body {
  display: table;
  width: 100%;
  height: 100%;
  background: white;
}

#main-ctr {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

svg {
  @include transform(scale(1.85));
}

p {
  margin-top: 80px;
  margin-bottom: 15px;
  font-family: sans-serif;
  color: #999;
  font-size: 100;
  letter-spacing: 2px;
  line-height: 1.25;
  font-size: 16px;
}

.buttons-ctr {
  
  button {
    border: 1px solid black;
    padding: 10px 15px;
    background: white;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 3px;
    color: black;
    text-transform: capitalize;
    font-family: "roboto";
    letter-spacing: 2px;
    font-size: 14px;
    transition: .3s all ease;
    pointer-events: auto;
    
    &.active {
      background: #FFEB97;
      pointer-events: none;
    }
    
    &:focus {
      outline: none;
    }
  }
}

.copyright {
  @include position(fixed, x 15px 15px x);
  font-family: "Roboto";
  
  span {
    line-height: 36px;
    color: #999;
    margin-right: 10px;
    font-weight: 300;
    
    a {
      font-weight: 400;
      text-decoration: none;
      color: #ea4c89;
    }
  }
  
  .balapa {
    width: 30px;
    height: 30px;
    display: block;
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/profile/profile-512_4.jpg");
    background-size: cover;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,.75);
    float: right;
  }
}

#wk-l-eye,
#wk-r-eye,
#sm-mouth-1,
#sm-mouth-2,
#sm-mouth-3,
#st-l-eye,
#st-r-eye,
#rg-l-eye,
#rg-r-eye,
#hg-l-eye,
#hg-r-eye,
#st-mouth,
#rg-mouth,
#hr-mouth {
  visibility: hidden;
}
View Compiled
$(function(){
  
  $(document).ready(function(){
    
    var mainCtr = $("#main-ctr"),
        lEye = $("#l-eye"),
        rEye = $("#r-eye"),
        mouth = $("#mouth"),
        hpLove = $("#hp-love"),
        button = $("button");
    
    // animatable var
    
    var wkREye = "#wk-r-eye",
        wkLEye = "#wk-l-eye",
        smMouth1 = "#sm-mouth-1",
        smMouth2 = "#sm-mouth-2",
        smMouth3 = "#sm-mouth-3",
        stREye = "#st-r-eye",
        stLEye = "#st-l-eye",
        rgREye = "#rg-r-eye",
        rgLEye = "#rg-l-eye",
        hgREye = "#hg-r-eye",
        hgLEye = "#hg-l-eye",
        stMouth = "#st-mouth",
        rgMouth = "#rg-mouth";
    
    var tl = new TimelineMax({});
    tl.timeScale(1.25);

    tl.set(hpLove, {
      opacity: 0,
      scale: .8
    });
      MorphSVGPlugin.convertToPath("circle");
    
    // functions

    // rage
    function raging(){
      tl
        .to(lEye, .3, {
          delay: .3,
          morphSVG: rgLEye,
          strokeWidth: 3
        }, "-=.3")
        .to(rEye, .3, {
          morphSVG: rgREye,
          strokeWidth: 3
        }, "-=.3")
        .to(mouth, .3, {
          morphSVG: rgMouth
        }, "-=.3")
        .to([lEye, rEye, mouth], .3, {
          y: "-15px"
        })
        .to([lEye, rEye, mouth], .3, {
          delay: .6,
          y: "15px"
        })
        .to([lEye, rEye, mouth], .3, {
          y: "0"
        }, "-=.15")
        .to(lEye, .3, {
          morphSVG: {
            shape: stLEye,
            shapeIndex: 0
          },
          strokeWidth: 5
        })
        .to(rEye, .3, {
          morphSVG: stREye,
          strokeWidth: 5
        }, "-=.3")
        .to([lEye, rEye], .15, {
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
    }
    
    // happy
    function happy(){
      tl
        .to(lEye, .3, {
          morphSVG: wkLEye,
          strokeWidth: 3
        })
        .to(rEye, .3, {
          morphSVG: wkREye,
          strokeWidth: 3
        }, "-=.3")
        .to(mouth, .3, {
          morphSVG: smMouth3
        }, "-=.3")
        .to([lEye, rEye, mouth], .3, {
          delay: .6,
          x: "-5px"
        })
        .to(lEye, .3, {
          morphSVG: hgLEye,
          strokeWidth: 5
        }, "-=.3")
        .to(lEye, .15, {
          delay: .6,
          scaleY: 0, transformOrigin: "center center",
        })
        .to(lEye, .15, {
          scaleY: 1
        })
        .to(hpLove, .3, {
          opacity: 1,
          x: "-7.5px"
        }, "-=.3")
        .to(hpLove, .3, {
          opacity: 0,
          y: "-7.5px"
        }, "-=.15")
        .to(lEye, .3, {
          delay: .6,
          morphSVG: wkLEye,
          strokeWidth: 3
        }, "-=.3")
        .to([lEye, rEye, mouth], .3, {
          delay: .6,
          x: "0px",
        })
        .set(hpLove, {
          x: "0px",
          y: "0px"
        })
    }
    
    // smAnim
    
    function smAnim(){
      tl
        .to(rEye, .3, {
          delay: .6,
          morphSVG: hgREye,
          strokeWidth: 5
        })
        .to(lEye, .3, {
          morphSVG: hgLEye,
          strokeWidth: 5
        }, "-=.3")
        .to(mouth, .3, {
          morphSVG: smMouth1
        }, "-=.3")
        .to([lEye, rEye], .15, {
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
        .to([lEye, rEye], .15, {
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
    }
    
    // wink
    function wink(){
      tl
        .to(lEye, .3, {
          morphSVG: hgLEye,
          strokeWidth: 5
        })
        .to(rEye, .3, {
          morphSVG: wkREye,
          strokeWidth: 3
        }, "-=.3")
        .to(mouth, .3, {
          morphSVG: smMouth1
        }, "-=.3")
        .to(mouth, .3, {
          morphSVG: smMouth2
        }, "-=.3")
    }
    
    // standardAnim
    function standardAnim(){
      tl
        .to([lEye, rEye], .15, {
          delay: .6,
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
        .to([lEye, rEye], .15, {
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
        .to([lEye, rEye, mouth], .3, {
          x: "-5px"
        })
        .to([lEye, rEye], .15, {
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
        .to([lEye, rEye, mouth], .3, {
          x: "10px"
        })
        .to([lEye, rEye], .15, {
          scaleY: 0, transformOrigin: "center center",
        })
        .to([lEye, rEye], .15, {
          scaleY: 1
        })
        .to([lEye, rEye, mouth], .3, {
          x: "0px"
        })
    }
    
    // standard
    function standard(){
      tl
        .to(lEye, .3, {
          morphSVG: stLEye,
          strokeWidth: 5
        })
        .to(rEye, .3, {
          morphSVG: stREye,
          strokeWidth: 5
        }, "-=.3")
        .to(mouth, .3, {
          morphSVG: stMouth
        }, "-=.3")
    }
    
    standardAnim();
    
    button.on("click", function(){
      var className = $(this).text();
      mainCtr.attr("class", className);
      
      $(this).addClass("active").siblings().removeClass("active");
      
      if(mainCtr.hasClass("standard")) {
        standard();
        standardAnim();
      }

      if(mainCtr.hasClass("wink")) {
        wink();
        smAnim();
      }

      if(mainCtr.hasClass("happy")) {
        happy();
        smAnim();
      }

      if(mainCtr.hasClass("rage")) {
        raging();
      }
    });
    
  });
  
  // copy
  balapaCop("Interactive SVG Emoji", "#999");
  
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js?r=19
  5. https://codepen.io/balapa/pen/c58fffe58d661ae3d4b168a43eb3b2b8.js