CodePen Embed - Hoothoot

<div id='body' class='outline'>

  <div class='wing left outline '></div>
  <div class='wing right outline'></div>
  <div id='face'>
    <div class='eye outline left'></div>
    <div class='eye outline right'></div>
    <div id='eyebrows'>

      <div class=brow-circles-fill>
        <div class='brow-circle left'></div>
        <div class='brow-circle right'></div>
      </div>
      <div class='brow-hands left'>
        <div class='big-hand'></div>
      </div>
      <div class='brow-hands right'>
        <div class='big-hand'></div>
      </div>
      <div class='brow-gears left'>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class='brow-gears right'>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class=brow-circles>
        <div class='brow-circle left'></div>
        <div class='brow-circle right'></div>
      </div>

    </div>
    <div class='beak-base outline'></div>
  </div>

  <div class='leg outline'></div>
  <div class='bottom-feathers-transition'></div>
  <div class='bottom-feathers-outline'>
    <div class='bottom-feathers'></div>
  </div>

</div>

<div class='grass'>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>

  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>

  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>

  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>

  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>
  <div class='blade'></div>

</div>

body {
  margin: 0;
  overflow: hidden;
}

.outline {
  border: 0.15rem black solid;
}

#body {
  position: absolute;
  left: calc(50% - 8em);
  /*   top: calc(50% - 8em); */
  bottom: 5.5rem;
  width: 16rem;
  height: 16rem;
  /*   background-color: RGB(150, 126, 106); */
  background: radial-gradient(
    circle at 50% 100%,
    RGB(236, 217, 192) 30%,
    rgba(150, 126, 106, 1) 30%
  );
  border-radius: 100%;
  z-index: 0;
}

#belly {
  position: absolute;
  left: 2rem;
  top: 10rem;
  width: 12rem;
  height: 12rem;
  background-color: RGB(236, 217, 192);
  border-radius: 100%;
  clip-path: circle(8rem at 6rem -1.75rem);
}

#face {
}

.eye {
  position: absolute;
  width: 5rem;
  height: 5rem;
  background-color: RGB(213, 108, 86);
  border-radius: 100%;
  z-index: 100;
}

.eye.left {
  left: 2rem;
  top: 3.5rem;
}

.eye.right {
  right: 2rem;
  top: 3.5rem;
}

.eye::after {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 100%;
  background-color: black;
}

.brow-circles-fill .brow-circle {
  z-index: 50;
}

.brow-circles {
  filter: drop-shadow(0.125rem 0 rgba(0, 0, 0, 1))
    drop-shadow(-0.125rem 0 rgba(0, 0, 0, 1))
    drop-shadow(0 0.125rem rgba(0, 0, 0, 1))
    drop-shadow(0 -0.125rem rgba(0, 0, 0, 1));
}

.brow-circle {
  position: absolute;
  width: 8rem;
  height: 8rem;
  border-radius: 100%;
  background-color: RGB(64, 62, 64);
  z-index: 5;
}

.brow-circle.left {
  left: 0.75rem;
  top: 2rem;
}

.brow-circle.right {
  right: 0.75rem;
  top: 2rem;
}

.brow-hands {
  position: absolute;
  width: 8rem;
  height: 8rem;
  /*   background-color: rgba(105,50,50,0.5); */
  /*   border: 1px solid red; */
  z-index: 10;
}

.brow-hands.left {
  left: 0.75rem;
  top: 2rem;
  transform: rotate(45deg);
}

.brow-hands.right {
  right: 0.75rem;
  top: 2rem;
  transform: rotate(-45deg) scaleX(-1);
}

.big-hand {
  position: absolute;
  width: 12rem;
  height: 1.5rem;
  right: 4rem;
  background-color: RGB(64, 62, 64);
  /*   background-color: red; */
  /*       border: 0.15rem black solid; */
  filter: drop-shadow(0.125rem 0 rgba(0, 0, 0, 1))
    drop-shadow(-0.125rem 0 rgba(0, 0, 0, 1))
    drop-shadow(0 0.125rem rgba(0, 0, 0, 1))
    drop-shadow(0 -0.125rem rgba(0, 0, 0, 1));
}

