<svg id="illu" viewBox="0 0 1200 1200">
  <defs>
    <g id="star">
      <rect x="9" y="0" fill="#FFE498" width="2" height="20" />
      <rect x="0" y="9" fill="#FFE498" width="20" height="2" />
    </g>
  </defs>

  <g id="stars">
  </g>
  
  <g id="moon">
    <circle id="XMLID_92_" fill="#ECDFBB" cx="600" cy="600" r="135" />
    <path id="XMLID_91_" fill="#F1DEA3" d="M487.3,621.6c0-74.2,60.1-134.3,134.3-134.3c32.7,0,62.7,11.7,86,31.1
		C683,486,643.9,465,600,465c-74.6,0-135,60.4-135,135c0,43.9,21,83,53.5,107.6C499,684.3,487.3,654.3,487.3,621.6z" />

    <ellipse id="XMLID_90_" transform="matrix(0.8563 -0.5164 0.5164 0.8563 -187.6616 353.484)" fill="#F1DEA3" cx="541.5" cy="514" rx="24.7" ry="16.1" />

    <ellipse id="XMLID_89_" transform="matrix(-0.4752 -0.8799 0.8799 -0.4752 528.5117 1400.9026)" fill="#F1DEA3" cx="682" cy="542.8" rx="37.7" ry="25.1" />

    <ellipse id="XMLID_88_" transform="matrix(-0.4752 -0.8799 0.8799 -0.4752 496.7872 1306.4282)" fill="#F1DEA3" cx="638" cy="505.1" rx="11.8" ry="11.4" />

    <ellipse id="XMLID_87_" transform="matrix(0.8862 0.4632 -0.4632 0.8862 340.2807 -211.1433)" fill="#F1DEA3" cx="600" cy="587.2" rx="35.3" ry="40.3" />
    <path id="XMLID_86_" fill="#F1DEA3" d="M474.2,550.9c-5.9,15.2-9.2,31.8-9.2,49.1c0,29.6,9.5,56.9,25.7,79.2
		c24-11.5,38.8-39.7,34.6-70.2C521.1,579,499.8,556.1,474.2,550.9z" />
    <ellipse id="XMLID_85_" fill="#F1DEAE" cx="600" cy="701.3" rx="38" ry="23.6" />

    <ellipse id="XMLID_84_" transform="matrix(0.945 0.327 -0.327 0.945 235.2577 -199.3432)" fill="#F1DEA3" cx="710.5" cy="600" rx="11" ry="14.9" />
    <path id="XMLID_83_" fill="#C3BA95" d="M599.5,683.8c-0.8,0-1.5-0.7-1.5-1.5v-69.9c0-15-12.2-27.2-27.2-27.2
		c-15,0-27.2,12.2-27.2,27.2c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5c0-16.7,13.6-30.2,30.2-30.2c16.7,0,30.2,13.6,30.2,30.2
		v69.9C601,683.1,600.3,683.8,599.5,683.8z" />
    <path id="XMLID_72_" fill="#C3BA95" d="M570.5,653.3c-11.8,0-21.4-9.6-21.4-21.4c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5
		c0,10.1,8.2,18.3,18.3,18.3c10.1,0,18.3-8.2,18.3-18.3c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5
		C591.8,643.7,582.3,653.3,570.5,653.3z" />
    <path id="XMLID_71_" fill="#C3BA95" d="M638.2,653.3c-11.8,0-21.4-9.6-21.4-21.4c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5
		c0,10.1,8.2,18.3,18.3,18.3c10.1,0,18.3-8.2,18.3-18.3c0-0.8,0.7-1.5,1.5-1.5c0.8,0,1.5,0.7,1.5,1.5
		C659.6,643.7,650,653.3,638.2,653.3z" />
    <path id="XMLID_70_" fill="#C3BA95" d="M601.3,731.3c-9.2,0-16.7-7.5-16.7-16.7c0-0.7,0.5-1.2,1.2-1.2c0.7,0,1.2,0.5,1.2,1.2
		c0,7.9,6.4,14.3,14.3,14.3c7.9,0,14.3-6.4,14.3-14.3c0-0.7,0.5-1.2,1.2-1.2c0.7,0,1.2,0.5,1.2,1.2
		C618,723.8,610.5,731.3,601.3,731.3z" />
    <path id="XMLID_69_" fill="#C3BA95" d="M599.4,704.5c-31.8,0-60.6-16.2-77.2-43.4c-0.7-1.1-0.3-2.5,0.8-3.2
		c1.1-0.7,2.5-0.3,3.2,0.8c15.7,25.8,43.1,41.2,73.3,41.2c30.4,0,58.9-16.4,74.2-42.7c0.6-1.1,2-1.5,3.1-0.8c1.1,0.6,1.5,2,0.8,3.1
		C661.4,687.3,631.4,704.5,599.4,704.5z" />
    <path id="XMLID_68_" fill="#C3BA95" d="M685.3,660.9c-3,0-5.9-0.8-8.5-2.3c-3.9-2.3-6.8-6-7.9-10.3c-1.2-4.4-0.6-9,1.7-12.9
		c0.6-1.1,2-1.5,3.1-0.8c1.1,0.6,1.5,2,0.8,3.1c-1.7,2.9-2.1,6.2-1.2,9.5c0.9,3.2,2.9,5.9,5.8,7.6c2.9,1.7,6.2,2.1,9.5,1.2
		c3.2-0.9,5.9-2.9,7.6-5.8c0.6-1.1,2-1.5,3.1-0.8c1.1,0.6,1.5,2,0.8,3.1c-2.3,3.9-6,6.8-10.3,7.9
		C688.3,660.7,686.8,660.9,685.3,660.9z" />
    <path id="XMLID_67_" fill="#C3BA95" d="M514,661.8c-1.5,0-3-0.2-4.4-0.6c-4.4-1.2-8.1-4-10.3-7.9c-0.6-1.1-0.3-2.5,0.8-3.1
		c1.1-0.6,2.5-0.3,3.1,0.8c1.7,2.9,4.3,4.9,7.6,5.8c3.2,0.9,6.6,0.4,9.5-1.2c2.9-1.7,4.9-4.3,5.8-7.6c0.9-3.2,0.4-6.6-1.2-9.5
		c-0.6-1.1-0.3-2.5,0.8-3.1c1.1-0.6,2.5-0.3,3.1,0.8c2.3,3.9,2.9,8.5,1.7,12.9c-1.2,4.4-4,8.1-7.9,10.3
		C519.9,661,517,661.8,514,661.8z" />
  </g>
  <g id="rocket">
    <g id="smoke"></g>
    <g id="fire">

      <path id="red_fire" fill="#EB6736" d="M921,714.8c0-18.3,14.8-33.1,33.1-33.1c18.3,0,33.1,14.8,33.1,33.1
			c0,18.3-33.1,59.2-33.1,59.2S921,733.1,921,714.8" />
      <path id="yellow_fire" fill="#ECA643" d="M954.8,690.9c-9.4,0-16.9,7.6-16.9,17c0,9.4,17,44.5,17,44.5s16.9-35.2,16.9-44.6
			C971.7,698.4,964.1,690.9,954.8,690.9" />
    </g>

    <g id="cosmonaut">

      <rect id="XMLID_59_" x="929.7" y="608.4" transform="matrix(-1 2.445246e-04 -2.445246e-04 -1 1911.4962 1241.0038)" fill="#059F9F" width="51.9" height="24.5" />
      <circle id="XMLID_58_" fill="#F2F2F2" cx="936.6" cy="613.6" r="2.6" />
      <circle id="XMLID_57_" fill="#FF662C" cx="943.1" cy="613.6" r="2.6" />
      <circle id="XMLID_56_" fill="#F5B547" cx="949.6" cy="613.6" r="2.6" />
      <path id="XMLID_55_" fill="#059F9F" d="M985.5,598c0,1.9-1.6,3.5-3.5,3.5l-50.2,0c-1.9,0-3.5-1.6-3.5-3.5l0-46.8
			c0-1.9,1.6-3.5,3.5-3.5l50.2,0c1.9,0,3.5,1.6,3.5,3.5L985.5,598z" />
      <path id="XMLID_54_" fill="#D8D1C3" d="M981.4,579.2c0,2.1-1.7,3.7-3.7,3.7l-41.5,0c-2,0-3.7-1.7-3.7-3.7l0-19.8
			c0-2,1.7-3.7,3.7-3.7l41.5,0c2,0,3.7,1.7,3.7,3.7L981.4,579.2z" />
      <path id="XMLID_43_" fill="#79552D" d="M977.7,555.7l-41.5,0c-2,0-3.7,1.7-3.7,3.7l0,8.7c3.8,2.7,8.4,4.3,13.4,4.3
			c10.4,0,19.1-6.8,22-16.2c0.9,6.8,6.5,12.1,13.4,12.5l0-9.3C981.4,557.4,979.8,555.7,977.7,555.7" />
      <path id="XMLID_35_" fill="#79552D" d="M967.3,558.8c0,3.8-2,7.2-5.1,9c5.3-0.6,9.4-5,9.4-10.4c0-0.5-0.1-1-0.1-1.6l-4.6,0
			C967.1,556.7,967.3,557.7,967.3,558.8" />
      <path id="XMLID_34_" fill="#79552D" d="M970.2,579.4c-0.6,0-1-0.4-1-1c0-1.5-1.2-2.7-2.7-2.7c-1.5,0-2.7,1.2-2.7,2.7
			c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C971.2,578.9,970.7,579.4,970.2,579.4z" />
      <path id="XMLID_33_" fill="#79552D" d="M951.2,579.4c-0.6,0-1-0.4-1-1c0-1.5-1.2-2.7-2.7-2.7c-1.5,0-2.7,1.2-2.7,2.7
			c0,0.6-0.4,1-1,1c-0.6,0-1-0.4-1-1c0-2.6,2.1-4.7,4.7-4.7c2.6,0,4.7,2.1,4.7,4.7C952.2,578.9,951.8,579.4,951.2,579.4z" />
      <circle id="XMLID_32_" fill="#F5B547" cx="978.5" cy="593.1" r="2" />
      <circle id="XMLID_31_" fill="#FF662C" cx="972" cy="593.1" r="2" />
      <path id="XMLID_30_" fill="#5B5757" d="M985.5,564.4l0,10.1c8.4,1.9,14.7,9.4,14.7,18.4c0,10.4-8.4,18.8-18.8,18.8
			c-10.4,0-18.8-8.4-18.8-18.8c0-2.8-2.2-5-5-5c-2.8,0-5,2.2-5,5c0,15.9,12.9,28.8,28.8,28.8c15.9,0,28.8-12.9,28.8-28.8
			C1010.2,578.4,999.5,566.4,985.5,564.4z" />
      <path id="XMLID_29_" opacity="0.3" fill="#F2F2F2" d="M945,555.8l-12.5,19.4l0,4.1c0,2.1,1.7,3.7,3.7,3.7l7,0l17.5-27.2L945,555.8
			z" />
    </g>
    <g id="cabin">
      <path id="XMLID_28_" fill="#0E9E9F" d="M855.9,722c-16-43-5.9-87.3,21.3-120.3l24.8,66.5c-17.5,6.5-26.2,26.4-19.7,43.9L855.9,722
			z" />
      <path id="XMLID_27_" fill="#0E9E9F" d="M1054.6,721.9c16-43,5.8-87.3-21.5-120.3l-24.7,66.6c17.5,6.5,26.3,26.4,19.8,43.9
			L1054.6,721.9z" />

      <rect id="XMLID_26_" x="896.4" y="552" transform="matrix(0.7067 -0.7075 0.7075 0.7067 -122.3782 822.5777)" opacity="0.2" fill="#FFFFFF" width="69" height="13.8" />

      <rect id="XMLID_25_" x="899.7" y="567.4" transform="matrix(0.7067 -0.7075 0.7075 0.7067 -126.8512 833.3998)" opacity="0.2" fill="#FFFFFF" width="84" height="4.5" />
      <path id="XMLID_19_" fill="#0A7370" d="M955.5,430.6c-52.1,30.2-87.1,86.5-87,150.9c0,32.5,8.9,62.9,24.4,88.9l125.5-0.1
			c15.5-26,24.3-56.4,24.3-88.9C1042.6,517,1007.5,460.7,955.5,430.6z M955.6,625.4c-26.2,0-47.5-21.2-47.5-47.5
			c0-26.2,21.2-47.5,47.5-47.5c26.2,0,47.5,21.2,47.5,47.5C1003.1,604.1,981.8,625.4,955.6,625.4z" />
      <path id="XMLID_16_" fill="#0E9E9F" d="M959.1,426c-2.2,1.3-4.3,2.6-6.4,3.9l0.1,96.3c2.1-0.3,4.3-0.4,6.4-0.4
			c26.2,0,47.5,21.2,47.5,47.5c0,8.9-2.5,17.3-6.7,24.4l45.1,0c0.8-6.8,1.2-13.8,1.2-20.8C1046.3,512.3,1011.2,456.1,959.1,426z" />
      <path id="XMLID_13_" fill="#2B2A2A" d="M955.5,520.8c-32.5,0-58.9,26.4-58.8,58.9c0,32.5,26.4,58.9,58.9,58.8
			c32.5,0,58.9-26.4,58.8-58.9C1014.4,547.2,988,520.8,955.5,520.8z M955.6,620.5c-22.5,0-40.8-18.2-40.8-40.7
			c0-22.5,18.2-40.8,40.7-40.8c22.5,0,40.8,18.2,40.8,40.7C996.3,602.2,978.1,620.5,955.6,620.5z" />
      <g id="XMLID_10_">
        <path id="XMLID_12_" fill="#FFFFFF" d="M905.3,591.7c-0.4,0-0.8-0.2-1-0.5l-17.2-21.3c-0.5-0.6-0.4-1.4,0.2-1.8
				c0.6-0.5,1.4-0.4,1.8,0.2l17.2,21.3c0.5,0.6,0.4,1.4-0.2,1.8C905.9,591.6,905.6,591.7,905.3,591.7" />
        <path id="XMLID_11_" fill="#FFFFFF" d="M887.5,591.7c-0.3,0-0.6-0.1-0.9-0.3c-0.5-0.5-0.6-1.3-0.1-1.8l18.4-21.3
				c0.5-0.5,1.3-0.6,1.8-0.1c0.5,0.5,0.6,1.3,0.1,1.8l-18.4,21.3C888.2,591.5,887.8,591.7,887.5,591.7" />
      </g>
      <circle id="XMLID_9_" fill="#2B2A2A" cx="959.9" cy="442.8" r="4.5" />
      <circle id="XMLID_8_" fill="#2B2A2A" cx="959.9" cy="475.5" r="4.5" />
      <circle id="XMLID_7_" fill="#2B2A2A" cx="959.9" cy="508.1" r="4.5" />
      <circle id="XMLID_6_" fill="#2B2A2A" cx="1039" cy="590.9" r="3.7" />
      <rect id="XMLID_5_" x="1009.4" y="558.8" fill="#2B2A2A" width="12.7" height="43" />
      <rect id="XMLID_4_" x="934.3" y="670.4" fill="#2B2A2A" width="42.6" height="4.4" />
      <circle id="XMLID_3_" fill="#2B2A2A" cx="1044.4" cy="704.2" r="4.5" />
      <circle id="XMLID_2_" fill="#2B2A2A" cx="867" cy="709" r="4.5" />
    </g>
  </g>
