<svg class="moon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" width="100" height="100">
  <circle r="30" fill="#fff" cx="70" cy="70" />
</svg>

<div class="back ground"></div>
<div class="mid ground"></div>
<div class="frontmid ground"></div>
<div class="front ground"></div>
<div class="horseman"></div>

<svg class="pumpkin" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="120" viewBox="0 0 426 426">
  <defs>
    <radialGradient id="radial-gradient" cx="213.02" cy="213.02" r="213.02" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#f69449"/>
      <stop offset="0.7" stop-color="#e99623" stop-opacity="0.8"/>
      <stop offset="1" stop-color="#d7ba95" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <title>pumpkin</title>
  <g id="pumpkin">
    <circle id="back-area" cx="213" cy="213" r="213" opacity="0.75" fill="url(#radial-gradient)"/>
    <path id="p-back" d="M329.5,132.4c-29.4-27.7-58.5-32-74.9-31.6s-25.5,9.8-32.1,16.5c-1.9,1.9-6.7,3.4-12.8,4.6a31.3,31.3,0,0,1-2.8-3.7c-5.8-9.4-15.2-19.2-14.3-25.5s34.8-2.2,42.4-5.4,1.4-18.3,16.5-21.4,25.3-10.6,39.2-24.5S328.6.9,328.6.9,291.4,23.2,275,23.2s-28,8.9-36.1,15.2-19.6-.3-28.6,13.4-.6,19.5-12.5,22.7-8.4,6.7-28.9,2.7c-10.5-2.1-20.1,0-28.3,3.6-3.1-3.8-13.3-14.6-28.3-17.4C94,59.8,76.6,66,68.1,73.6S50.4,100.9,49,129.4s2.6,45,12,53.9S74.8,194,74.8,194l.6-1.6c-10.1,26.8-7.9,58.2-1.5,75.9C82.9,293.3,119,317,119,317s48.1,22.2,67.8,25.3c7,1.1,18.2,1.7,30.9,1.3l1.1.9v-.9c22.6-.7,49.6-4.2,65.6-12.3,25.3-12.8,68.2-50.9,73.1-74.5S358.8,160.1,329.5,132.4Zm-235,30.8a74.4,74.4,0,0,0-17.6,25.7l4.2-10.5S59.7,168.9,61,134.2s11.2-49,22.3-54.8,27.3-9.8,35.3-4,10.2,9.4,10.2,9.4l6.7-1.4a93.7,93.7,0,0,0-14.2,9.9C111,101.7,96.7,116.5,99.4,128s.9,15.5,9.4,17.3,29.4-12.8,31.2-16.4,3.6-31.7,3.6-31.7,11.2-3.6,18.3,1.8,8,15.7,4.5,24.1c-.6,1.4-1.3,2.9-2.1,4.3l-3.7.6C145.7,130.7,124.7,135.1,94.5,163.2ZM132.8,120c-4.5,7.6-7.5,10.6-11.5,10.6a9.5,9.5,0,0,1-6.3-2.1s-6.1-3.6,1.3-14.7,16.9-11.6,16.9-11.6S137.2,112.4,132.8,120Z" fill="#010101" fill-rule="evenodd"/>
    <g id="face">
      <path d="M147.5,248.8s.4-36.7,6.3-44.6c0,0,20.4,28.1,41,29.5,0,0-19.5,10.7-31.6,15.2S147.5,248.8,147.5,248.8Z" fill="#f8951d" fill-rule="evenodd"/>
      <path d="M233.1,259.1s4-37.1,6.7-40.2,34.7,23.2,29.8,26.8S233.1,259.1,233.1,259.1Z" fill="#f8951d" fill-rule="evenodd"/>
      <path d="M295.1,215.8s.4-43.7-1.3-51.2c0,0,21.9,17.4,20.1,22.8S295.1,215.8,295.1,215.8Z" fill="#f8951d" fill-rule="evenodd"/>
      <path d="M327.7,218.9c-5.4,11.2-4,22.3-7.6,24.1s-8.9-6.7-11.2,1.8-3.6,15.6-3.6,15.6-15.2-2.1-15.2,3.6-4,12.4-4,12.4-10.7-7.6-15.2-3.6-5.7,12.5-11.1,9.8-15.6.4-17.4,2.7-11.6,4-13.4-2.2-12.1,7.1-14.3,7.1-7.1-4-13.8-5.8-11.5,7.6-11.5,7.6l-8.5-17s-7.6,13.4-14.7,11.6S148,271,148,271s13.4,25.4,21.4,25.9,13.4,9.4,16.5,12.1,14.6-2.2,17.8-.4,6.7,14.7,13.4,11.2,6.7-11.2,17.9-6.3,20.2,12.5,23.7,3.6,22.2-10.7,26.2-12.1.9-10.7,11.6-14.7,13.4-12.2,17-18.8,17.9-13.7,15.6-21.8S327.7,218.9,327.7,218.9Z" fill="#f8951d" fill-rule="evenodd"/>
      <path d="M327.7,218.9s-.9,22.8,1.3,30.8-12.1,15.2-15.6,21.8-6.3,14.7-17,18.8-7.6,13.4-11.6,14.7-22.8,3.1-26.2,12.1c-1.9,5-5.6,4.8-10.5,2.8-4.4,2.5-12-3.1-21-7.1-4.3.9-5.9,4.7-10.1,6.9-2.5,1.4-4.6.3-6.4-1.5l-1.4.9c-6,3.2-9.5-6.9-12.4-10.3-4.3.8-9.1,1.9-10.9.3,3.7-1,8.2-2.1,10-1.1,3.9,4.2,7.4,14.4,13.4,11.2l1.4-.9c5.2-3.6,6.1-9.5,15.4-5.8s17.6,10,22,7.5a6.5,6.5,0,0,0,2.7-3.5c3.5-8.9,22.2-10.7,26.2-12.1s.9-10.7,11.6-14.7,13.4-12.2,17-18.8,17.9-13.7,15.6-21.8a37.3,37.3,0,0,1-1-6.1c-2.1,1.1-4.6-1-6.8-1.7a3,3,0,0,1-1.2,1.1,3.1,3.1,0,0,1-2.4,0,2.7,2.7,0,0,1,3.6-1.2c2.2.7,4.7,2.8,6.6,1.8C323.6,240.9,322.4,229.9,327.7,218.9Z" fill="#d9c98e" fill-rule="evenodd"/>
      <path d="M151.3,210.1a18.7,18.7,0,0,1,2.4-5.9s20.4,28.1,41,29.5c0,0-19.5,10.7-31.6,15.2-7.9,2.9-12.1,2-14.1,1.1a33.3,33.3,0,0,0,6.3-1.7c12.1-4.5,31.6-15.2,31.6-15.2C172.8,232,158.7,218.5,151.3,210.1Z" fill="#d9c98e" fill-rule="evenodd"/>
      <path d="M233.1,259.1l.4-3.3c9.7-3.2,25-8.4,28.3-10.8s-12.9-17.7-22.9-24.1a6.3,6.3,0,0,1,.9-2c2.7-3.1,34.7,23.2,29.8,26.8S233.1,259.1,233.1,259.1Z" fill="#d9c98e" fill-rule="evenodd"/>
      <path d="M295.1,215.8V204.1c4.7-6.7,10-14.6,10.9-17.5s-5.6-10-11.6-15.4a47.7,47.7,0,0,0-.7-6.7s21.9,17.4,20.1,22.8S295.1,215.8,295.1,215.8Z" fill="#d9c98e" fill-rule="evenodd"/>
    </g>
  </g>
