<div class="stage">
  <button class="form-toggle settings-toggle">
    <svg version="1.1"  xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" >
      <path d="M23,13.4v-2.8l-3-0.8c-0.2-0.7-0.5-1.4-0.8-2l1.6-2.8l-1.9-1.9l-2.8,1.6c-0.6-0.4-1.3-0.7-2-0.8l-0.8-3h-2.8
               L9.9,4c-0.7,0.2-1.4,0.5-2,0.8L5.1,3.3L3.3,5.1l1.6,2.8C4.5,8.5,4.2,9.2,4,9.9l-3,0.8v2.8l3,0.8c0.2,0.7,0.5,1.4,0.8,2l-1.6,2.8
               l1.9,1.9l2.8-1.6c0.6,0.4,1.3,0.7,2,0.8l0.8,3h2.8l0.8-3c0.7-0.2,1.4-0.5,2-0.8l2.8,1.6l1.9-1.9l-1.6-2.8c0.4-0.6,0.7-1.3,0.8-2
               L23,13.4z M12,17c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S14.8,17,12,17z"/>
    </svg>
  </button>
  <div class="settings-form hidden">
    <button class="form-toggle close-toggle">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <title>close-24x24</title>
        <g id="_24x24">
          <path d="M14.58,12l5.88-5.89a1.82,1.82,0,0,0-2.58-2.58L12,9.42,6.12,3.53A1.82,1.82,0,1,0,3.53,6.11L9.42,12,3.53,17.89a1.82,1.82,0,1,0,2.58,2.58L12,14.58l5.88,5.88a1.82,1.82,0,1,0,2.58-2.58Z"/>
        </g>
      </svg>
    </button>
    <div class="form-field-group">
      <label>Spawn Rate</label>
      <span>Slow</span>
      <input class="inverted" type="range" min="50" max="2000" value="1000" data-name="spawnRate"/>
      <span>Fast</span>
    </div>
    <div class="form-field-group">
      <label>Flight Speed</label>
      <span>Slow</span>
      <input class="inverted" type="range" min="1" max="5" value="3" data-name="durationMultiple"/>
      <span>Fast</span>
    </div>  
  </div>
</div>
$color-beak: hsl(50,90%,70%);
$color-background-primary: #69FFC5;
$color-background-secondary: adjust-hue($color-background-primary, 20%);
$color-settings-form: rgba(255,255,255,.9);
$color-text: darken($color-background-secondary, 40%);
$animation-flap: infinite wing-front-flap 300ms ease;

html,body{
  width:100%;
  overflow:hidden;
  box-sizing:border-box    
}

.stage{
  display:flex;
  align-items:center;
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow:visible;
  background:linear-gradient($color-background-primary, $color-background-secondary);
  box-sizing:border-box;
}

.birb-container{
  position:absolute;
  top:50%;
  right:100%;
  transform-origin:left center;
  animation: fly-by 2000ms linear;
}

.birb{
  position:relative;
  display:block;
  width:20vw;
  height:20vw;
  animation: infinite altitude-variance 500ms ease;
}

.body{
  position:absolute;
  left:0;
  top:20%;
  width:70%;
  height:40%;
  border-bottom-right-radius:50% 80%; 
  border-bottom-left-radius:50% 80%; 
  box-shadow:inset -3vw -2vw 2vw rgba(0,0,20,.2);  
  -webkit-backface-visibility: hidden;


  &:after{
    content:'';
    display:block;
    position:absolute;
    left:-10%;
    top:35%;
    width:30%;
    height:30%;
    border-radius:0 0 100% 0;
    background: linear-gradient(adjust-hue($color-beak, -10%), $color-beak);
  }   
}

.head-container{
  position:relative;
  left:80%;
  top:0;
  width:50%;
  height:80%;  
  z-index:1;
}

.head{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:0 100% 100% 100%;
  box-shadow:inset -1vw -2vw 1vw rgba(0,0,10,.2); 
  z-index:1;
  -webkit-backface-visibility: hidden;

  &:before{
    content:'';
    display:block;
    position:absolute;
    left:55%;
    top:35%;
    width:15%;
    height:15%;
    border-radius:100%;
    background:hsla(0,60,20,.2);
    z-index:1;
  }

  &:after{
    content:'';
    display:block;
    position:absolute;
    right:10%;
    bottom:25%;
    width:50%;
    height:50%;
    border-radius:100%;
    background:rgba(255,255,255,.25);
    z-index:2;
    -webkit-backface-visibility: hidden;
  }  
}

