<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>
@import "compass/css3";

$primary-color: #fff;
$secondary-color: #fcc;
$tertiary-color: #fdcd9d;

html {
  min-width: 320px;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  @extend html;
  @include transition(background-color 1s);
  @include animation(background 4s 4s infinite alternate);
  background-color: $secondary-color;
  position: relative;
}

@include keyframes(background) {
  100% {
    background-color: $tertiary-color;
  }
}

svg {
  @include transition(all 1s);
  @include animation(dance 1.5s infinite alternate);
  margin-top: 30px;
  margin-left: 0;
  
  &:hover {
    @include transform(scale(0.6));
    margin-right: 100px;
  }
}

@include keyframes(dance) {
  100% {
    margin-top: 0;
    margin-left: 200px;
  }
}

#head {
  fill: $primary-color;
}

%pumpkin-face {
  fill: $secondary-color;
  @include animation(pumpkin 1.5s infinite alternate, fill-color 4s 4s infinite alternate);
}

#mouth {
  @extend %pumpkin-face;
  @include transform(scale(2, 2) translate(-150px,-125px));
}

#nose {
  @extend %pumpkin-face;
  @include transform(translate(0, -15px));
}

#eyes path {
  @extend %pumpkin-face;
  @include transform(scale(1.2, 2.2) translate(-50px, -140px));
}

@include keyframes(fill-color) {
  100% {
    fill: $tertiary-color;
  }
}

@include keyframes(pumpkin) {
  100% {
    @include transform(rotate(1deg));
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.