<svg id="me" viewBox="0 0 168 168">
  <g id="me-backdrop">
    <path id="me-backdrop-back" d="M165.2,84c0,22.6-9.3,42.2-24.2,57s-34.4,26-57,26s-44.1-9.2-58.9-24S1.7,106.6,1.7,84
			S10.2,39.8,25,25S61.4,3,84,3s43.7,7.7,58.5,22.5S165.2,61.4,165.2,84z" />
    <path id="me-backdrop-front" d="M163.2,84c0,14.6-4.3,27.6-11.1,39.3c-7,12.1-15.5,23.7-27.6,30.8
			c-11.8,6.8-25.9,11.2-40.5,11.2c-14.6,0-28.4-5-40.1-11.8c-12.1-7-23.3-16.7-30.4-28.8C6.7,112.9,5,98.6,5,84
			C5,69.4,7.2,55.4,14,43.6c7-12.1,17.8-21.9,30-28.9c11.8-6.8,25.4-9.4,40-9.4c14.6,0,27.5,3.8,39.3,10.6
			c12.1,7,22.2,16.4,29.2,28.5C159.3,56.2,163.2,69.4,163.2,84z" />
  </g>
  <g id="me-face">
    <g id="me-head">
      <path id="me-head-base" d="M124.1,88.2c-0.7-2.1,1.5-5.8-1.6-6.5c-0.3-0.1-0.5-0.1-0.8,0c-0.4,0.1-0.8,0.2-1.1,0.5
				c-0.2,0.1-0.3,0.2-0.5,0.4c-0.4,0.4-0.8,0.9-1.2,1.4c-0.4,0.6-0.7,1.3-1,1.8c-0.1,0.2-0.2,0.5-0.3,0.7l-2.5-2.4l0-0.6
				c0.5-4.2-4.5-12.6-3.1-15.5c5.2-10.3-3.7-24.5-10.2-26.4c-6.5-2-13.9,3.2-20.1,4c-6.3,0.8-18.2-2.1-18.2-2.1
				c-15.7,5.5-8,23-8,26.2c0,2.3-3.7,11-5.8,15.6c0,0,0-0.1,0-0.1c-0.3-0.5-0.6-1.1-1-1.6c-0.4-0.6-0.9-1.1-1.4-1.4
				c-0.3-0.2-0.6-0.3-0.9-0.3c-0.3,0-0.5,0-0.8,0c-3.1,0.8-0.9,4.4-1.6,6.5c-0.7,2.1,0.2,19.2,7.1,19.6c0.1,0,0.1,0,0.2,0
				c0.3,0,0.5,0,0.8,0c0,0,0.1,0,0.1,0c0.5,3.1,1.1,5.9,1.7,8.1c3.3,12.5,15.2,20.6,18,22.1c2.8,1.4,12.2,1.3,12.2,1.3
				s9.4,0.1,12.2-1.3c2.8-1.4,15.9-9.3,18-22.1c0.4-2.5,0.9-5.2,1.3-8.1c0.1,0,0.2,0,0.4,0c0.3,0,0.5,0,0.8,0c0.1,0,0.1,0,0.2,0
				C123.9,107.5,124.8,90.3,124.1,88.2z" />
      <path id="me-outline-left" d="M118.9,83.9c-0.4,0.6-0.7,1.3-1,1.8c0,5.1-0.4,14-2,22c0.3,0,0.5,0,0.8,0
				c0.1,0,0.1,0,0.2,0C118.7,98.6,118.9,88.4,118.9,83.9z" />
      <path id="me-outline-right" d="M49.7,84.9c-0.3-0.5-0.6-1.1-1-1.6c0,3.5,0.2,14.4,2.3,24.4c0.1,0,0.1,0,0.2,0
				c0.3,0,0.5,0,0.8,0C50.2,99,49.8,89.5,49.7,84.9z" />
      <path id="me-hair" d="M47.3,82c0.5,0.3,1,0.8,1.4,1.4c0.4,0.5,0.7,1.1,1,1.6c0,0,0,0.1,0,0.1c2-4.6,5.8-13.2,5.8-15.6
				c0-3.2-7.8-20.7,8-26.2c0,0,11.9,2.9,18.2,2.1c6.3-0.8,13.6-6,20.1-4c6.5,2,15.4,16.2,10.2,26.4c-1.5,2.9,3.5,11.3,3.1,15.5
				l0,0.6l2.5,2.4c0.1-0.2,0.2-0.4,0.3-0.7c0.3-0.6,0.6-1.2,1-1.8c0.4-0.5,0.7-1,1.2-1.4c0.1-0.1,0.3-0.3,0.5-0.4
				c0.4-0.2,0.7-0.4,1.1-0.5c0-14.2-0.5-31-10.3-41.2c0,0,0,0,0-0.1c-5.1-7.3-16.5-14.4-16.5-14.4l-2.4,2.2L86,25.3l-1.3,1.6
				l-6.9-4.2c-0.5,1.5-3.1,4.3-3.1,4.3h-4.2l-3.1,3h-4.3c-1.7,3.3-6.8,10.4-8.5,12.7c-7.9,10.3-8.3,25.7-8.3,38.9
				C46.7,81.7,47,81.8,47.3,82z" />
    </g>
    <g id="me-beard">
      <path id="me-beard-main" d="M103.6,129.1c-0.4-3.4-0.2-6.9-0.6-10.3c-0.2-1.7-2.8,0-2.7,1.4c0.2,1.7,0.2,3.3,0.3,5
				c-0.9-0.9-2.1-1.4-3.5-1.5c-0.4,0-0.8,0.5-0.8,0.9c0.2,2.3,0.4,4.6,0.3,6.9c-0.8-0.9-1.6-1.7-2.7-2.4c-0.5-0.3-1,0.2-1.1,0.7
				c-0.2,1.4,0.1,4.2-2,3.6c-0.6-0.2-1.6-2.3-2.2-2.8c-0.3-0.2-0.7,0-0.9,0.3c-2.2,3-2.4,3.7-4.8,0.8c-0.2-0.3-0.6-0.1-0.7,0.1
				c-2.1,2.9-3.3,4.3-5,0.1c-0.1-0.2-0.4-0.3-0.6-0.2c-1.9,1.3-2.4,2.6-3.6,0.1c-0.9-1.7-1.1-3.6-2.1-5.4c-0.1-0.2-0.5-0.1-0.7,0
				c-0.7,0.6-1.3,1.3-2,2c-0.1-3.3-0.5-6.7-1.5-9.8c-0.5-1.7-3,0-2.7,1.4c0.9,3.1,1.4,6.4,1.5,9.6c-0.7,0.6-1.1,1.5-0.8,2.3
				c0.8,2.6,3.4,4.5,5.5,6c0.6,0.4,1.3,1.1,2.1,1.7c-0.1,0.9,0.2,1.6,1.3,1.8c4.4,0.5,9.1-0.1,13.5-0.4c2.4-0.2,7.9,0.4,9.5-1.9
				c0.1-0.2,0.2-0.4,0.3-0.6c2.8-2.1,6.2-3.9,7.1-7.6C104.2,130,104,129.4,103.6,129.1z" />
      <path id="me-beard-patch" d="M89.7,125.5c-0.5-1-1.2-1.8-2.1-2.5c-0.1-0.1-0.3-0.1-0.4,0c-1.4,0-2.9,0.4-4.3,0.4
				c-1.7,0-3.4-0.2-5-0.8c-0.4-0.2-0.7,0.5-0.4,0.7c-0.6,1.3-1.1,2.6-1.5,4c-0.2,0.6,0.2,1.1,0.8,0.8c0.8-0.4,1.6-0.8,2.3-1.3
				c0.3,0.6,0.7,1.2,1.1,1.8c0.3,0.4,0.8,0.2,1-0.2c0.5-0.6,0.9-1.2,1.4-1.7c1,1,2,1.8,3.3,2.5c0,0,0,0,0,0l0.2,0.2l0.1-0.1
				c0.3,0,0.6-0.3,0.6-0.5l0.1-0.1v-0.4c0-1,0-2,0.6-2.3l0.9-0.1c0.2,0,0.4,0.1,0.6,0.2C89.5,126.2,89.9,125.8,89.7,125.5z" />
    </g>
    <path id="me-mouth" d="M101.4,108.9c-0.1-0.3-0.3-0.4-0.5-0.5c0-0.1-0.1-0.2-0.3-0.2c-11.1-0.9-22.7-0.1-33.9,0.4
			c-0.3-0.2-0.9-0.2-0.9,0.3c-0.4,7.8,9.5,11.1,15.8,10.1c0,0,0,0,0,0c5.2,2,11.6,0.9,16-2.6C99.4,114.9,102.1,111.4,101.4,108.9z
			 M94.3,116.1c-3.9,1.9-8.4,2.4-12.7,2.5c0,0,0,0,0,0c-2.7-0.6-5.4-1-8.1-1.9c-3.7-1.2-5.7-3.5-6.5-7.2c10.8,0.1,22,0.6,32.8-0.6
			c0,0.1,0,0.1,0,0.2C100,112.1,96.8,114.9,94.3,116.1z" />
    <g id="me-eyes">
      <path id="me-eye-left" d="M101.3,81.3c0,2-2,3.9-4,3.7c-2.4-0.2-3.4-2-3.4-4.1c0-1.6,1.2-3.3,4-3.3C100,77.6,101.3,79.2,101.3,81.3z" data-closed-d="M103.5,82.4c0,2-3.8,3.9-7.6,3.7c-4.6-0.2-6.4-2-6.4-4.1c0-1.6,1.6,2.3,7,2.3C100.3,84.3,103.5,81.3,103.5,82.4z"
      />
      <path id="me-eye-right" d="M74.4,81.5c0-0.6,0-1.2-0.1-1.6c-0.9-2.9-4.9-3-6.5-0.7c-0.8,1.1-0.9,2.6-0.3,3.8
				c0.7,1.4,2.3,1.9,3.8,1.8c0.5,0,0.9-0.1,1.3-0.3c0.4-0.1,0.7-0.3,1-0.6c0.2-0.2,0.3-0.4,0.4-0.6c0.3-0.4,0.5-1,0.5-1.6
				C74.4,81.6,74.4,81.5,74.4,81.5z" />
    </g>
    <g id="me-moustache">
      <path id="me-moustache-left" d="M104.3,104.1c-0.2-0.2-0.6-0.3-0.8-0.1c-0.1,0.1-0.3,0.2-0.4,0.3
				c-0.8-1-1.8-1.7-3.1-1.3c-0.4,0.1-0.6,0.4-0.8,0.7c-0.9,0.1-1.7,0.4-2.6,0.4c-1.4-0.1-2.3-1.6-3.8-1.6c-1.3,0-2,0.8-3.1,1.2
				c-2,0.6-2.6-0.7-4.4-0.8c-0.3,0-0.4,0.4-0.2,0.5c0.8,0.8,1.6,1.8,2.8,2.1c1.3,0.3,2.2-0.4,3.4-0.7c1.4-0.3,2.3,0.1,3.6,0.6
				c0.5,0.2,0.9,0.6,1.5,0.6c1,0,2.1-0.6,3.1-1.1c0,0,0,0,0,0c0.4,0.4,0.9,0.6,1.3,1.1c0.2,0.2,0.3,0.4,0.4,0.7
				c-0.8,1.6-0.7,3.9-0.7,5.5c0,1.2,1.4,1.6,2.2,0.9c1.3-1,1.7-2.5,2-4.1C104.9,107.6,105.5,105.3,104.3,104.1z" />
      <path id="me-moustache-right" d="M79.8,102.8c-1.5,0-2.9,0.7-4.4,0.4c-0.9-0.2-1.5-0.7-2.4-0.8c-2.3-0.3-6.4,4-8.3,2.2
				c-1.1-1-2.5-0.2-2.7,1.1c-0.3,2.6,1.5,4.9,2.1,7.3c0.3,1.3,2.2,1.2,2.5,0c0.5-2-0.2-3.9-0.9-5.8c0.2-0.1,0.5-0.2,0.8-0.3
				c1.5-0.6,4.5-2.6,6-2.6c0.9,0,1.7,0.7,2.8,0.8c1.6,0.1,3.4-0.7,4.7-1.5C80.5,103.5,80.3,102.8,79.8,102.8z" />
    </g>
    <g id="me-eyebrows">
      <path id="me-eyebrow-left" d="M108.4,73.2c-1.6-2-4.2-3.1-6.7-3.6c-0.2-0.1-0.5-0.2-0.8-0.3c-4.3-0.4-10.1,1-12.4,5
				c-0.2,0.4,0.2,0.9,0.6,0.8c1.9-0.5,3.7-1.5,5.6-2c1.8-0.5,3.8-0.6,5.7-0.6c2.2,0.4,4.4,1.2,5.9,2.8
				C107.6,76.8,109.6,74.7,108.4,73.2z" />
      <path id="me-eyebrow-right" d="M79.8,74.2c-3-3.9-9.1-4.9-13.7-4.3c-0.3,0-0.6,0.2-0.8,0.3c-2.6,0.8-4.7,2.3-6.4,4.5
				c-1,1.4,1.3,3.2,2.4,1.8c1.4-1.8,3.3-3,5.5-3.5c2.1-0.1,4.2-0.1,6.2,0.3c2.1,0.4,4.1,1.3,6.2,1.7C79.8,75.2,80.1,74.6,79.8,74.2z
				" />
    </g>
    <path id="me-nose" d="M93.8,98.5c-0.7,0.1-1.4,0.2-2.1,0.3c1.7-7.7-0.2-18-2.1-25.3c-0.2-0.7-1.3-0.6-1.3,0.2
			c0,4.3,0.7,8.6,1,13c0.3,4.1-0.2,8.5,0.4,12.5c-2.1,0.4-4.2,0.7-6.4,0.7c-2.9,0-5.6-0.8-8.4-1.2c-1.2-0.2-1.9,1.3-0.8,2
			c5.2,3.4,15.4,2.9,20.4-0.6C95.2,99.4,94.7,98.3,93.8,98.5z" />
  </g>
