<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 400" enable-background="new 0 0 600 400" xml:space="preserve">
   
    <circle id="head" cx="300" cy="191" r="124.3"/>
  
    <path id="mouth" d="M258.3,235c2.6,20.7,20.3,36.7,41.7,36.7c21.4,0,39-16,41.7-36.7L258.3,235L258.3,235z"/>
  
    <g id="eyes">
        <path d="M344.9,216.4
          c0-10.9,5.1-19.7,11.5-19.7s11.5,8.8,11.5,19.7"/>
        <path d="M232,216.4
          c0-10.9,5.1-19.7,11.5-19.7c6.3,0,11.5,8.8,11.5,19.7"/>
    </g>
  
    <g id="teeth">
        <path d="M269.2,235c0.7,7.6,1.6,12.2,2.6,12.2c1,0,1.9-4.6,2.6-12.2H269.2z"/>
        <path d="M325.6,235c0.7,7.6,1.6,12.2,2.6,12.2c1,0,1.9-4.6,2.6-12.2H325.6z"/>
    </g>
  
    <path id="nose" d="M300.3,194c-10,0-19.1,2.4-26.1,6.3c0.6,2.7,1.4,5.2,2.3,7.5c15.9-0.5,15.9,6.7,6.2,10.6
        c8.2,9.6,27.8,11.4,35.5,1.4c-11.3-6.3-5.6-11.3,5.2-10.2c0.9-2.8,1.7-6,2.3-9.6C318.9,196.3,310,194,300.3,194z"/>
</svg>
//COLORS
$background: #50313E;
$face: #757472;
$face-stroke: #616161;
$nose: #101010;
$mouth: #d14d37;
$mouth-stroke: rgba(0, 0, 0, 0.37);
$teeth: #FFF;
$eyes: rgba(255, 255, 255, 0.56);
$eyes-stroke: #FF6A6A;


body {
  background-color: $background;
  transition: background-color .5s ease;
  overflowx: hidden;
}

svg{
  animation: moving-head 3s linear infinite;
}

#head {
  fill: $face; 
  transition: opacity .5s ease;
  animation: moving-head-inner 3s linear infinite;
  stroke-width: 6px;
  stroke: $face-stroke;
}

#nose {
  fill: $nose;
  transition: fill .5s ease;
}

#mouth {
  fill: $mouth;
  stroke: $mouth-stroke;
  stroke-width: 5px;
}

#teeth path {
  fill: $teeth;
  transform-origin: 0 0%;
  transform: translateY(2px) rotateX(-70deg);

  &.move-teeth{
    animation: growing-teeth .5s linear infinite;
  }
}

#eyes{
  transform-origin: 0 100%;
  animation: moving-eyes 3s linear infinite;
}

#eyes path {
  fill: $eyes;
  stroke: $eyes-stroke;
  stroke-width: 0px;
  stroke-opacity: 1;
  transition: all .5s ease;
}

@keyframes moving-head{
  0%{
    transform: translateY(-25%) rotatex(10deg) rotateY(0deg);
  }
  1%{
    transform: translateY(-25%) rotatex(10deg) rotateY(0deg);
  }
  7%{
    transform: translateY(-23%) rotatex(0deg) rotateY(25deg);
  }
  43%{
    transform: translateY(23%) rotatex(0deg) rotateY(25deg);
  }
  49%{
    transform: translateY(25%) rotatex(10deg) rotateY(0deg);
  }
  51%{
    transform: translateY(25%) rotatex(10deg) rotateY(0deg);
  }
  57%{
    transform: translateY(23%) rotatex(0deg) rotateY(25deg);
  }
  93%{
    transform: translateY(-23%) rotatex(0deg) rotateY(25deg);
  }
  99%{
    transform: translateY(-25%) rotatex(10deg) rotateY(0deg);
  }
  100%{
    transform: translateY(-25%) rotatex(10deg) rotateY(0deg);
  }
}

@keyframes moving-head-inner{
  0%{
    transform: translateY(70px);
  }
  50%{
    transform: translateY(10px);
  }
  100%{
    transform: translateY(70px);
  }
}

@keyframes moving-eyes{
  0%{
    transform: rotateX(80deg);
  }
  7%{
    transform: rotateX(0deg);
  }
  43%{
    transform: rotateX(0deg);
  }
  50%{
    transform: rotateX(80deg);
  }
  57%{
    transform: rotateX(0deg);
  }
  93%{
    transform: rotateX(0deg);
  }
  100%{
    transform: rotateX(80deg);
  }
}

@keyframes growing-teeth{
  0%{
    transform: translateY(2px) rotateX(0deg);
  }
  50%{
    transform: translateY(2px) rotateX(-70deg);
  }
  100%{
    transform: translateY(2px) rotateX(0deg);
  }
}
View Compiled
$(document).ready(function() {  

	var audio = new Audio('http://free-screensavers-backgrounds.com/ringtones/funny/witchlaugh.mp3'),
	prevNoseColor = $('#nose').first().css('fill'),
	prevEyesColor = $('#eyes path').first().css('fill'),
	prevEyesStrokeWidth = $('#eyes path').first().css('stroke-width'),
	prevBackgroundColor = $('body').first().css('background-color'),
	evilNoseColor = '#545454',
	evilEyesColor = 'rgba(0, 0, 0, 0.67)',
	evilEyesStrokeWidth = '20px',
	evilBackgroundColor = '#30292c';


    $('#head').mouseover( function (evt) {
      audio.pause();
      audio.currentTime = 0;
      audio.play();
      $('#head').first().css('opacity', '0');
      $('#nose').first().css('fill', evilNoseColor);
      $('#eyes path').css('fill', evilEyesColor).css('stroke-width', evilEyesStrokeWidth);
      $('#teeth path').attr('class','move-teeth');
      $('body').first().css('background-color', evilBackgroundColor);
    });

    $('#head').mouseout( function (evt) {
      $('#head').first().css('opacity', '1');
      $('#nose').first().css('fill', prevNoseColor);
      $('#eyes path').css('fill', prevEyesColor).css('stroke-width', prevEyesStrokeWidth);
      $('#teeth path').attr('class','');
      $('body').first().css('background-color', prevBackgroundColor)
    });
});

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