.beak{
  position:absolute;
  left:80%;
  top:20%;
  width:50%;
  height:70%;
  background:$color-beak;
  box-shadow:inset -1vw -2vw 1vw adjust-hue($color-beak, 10%);  
  border-radius:0 100% 0 0;
  z-index:-2;

  &:after{
    content:'';
    display:block;
    position:absolute;
    left:-50%;
    top:100%;
    width:100%;
    height:20%;
    border-radius:0 0 100% 0;
    background: adjust-hue($color-beak, -10%);
    z-index:-1;
    -webkit-backface-visibility: hidden;

  }    
}

.wing-front{
  position:absolute;
  width:60%;
  height:180%;
  top:0;
  left:25%;
  transform-origin:top center;
  border-radius:0 0 100% 10%;
  animation: $animation-flap;
  z-index:1;
}

.wing-back{
  z-index:-2;
  position:absolute;
  width:40%;
  height:130%;
  top:0;
  left:60%;
  transform-origin:top center;
  border-radius:0 0 100% 10%;
  // animation: $animation-flap;
  animation: infinite wing-back-flap 300ms ease;
  // -webkit-backface-visibility: hidden;
}

.tail{
  position:absolute;
  top:0%;
  right:90%;
  height:35%;
  width:100%;
  border-bottom-left-radius:100% 100%;
  transform:rotate(3deg);
  transform-origin:top right;

}

@keyframes fly-by{
  50%{
    opacity:1;
  }
  100%{
    transform: translate(120vw, -30vh);
    opacity:.1;
  }
}

@keyframes altitude-variance{
  50%{
    transform: translate(0, 6%);
  }
}

@keyframes wing-front-flap { 

  0%,100%{
    transform: rotateX(10deg) ;
  }
  50%{
    transform: rotateX(140deg) ;
  }
}

@keyframes wing-back-flap { 

  0%,100%{
    transform: rotateX(0deg) ;
  }
  50%{
    transform: rotateX(-120deg) ;
  }
}

// Settings Form

.form-toggle{
  display:block;
  box-sizing:border-box;
  border:none;
  appearance:none;
  padding:.5rem;
  height:2.5rem;
  cursor:pointer;
  background:none;
  text-transform:uppercase;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  color:$color-text;
  border-radius:4px;
  letter-spacing:.1em;  
  fill:$color-text;
  z-index:2;
  overflow:auto;
}

.settings-toggle{
  position:absolute;
  bottom:.5rem;
  right:.5rem;
  overflow:hidden;
}

.close-toggle{
  position:absolute;
  top:0;
  right:0;
  overflow: hidden;
}

.settings-form{
  position:absolute;
  right:.5rem;
  bottom:0;
  left:.5rem;
  z-index:3;
  background:$color-settings-form;  
  padding:2rem 1rem;
  box-sizing:border-box;
  position:absolute;
  border-radius:4px 4px 0 0;
  transition:all 300ms ease;
  font-family:'Montserrat', sans-serif;
  letter-spacing:.1em;
  font-size:1rem;
  box-shadow: 0 4px 4px rgba(255,255,255,.25);

  &.hidden{
    transform: translateY(100%);
  }

}

.form-field-group{
  white-space:nowrap;
  display:flex;
  flex-wrap:wrap;
  margin-bottom:.5rem;
  max-width:40rem;
  margin:0 auto 1rem;
  text-transform:uppercase;
  user-select:none;

  label{
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:.5rem;
    color:$color-text;
  }

  input{
    display:block;
    flex-grow:1;

    &.inverted{
      transform:rotate(180deg);
    }
  }

  span{
    width:4rem;
    flex-shrink:0;
    text-align:center;
    font-size:.75rem;
    color: $color-text;
  }
}
// Clear the console

console.clear();

// Settings and controls

