<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>
$glow: #f9eacd;
$head: darken(#B03D21, .5);
$duration: 1.7s;
$face-stroke: darken(#DD4913, 25);
@keyframes glow {
  0%   { fill-opacity: 1; }
  60%  { fill-opacity: .5; }
  100% { fill-opacity: 1; }
}

@mixin light($duration: $duration) {
  animation-name: glow;
  animation-duration: $duration;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

body {
  background: url("https://dl.dropbox.com/s/xoxjnndwvm1otc4/halloween-background-spider-webs-skeleton-hand-bats-2560x1600-wide-wallpapers.net.jpg?dl=0") no-repeat;
  background-size: cover;
}


#head {
  fill: #DD4913;
}


#mouth {
  fill: #D8C83B;
  @include light();
}

#eyes path {
  fill: #D8C83B;
  @include light();
}

#nose {
  fill: #D8C83B;
  @include light();
}
View Compiled

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/jqueryui/1.11.2/jquery-ui.min.js