</svg>

<div id="instructions">Throw the rocket</div>

<div id="credits">
  <p> <a href="https://codepen.io/Yakudoo/"  target="blank">my other codepens</a> | <a href="https://epic.net" target="blank">www.epic.net</a></p>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
html{
  background-color :#22222A;
}
svg {
  position: absolute;
  margin:auto;
  height:100%;
  width:100%;
  top:0;
  bottom:0;
  left:0;
  right:0;
  overflow:hidden;
}
#instructions{
  position:absolute;
  width:100%;
  bottom:0;
  margin: auto;
  margin-bottom:40px;
  font-family:'Open Sans', sans-serif;
  color:#167370;
  font-size:.9em;
  text-transform: uppercase;
  text-align : center;
  user-select: none;
}

#credits{
  position:absolute;
  width:100%;
  margin: auto;
  bottom:0;
  margin-bottom:20px;
  font-family:'Open Sans', sans-serif;
  color:#565368;
  font-size:0.7em;
  text-transform: uppercase;
  text-align : center;
}
#credits a {
  color:#565368;
}

/*
Inspired... copied... stolen from Sarah Drasner's Cow https://codepen.io/sdras/pen/doZReX

It was perfect for a side project I'm working on with @epicwebagency team. So thank you Sarah.

The smoke and stars are dynamically generated. The fire and smoke react to the speed of the rocket.

Illustration by Adeline o'Moreau

*/