const settings = {
  spawnRate:1000, // ms
  minAnimationDuration:400, // ms
  maxAnimationDuration:1000, // ms
  durationMultiple: 3,
  minSize:5, // vw
  maxSize:25, // vw
  saturation: 70, // %
  lightness: 75 // %
}

const updateSetting = (e) => {
  const {target} = e;
  const settingName = target.getAttribute('data-name');
  settings[settingName] = parseInt(target.value);
  console.log(settings)
}

const toggleSettingsMenu = () => {
  const settingsMenu = document.querySelector('.settings-form');
  settingsMenu.classList.contains('hidden') ? settingsMenu.classList.remove('hidden') : settingsMenu.classList.add('hidden')
}

const settingsToggle = document.querySelector('.settings-toggle');
settingsToggle.addEventListener('click', toggleSettingsMenu, false);

const closeToggle = document.querySelector('.close-toggle');
closeToggle.addEventListener('click', toggleSettingsMenu, false);

const inputs = document.querySelectorAll('input');

for(var i = 0; i < inputs.length; i++){
  inputs[i].addEventListener('change', updateSetting, false);
}

// Helper functions

const getRandomHslColorObject = () => {
  const colorObject = {
    h: getRandomNumberInRange(0, 360),
    s: settings.saturation,
    l: settings.lightness
  }

  return colorObject;
}

const getRandomNumberInRange = (min = 0, max = 100) => {
  return `${ Math.floor(Math.random() * (max - min)) + min}`;
}

// Birb stuff

const removeBirb = (e) =>{
  const birb = e.target;
  birb.parentElement.removeChild(birb);
}

const createBirb = (color = {h:100, s:60, l:100}) => {

  const birbSize = `${getRandomNumberInRange(settings.minSize, settings.maxSize)}vw`;
  
  
  
  const birbContainer = document.createElement('div');
  birbContainer.classList.add('birb-container');
  birbContainer.style.top = `${getRandomNumberInRange(0, 100)}%`;
  birbContainer.style.animationDuration = `${getRandomNumberInRange(settings.minAnimationDuration * settings.durationMultiple, settings.maxAnimationDuration * settings.durationMultiple)}ms`;
  birbContainer.addEventListener('animationend', removeBirb, false);

  const birb = document.createElement('div');
  birb.classList.add('birb');
  birb.style.height = birbSize;
  birb.style.width = birbSize;  
  birbContainer.appendChild(birb);

  const body = document.createElement('div');
  body.classList.add('body');
  body.style.backgroundColor = `hsl(${color.h}, ${color.s}%, ${color.l}%)`;
  birb.appendChild(body);

  const headContainer = document.createElement('div');
  headContainer.classList.add('head-container');
  body.appendChild(headContainer); 
  
  const head = document.createElement('div');
  head.classList.add('head');
  head.style.backgroundColor = `hsl(${color.h  + 90}, ${color.s}%, ${color.l}%)`;
  headContainer.appendChild(head); 

  const beak = document.createElement('div');
  beak.classList.add('beak');
  headContainer.appendChild(beak);   

  const wingFront = document.createElement('div');
  wingFront.classList.add('wing-front');
  wingFront.style.backgroundColor = `hsl(${color.h}, ${color.s}%, ${color.l - 10}%)`;
  body.appendChild(wingFront);  

  const wingBack = document.createElement('div');
  wingBack.classList.add('wing-back');
  wingBack.style.backgroundColor = `hsl(${color.h}, ${color.s}%, ${color.l - 20}%)`;
  body.prepend(wingBack);  

  const tail = document.createElement('div');
  tail.classList.add('tail');
  tail.style.backgroundColor = `hsl(${color.h}, ${color.s}%, ${color.l}%)`;
  body.appendChild(tail);    

  return birbContainer   
}

const makeBirbs = (birdCount = 1) => {
  for( var i = 0; i < birdCount; i++){
    const birbColorObject = getRandomHslColorObject();
    const birbContainer = createBirb(birbColorObject);  
    const targetElement = document.querySelector('.stage');
    targetElement.appendChild(birbContainer);
  }

  setTimeout( makeBirbs, settings.spawnRate)
}

//Init stuff
makeBirbs();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js