<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="M332.2,235l-0.5,10.7l-11.9-0.6l0.5-10.2h-5.6l1.3,8.8l-11.8,1.7l-1.6-10.6h-6.2l1.2,9.3l-9.6,1.2
			l-1.3-10.5h-6.4v9.9h-9.7V235h-12.2c1.2,9.8,5.8,18.5,12.6,25l1.2-5.4l9.5,2.1l-2.1,9.6c2.1,1.2,4.4,2.2,6.7,3l-0.8-6.7l9.6-1.2
			l1.3,10c1.3,0.1,2.5,0.2,3.8,0.2c21.4,0,39-16,41.7-36.7H332.2z"/>

	<g id="eyes">
		<path d="M344.9,216.4c0-10.9,5.1-19.7,11.5-19.7s11.5,8.8,11.5,19.7H344.9z"/>
		<path d="M232,216.4c0-10.9,5.1-19.7,11.5-19.7c6.3,0,11.5,8.8,11.5,19.7H232z"/>
	</g>

	<polygon id="nose" points="295,185 281.5,216.5 312.5,216 	"/>

</svg>
body {
  background: #000;
  overflow:hidden;
}

#head {
  fill: #000;
  animation:
  	face ease-out 1s infinite;
}

#mouth {
  fill: #000;
  animation:
  	wobble 2s linear infinite;
}

#eyes path {
  fill: #000;
}
#eyes path:nth-child(1){
	animation:
  	wobbleupdownright 4s linear infinite,
  	fire ease-out 0.25s infinite;
}
#eyes path:nth-child(2){
	animation:
  	wobbleupdownleft 4s linear infinite,
  	fire ease-out 0.25s infinite;
}
#nose {
	fill: #000;
  animation:
  	wobble 2s linear infinite;
}
svg{
  animation:
  	zoomout linear 0.125s infinite;
}
/* Animation */
@keyframes wobble {
  0% {transform: translate(0% 0%);}
  25% {transform: translate(-5%, 0%);}
  50% {transform: translate(0%, 0%);}
  75% {transform: translate(15%, 0%);}
}
@keyframes wobbleupdownleft {
  0% {transform: translate(0% 0%) rotate(0);}
  15% {transform: translate(0%, -150%);}
  30% {transform: translate(0%, 0%) rotate(-6deg);}
}
@keyframes wobbleupdownright {
  0% {transform: translate(0% 0%) rotate(0);}
  15% {transform: translate(0%, -150%);}
  30% {transform: translate(0%, 0%) rotate(-6deg);}
}
@keyframes zoomout {
  0% {transform: scale(1);}
  100% {transform: scale(1.1);}
}
@keyframes fire {
  0% {fill: #000;}
  25% {fill: #F05A28;}
  75% {fill: #F05A28;}
}
@keyframes face {
  0% {fill: #000;}
  5% {fill: #0f0;}
  50% {fill: #000;}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.