.big-hand::after {
  content: "";
  position: relative;
  top: -2.25rem;
  left: -2.25rem;
  display: block;
  width: 4rem;
  height: 6rem;
  background-color: RGB(64, 62, 64);
  transform: rotate(270deg);
  clip-path: polygon(50% 0%, 100% 70%, 50% 100%, 0 70%);
}

.brow-gears {
  position: absolute;
  width: 8rem;
  height: 8rem;
  top: 2rem;
  z-index: 25;
  /*   transform-origin: 75% 50%; */
}

.brow-gears.left {
  left: 0.75rem;
  transform: rotate(-30deg);
}

.brow-gears.right {
  right: 0.75rem;
  transform: scaleX(-1) rotate(-30deg);
}

.brow-gears div {
  position: absolute;
  top: 3.625rem;
  left: -2rem;
  background-color: RGB(64, 62, 64);
  border: 0.15rem black solid;
  width: 6rem;
  height: 0.75rem;
  transform-origin: 100% 50%;
}

.brow-gears div:nth-of-type(1) {
  position: absolute;
  transform: rotate(30deg);
  /*  margin-bottom: 0.5rem; */
}

.brow-gears div:nth-of-type(3) {
  position: absolute;
  transform: rotate(-30deg);
}

.beak-base {
  position: absolute;
  width: 2.5rem;
  height: 3.5rem;
  top: 6.5rem;
  left: 6.625rem;
  /*   clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%); */
  border-radius: 70% 70% 75% 75% / 50% 50% 100% 100%;
  background-color: RGB(185, 162, 164);
  z-index: 100;
}

.beak-base::after {
  content: "";
  display: block;
  position: absolute;
  top: -0.15rem;
  left: -0.15rem;
  width: 2.5rem;
  height: 2.5rem;
  background: RGB(231, 208, 214);
  border-radius: 70% 70% 75% 75% / 60% 60% 50% 50%;
  border: 0.15rem black solid;
}

.wing {
  position: absolute;
  width: 8rem;
  height: 2.5rem;
  top: 8.5rem;
  background: radial-gradient(
    circle at 30% 400%,
    rgba(124, 104, 87, 1) 80%,
    rgba(150, 126, 106, 1) 80%
  );

  border-radius: 100% 50% 75% 75% / 50% 40% 100% 100%;
  transform-origin: 100% 50%;
}

.wing::after {
  position: absolute;
  content: " ";
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background-color: RGB(150, 126, 106);
  right: -1.5rem;
  border-radius: 100%;
}

.wing.left {
  left: -6.5rem;
  transform: rotate(-30deg);
    animation: wave 8s ease infinite;
}

.wing.right {
  right: 2rem;
  transform: scaleX(-1) rotate(-30deg);
}

.bottom-feathers {
  position: absolute;
  width: 6rem;
  height: 5rem;
  top: 12rem;
  left: 4.75rem;
  background-color: RGB(236, 217, 192);
  clip-path: polygon(
    18% 85%,
    0 100%,
    5% 75%,
    50% 0%,
    95% 75%,
    100% 100%,
    82% 85%,
    75% 100%,
    60% 85%,
    50% 100%,
    40% 85%,
    25% 100%
  );

  filter: drop-shadow(0.125rem 0 rgba(0, 0, 0, 1))
    drop-shadow(-0.125rem 0 rgba(0, 0, 0, 1))
    drop-shadow(0 0.125rem rgba(0, 0, 0, 1))
    drop-shadow(0 -0.125rem rgba(0, 0, 0, 1));
  z-index: -5;
}

.bottom-feathers-outline {
  filter: drop-shadow(0.125rem 0 rgba(0, 0, 0, 1))
    drop-shadow(-0.125rem 0 rgba(0, 0, 0, 1))
    drop-shadow(0 0.125rem rgba(0, 0, 0, 1))
    drop-shadow(0 -0.125rem rgba(0, 0, 0, 1));
}

