<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;
$pumpkin: darken(#cc824c, .5);
$duration: 1.7s;

@keyframes flickering {
  0%   { fill-opacity: 1; }
  60%  { fill-opacity: .5; }
  100% { fill-opacity: 1; }
}

@keyframes flickeringPumpkin {
  0%   { fill: $pumpkin; }
  60%  { fill: darken($pumpkin,5); }
  100% { fill: $pumpkin; }
}

@keyframes twinkling {
  0%   { opacity: 1; }
  66%  { opacity: .5; }
  100% { opacity: 1; }
}

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

html {
  height: 100%;
}

body {
  height: 100%;
  background: linear-gradient(to bottom, #000 0%, #b08527 60%, #aab690 60.1%, #4b6119 100%); 
  text-align: center;
}

svg {
  max-height: 100%;
  z-index: 1;
  position: relative;
}

#head {
  fill: #cc824c;
  animation-name: flickeringPumpkin;
  animation-duration: $duration;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

#mouth {
  fill: $glow;
  @include flicker();
}

#eyes path {
  fill: $glow;
  @include flicker();
}

#nose {
  fill: $glow;
  @include flicker();
}

.star {
  width: 10px;
  height: 10px;
  background: #fff;
  display: block;
  position: absolute;
  top: 0;
  border-radius: 50%;
  animation-name: twinkling;
  animation-duration: 3.3s;
  animation-iteration-count: infinite;
  &:nth-child(2n){
    animation-delay: 1.5s;
  }
  &:nth-child(3n){
    animation-delay: 2.3s;
    animation-duration: 4.5s;
  }
  &:nth-child(10n){
    animation-delay: 2.3s;
    animation-duration: 1s;
  }
  &:nth-child(27n){
    animation-delay: .7s;
    animation-duration: .5s;
  }
}
View Compiled
function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}

// cf. https://stackoverflow.com/questions/4549894/how-can-i-repeat-strings-in-javascript/4549907#4549907
String.prototype.repeat = function(times) {
   return (new Array(times + 1)).join(this);
};

var starmarkup = '<span class="star"></span>';

var stars = starmarkup.repeat(getRandom(175,200));

document.querySelector('svg').insertAdjacentHTML('afterend', stars);

(function starryNight(){
  var stars = document.querySelectorAll('.star');

  for (var i = 0; i < stars.length; i++) {
    var star = stars[i];
    star.style.top = getRandom(1, 55) + '%';
    star.style.left = getRandom(1, 100) + '%';
    var size = getRandom(3,6);
    star.style.height = size + 'px';
    star.style.width = size + 'px';
    star.style.background = 'rgba(255, 255, 255, .' + getRandom(30,100) + ')';
    
  }
})();

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