var illu = document.getElementById("illu");
var rocket = document.getElementById("rocket"); 
var redFire = document.getElementById("red_fire"); 
var yellowFire = document.getElementById("yellow_fire"); 
var fire = document.getElementById("fire");
var stars = document.getElementById("stars");
var smoke = document.getElementById("smoke");

var awaitingParticles = [];
var awaitingStars = [];

var xmlns = "http://www.w3.org/2000/svg"; 
var svgns = "http://www.w3.org/1999/xlink"
var fireScale = 1;
var yellowFireScale = 1;
var rotationSpeed = 0;
var rocketProperSpeed = .5;
var currentNStars = -1;
var autoRotate = true;
var t=0;
var starMaxRay = 600;
var starMinRay = 600;

function createSmokeParticle(){
  var smokeParticle = document.createElementNS(xmlns,"circle"); 
  smokeParticle.setAttributeNS(null,"class","smoke_particle"); 
  smokeParticle.setAttributeNS(null,"r",10);
  smoke.appendChild(smokeParticle);
  resetParticle(smokeParticle);
  return smokeParticle;
}

function createStar(){
  currentNStars++;
  var star = document.createElementNS(xmlns,"use"); 
  var id = "star_"+currentNStars;
  star.setAttributeNS(svgns,'xlink:href','#star');
  star.setAttributeNS(null,"id",id);
  stars.appendChild(star);
  resetStar(star);
  return star;
}