.bottom-feathers-transition {
  position: absolute;
  width: 7.5rem;
  height: 4.25rem;
  top: 11.5rem;
  left: 4.25rem;
  background-color: RGB(236, 217, 192);
  /*   background-color: red; */
  border-radius: 100%;
  z-index: 10;
}

.leg {
  position: absolute;
  width: 3rem;
  height: 4rem;
  top: 16rem;
  left: 6.125rem;
  background-color: RGB(201, 178, 187);
}

.grass {
  position: absolute;
  /*   display: inline-block; */
  bottom: -0.5rem;
  width: 100%;
  height: 8rem;
  overflow: hidden;
/*     opacity:0; */
}

.blade {
  height: 6rem;
  width: 1rem;
/*   background-image: url("https://www.transparenttextures.com/patterns/cardboard.png"); */
  background-size: 300px 300px;
  background-color: #00e676;
  border-radius: 100% 0 50% 0;
  float: left;
  transform-origin: 50% 100%;
  margin-top: 2rem;
  margin-left: -0.5rem;
/*   box-shadow: rgba(0,0,0, 0.25) 0.25rem 1rem 0.25rem; */
}

.blade:nth-of-type(2n) {
  width: 0.75rem;
  transform: rotate(10deg);
  height: 5rem;
  margin-top: 3rem;
}

.blade:nth-of-type(3n) {
  background-color: #00c853;
  border-radius: 0 100% 0 50%;
  height: 7rem;
  margin-top: 1rem;
  /*   transform: rotate(-10deg); */
}

.blade:nth-of-type(4n) {
  border-radius: 0 100% 0 50%;
  transform: rotate(-8deg);
}

.blade:nth-of-type(5n) {
  transform: rotate(4deg);
  border-radius: 0 100% 0 50%;

}

.blade:nth-of-type(6n) {
}

.blade:nth-of-type(7n) {
  background-color: #81c784;
  border-radius: 100% 0 50% 0;
          animation: wind-seven 7s ease alternate infinite;
  
}

.blade:nth-of-type(8n) {
}

.blade:nth-of-type(9n) {
  background-color: #4caf50;
    animation: wind-three 7s ease alternate infinite;
}

.blade:nth-of-type(13n) {
  background-color: #66bb6a;
  height: 7.5rem;
  margin-top: 0.5rem;

}

.blade:nth-of-type(16n) {
  width: 0.5rem;
  transform: rotate(-5deg);
  height: 8rem;
  margin-top: 0;
  animation: wind-five 7s ease alternate infinite;
}

.blade:nth-of-type(24n) {
  transform: rotate(12deg);
  height: 7.5rem;
  margin-top: 0.5;

}

@keyframes wind-three {
  100% {
    transform: rotate(5deg);
  }
}

@keyframes wind-five {
  100% {
    transform: rotate(5deg);
  }
}

@keyframes wind-seven {
  100% {
    transform: rotate(7deg);
  }
}

@keyframes wave {
  0% {
    transform: rotate(-30deg);
  }
  10% {
    transform: rotate(55deg);
  }
  15% {
    transform: rotate(35deg);
  }
  20% {
    transform: rotate(55deg);
  }
  25% {
    transform: rotate(45deg);
  }
  30% {
    transform: rotate(60deg);
  }
  35% {
    transform: rotate(45deg);
  }
  40% {
    transform: rotate(55deg);
  }
  46% {
    transform: rotate(40deg);
  }
  50% {
    transform: rotate(55deg);
  }
  55% {
    transform: rotate(45deg);
  }
  60% {
    transform: rotate(58deg);
  }
  65% {
    transform: rotate(42deg);
  }
  70% {
    transform: rotate(55deg);
  }
  75% {
    transform: rotate(40deg);
  }
  80% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}

Run Pen

This Pen is owned by Jonathan Lahue on CodePen.

See more by @JCLaHoot on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.