</svg>
html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  display: flex;
}

#me {
  margin: auto;
  height: auto;
  width: 75%;
  max-width: 252px;
}

#me-backdrop-back,
#me-backdrop-front {
  fill: #71C7F2;
}

#me-backdrop-back {
  opacity: 0.5;
}

#me-head-base {
  fill: #FFFFFF;
}

#me-outline-left,
#me-outline-right,
#me-mouth,
#me-nose {
  fill: #12A1E9;
}

#me-hair,
#me-beard,
#me-eyes,
#me-moustache,
#me-eyebrows {
  fill: #095175;
}
/* Store components for easy reference */

var me = document.getElementById('me');
var backdrop = document.getElementById('me-backdrop-back');
var face = document.getElementById('me-face');
var mouth = document.getElementById('me-mouth');
var moustache = document.getElementById('me-moustache');
var eyeLeft = document.getElementById('me-eye-left');
var eyebrowLeft = document.getElementById('me-eyebrow-left');
var eyebrowRight = document.getElementById('me-eyebrow-right');

var eyeOpen = eyeLeft.getAttribute('d');
var eyeClosed = eyeLeft.getAttribute('data-closed-d');

/* Backdrop */

TweenMax.to(backdrop, 5, {
  rotation: 360,
  svgOrigin: '84 84',
  repeat: -1,
  ease: Linear.easeNone
});