TweenLite.set(rocket, { svgOrigin:"400, 600", x:"200", rotation:0, scale:.5 });
TweenLite.set(fire, {svgOrigin:"950, 680" });
TweenLite.set(smoke, {svgOrigin:"950, 680" });
TweenLite.set(yellowFire, {svgOrigin:"950, 680" });

Draggable.create(rocket, {
  type:"rotation",
  throwProps:true,
  throwResistance:9000,
  onDrag: onDrag,
  onThrowUpdate:throwUpdate,
  onThrowComplete:throwComplete,
});
function onDrag(e){
  autoRotate = false;
  rotationSpeed = ThrowPropsPlugin.getVelocity(this.target, "rotation");
}

function throwUpdate(e) {
    rotationSpeed = ThrowPropsPlugin.getVelocity(this.target, "rotation");
}

function throwComplete(e) {
    autoRotate = true;
}


function getSmokeParticle(){
  var particle;
  if (awaitingParticles.length){
    particle = awaitingParticles.pop();
  }else{
    particle = createSmokeParticle();
  }
  return particle;
}


function getStar(){
  var star;
  if (awaitingStars.length){
    star = awaitingStars.pop();
  }else{
    star = createStar();
  }
  return star;
}

function fly(p,speed, delay){
  TweenMax.to(p, speed, {opacity:0, y:750-rotationSpeed/3+Math.random()*100, x:955-40+Math.random()*80, scale:4-rotationSpeed/100, fill:"#000000", delay:delay, ease:Strong.easeInOut, onComplete:resetParticle, onCompleteParams:[p]});
}