</svg>

<h1>happy                 halloween</h1>
//*------------------------------

//looks best full screen
//https://codepen.io/sdras/pen/rMEdjB/

//*------------------------------

body, html {
  width: 100%;
  height: 100%;
  min-height: 700px;
  background: rgb(4,30,43); /* Old browsers */
background: -moz-linear-gradient(top, rgba(4,30,43,1) 0%, rgba(64,120,134,1) 41%, rgba(212,219,219,1) 69%, rgba(0,0,0,1) 69%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(4,30,43,1) 0%,rgba(64,120,134,1) 41%,rgba(212,219,219,1) 69%,rgba(0,0,0,1) 69%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(4,30,43,1) 0%,rgba(64,120,134,1) 41%,rgba(212,219,219,1) 69%,rgba(0,0,0,1) 69%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#041e2b', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  font-family: 'Freckle Face', cursive;
}

#foreground {
  height: 600px;
  position: absolute;
  margin-top: -200px;
  overflow-y: hidden;
}

h1 {
  position: absolute;
  top: 550px;
  width: 100%;
  text-align: center;
  font-size: 45px;
  color: orange;
  white-space: pre;
  margin-left: 20px;
}

span {
  letterspacing: 200px;
}

.moon {
  left: 25%;
  position: absolute;
  top: 100px;
}

.horseman {
  width: 184px;
  height: 123px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/horse-hallow5.svg');
  animation: horsemove 0.7s steps(15) infinite;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 300px;
}

.pumpkin {
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 300px;
}

.ground {
  width: 151%;
  height: 697px;
  position: absolute;
  background-size: 800px 716px;
  left: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.front {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowfront4.svg') repeat-x;
  background-size: 1000px 871px;
  top: -100px;
  animation: bk 20s -5s linear infinite;
}

.frontmid {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowmidfront2.svg') repeat-x;
  background-size: 1000px 871px;
  top: -100px;
  animation: bk 50s -5s linear infinite;
}

.mid {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowmid2.svg') repeat-x;
  background-size: 1000px 871px;
  top: -100px;
  animation: bk 100s -5s linear infinite;
}

.back {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/hallowback2.svg') repeat-x;
  background-size: 1000px 871px;
  top: -100px;
  animation: bk 100s -5s linear infinite;
}

@keyframes horsemove {
  100% { background-position: 0 -1848px; }
}

@keyframes bk {
  100% { background-position: -200% 0; }
}
View Compiled
function sceneOne() {
  var tl = new TimelineMax();

  tl.add("begin", "+=1");
  tl.fromTo(".pumpkin", 2, {
    scale: 0,
    x: 0,
    y: 0,
    rotation: 180
  }, {
    scale: 1,
    bezier: {
      type: "soft",
      values: [{
        x: 400,
        y: 175
      }, {
        x: 30,
        y: 250
      }],
      autoRotate: false
    },
    rotation: 0,
    ease: Circ.easeInOut
  }, "begin+=1");
  tl.to("#face, #back-area", 1, {
    opacity: 0.5,
    yoyo: true,
    repeatDelay: 0.65,
    repeat: -1,
    ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 1, points: 20, taper: "none", randomize:  true, clamp: false})
  }, "begin+=3");
  tl.from("h1", 2, {
    opacity: 0,
    ease: RoughEase.ease.config({ template:  Power0.easeNone, strength: 1, points: 20, taper: "none", randomize:  true, clamp: false})
  }, "begin+=3");
  tl.from("h1", 1, {
    rotationX: 180,
    ease: Sine.easeOut
  }, "begin+=3");

  return tl;
}

//add it all to master timeline
var master = new TimelineMax();
master.add(sceneOne(), "first");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=18
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/findShapeIndex.js?r=19