/* Wink */

var makeWinkTimeline = function (ease, reverse, duration) {
  duration = duration || 0.3;
  return new TimelineMax()
    .to(eyeLeft, duration, {
      morphSVG: reverse ? eyeOpen : eyeClosed,
      ease: ease
    }, 0)
    .to(face, duration, {
      rotation: reverse ? 0 : 2,
      svgOrigin: '84 84',
      ease: ease
    }, 0)
    .to(mouth, duration, {
      rotation: reverse ? 0 : -2,
      svgOrigin: '64 103',
      ease: ease
    }, 0)
    .to(moustache, duration, {
      rotation: reverse ? 0 : -3,
      svgOrigin: '64 103',
      ease: ease
    }, 0)
    .to(eyebrowLeft, duration, {
      rotation: reverse ? 0 : 6,
      svgOrigin: '87 76',
      ease: ease
    }, 0)
    .to(eyebrowRight, duration, {
      rotation: reverse ? 0 : 8,
      svgOrigin: '80 74',
      ease: ease
    }, 0);
};

var winkTimeline = new TimelineMax({ paused: true })
  .add(makeWinkTimeline(Cubic.easeOut))
  .add(makeWinkTimeline(Quad.easeInOut, true, 0.35), '+=0.25');

var wink = function () {
  if (!winkTimeline.isActive()) {
    winkTimeline.restart();
  }
};

me.addEventListener('touchstart', wink);
me.addEventListener('mouseenter', wink);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js
  2. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182