function showStar(s){
  TweenMax.to(s, 1, {opacity:1, scale : 1, ease:Strong.easeInOut, onComplete:hideStar, onCompleteParams:[s]});
}
function hideStar(s){
  TweenMax.to(s, 1, {opacity:0, scale : .1, ease:Strong.easeInOut, onComplete:resetStar, onCompleteParams:[s]});
}

function resetParticle(p){
  TweenMax.set(p,{
    svgOrigin:"0, 0",
    x:955,
    y:730,
    opacity:1,
    scale:2.5,
    fill:"#EA4E39"
  });
  awaitingParticles.push(p);
}

function resetStar(s){
  var ray =  200 + Math.random()*200 ;
  var angle = Math.random()*Math.PI*2;
  var posX = 600 + Math.cos(angle)*ray;
  var posY = 600 + Math.sin(angle)*ray;
  TweenMax.set(s,{
    svgOrigin:"5, 5",
    opacity:0,
    x:posX,
    y:posY,
    scale:1
  });
  awaitingStars.push(s);
}


function loop(){
  t++;
  if (t%10 == 0){
    var star = getStar();
    showStar(star);
  }
  
  var particlesNumber = Math.round(rule3(-rotationSpeed, 0, 1000, 1,3));
  var speedParticles = rule3(-rotationSpeed, 0, 1000, 1.5,.2);
  for (var i=0; i<1; i++){
      var p = getSmokeParticle();
      fly(p, speedParticles, i*.1);
  }
  fireScaleY = .8 + Math.random()*.3 -rotationSpeed/500;
  fireScaleY = Math.min(fireScaleY,1.5);
  fireScaleX = 1+rotationSpeed/100;
  fireScaleX = Math.min(Math.max(fireScaleX,.4),1);
  yellowFireScale = .8 + Math.random()*.3;
  //*
  if (autoRotate){
    rotationSpeed += (rocketProperSpeed - rotationSpeed)/30;
    rocketRotation = rocket._gsTransform.rotation;
    rocketRotation -= rotationSpeed;
    TweenLite.set(rocket, {
      rotation:rocketRotation
    });
  }
  //*/
  TweenLite.set(fire, {
    scaleX:fireScaleX, 
    scaleY:fireScaleY
  });
  TweenLite.set(yellowFire, {
    scale:yellowFireScale, 
    rotation:-20 + yellowFireScale*20
  });
  requestAnimationFrame(loop);
}
loop();

function rule3(v,vmin,vmax,tmin, tmax){
  var nv = Math.max(Math.min(v,vmax), vmin);
  var dv = vmax-vmin;
  var pc = (nv-vmin)/dv;
  var dt = tmax-tmin;
  var tv = tmin + (pc*dt);
  return tv;
}