<div id="sun">🌞</div>
<div id="forest"></div>
<div id="grass">
  <div id="bug">🐞</div>
</div>
<css-doodle id="dood"></css-doodle>
body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient(
    circle farthest-corner at 100% 0%,
    #ffa500,
    50%,
    lightblue 90%
  );
  background-attachment: fixed;
}

$ground: #42aa46;
$tan: #a7ac5c;
$green2: #878822;
$brown:#211610;
$brightgreen:#4a560c;
$graygreen:#303b2b;

#sun {
  position: absolute;
  z-index:-10;
  top: 2%;
  right: 0%;
  font-size: 5em;
  animation:sunshine 180s infinite alternate;
}
@keyframes sunshine {
   to {transform:rotate(360deg);}
 }

.tree {
  position: absolute;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  &__1,  &__2,  &__3,  &__5 {
    width: 0;
    height: 0;
    border-radius:10%;
  }
  &__5 {
    /*added this top branch on last-sw */
    border: 20px solid transparent;
    border-bottom: 25px solid $tan;
  }
  &__1 {
    border: 45px solid transparent;
    border-bottom: 50px solid $green2;
    margin-top: -60px;
  }
  &__2 {
    border: 60px solid transparent;
    border-bottom: 65px solid $brightgreen;
    margin-top: -80px;
  }
  &__3 {
    border: 70px solid transparent;
    border-bottom: 80px solid $graygreen;
    margin-top: -100px;
  }
  &__4 {
    /*trunk base*/
    width: 10px;
    height: 50px;
    background: $brown;
  }
}
#grass {
  background-image: linear-gradient(to left,$green2,$ground);
  position: absolute;
  bottom: 0;
  width: 100vw;
  height: 40px;
}
#bug {
  transform-origin:0% 100%;
  transform:rotate(100deg);
  animation:walk 200s infinite ease-in-out;
}

@keyframes walk {
  to {
      transform:translateX(102vw) rotate(90deg);
  }
}
View Compiled
function getCss(gridSize, is3d) {
  var doodl = `:doodle {
  @grid:${gridSize}/ 100%;
  width:100vw;
  height:100vh;
  }
  :container {
    transform-style:${is3d ? "preserve-3d" : "flat"};
  }
  :after {
    content:@p(🦋);
  } 
  @random(.15) {
    filter:hue-rotate(@r(-180deg, 180deg));
  }
  
  animation: fly @r(10s, 20s) infinite linear;
  will-change:transform;
  position:absolute;
  left:@r(100%);/*butterfly starting pos*/
  bottom:@r(75px, 250px);/*tree height is up to 250px*/
 
  @keyframes fly {
    0% {
      transform:
      translateX(@r(-20px, 20px))
      translateY(@r(-20px, 20px));
    }
    33% {
      transform:
      translateX(calc(@p(-1,1)*@r(20)*@p(1vmax)))
      translateY(calc(-1*@r(40)*1vmax))
      rotateY(@r(15turn, 25turn))
      rotateZ(@r(-.05turn, .05turn));
    }
    66% {
      transform:
      translateX(calc(@p(-1,1)*@r(20)*@p(1vmax)))
      translateY(calc(-1*@r(30,60)*1vmax))
      rotateY(@r(35turn, 45turn))
      rotateZ(@r(-.05turn, .05turn));
    }
    100% {
      transform:
      translateX(calc(@p(-1,1,1)*@r(40)*1vmax))
      translateY(calc(-100*1vmax))
      rotateY(@r(55turn, 70turn))
      rotateZ(@r(-.05turn, .05turn))
      ;
    }
  }
`;
  return doodl;
}


/*INIT*/
var body = document.querySelector("body");
var dood = document.getElementById("dood");
var forest = document.querySelector("div#forest");
body.onload = init;
window.addEventListener( 'resize', init, false ); 

/*HELPERS*/
function init() {
  
  dood.update(getCss(15, false));
  let wid = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  let density = Math.floor(wid / 10);
  forest.innerHTML = "";
  let min = -20;/*x-axis coords*/
  let max = 120;
  for (let i = 0; i < density; i++) {
    let pos = (Math.random() * (max - min + 1)) + min;
    let hei = getRandomIntInclusive(5, 250);
    forest.appendChild(generateTree(hei, pos));
  }
}

function generateTree(height, position) {
  let template = `
      <div class="tree__5"></div>
      <div class="tree__1"></div>
      <div class="tree__2"></div>
      <div class="tree__3"></div>
      <div class="tree__4" style="height:${height}px"></div>
    `;
  let el = document.createElement("div");
  el.setAttribute("class", "tree");
  el.style.left = `${position}%`;
  el.innerHTML = template;
  el.style.zIndex = Math.random() > 0.5 ? -10 : 10;
  return el;
}
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/css-doodle@0.7.2/css-doodle.min.js