Random 8Bit Lawn

In this example below you will see how to do a Random 8Bit Lawn with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nikname, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nikname ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Random 8Bit Lawn</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="colors">
  <div class="color">#3eb96e</div>
  <div class="color">#44c169</div>
  <div class="color">#37a659</div>
  <div class="color">#1c5437</div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nikname/random-8bit-lawn-NGGmNa */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #3eb96e;
  font-family: Roboto;
  overflow: hidden;
}

.colors .color {
  margin: 5px;
  padding: 10px 0;
  border: 2px solid white;
  width: 100px;
  text-align: center;
  color: white;
  text-transform: uppercase;
}
.colors .color:nth-child(1) {
  background-color: #44c169;
}
.colors .color:nth-child(2) {
  background-color: #3eb96e;
}
.colors .color:nth-child(3) {
  background-color: #37a659;
}
.colors .color:nth-child(4) {
  background-color: #1c5437;
}

.grassbig {
  position: absolute;
  width: 10px;
  height: 10px;
}
.grassbig:after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  box-shadow: 4px 10px #1c5437, 8px 6px #1c5437, 12px 10px #1c5437, 16px 6px #1c5437, 20px 10px #1c5437;
}

.grasssmall {
  position: absolute;
  width: 10px;
  height: 10px;
}
.grasssmall:after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  box-shadow: 4px 10px #1c5437, 8px 6px #1c5437, 12px 10px #1c5437;
}


/*Downloaded from https://www.codeseek.co/nikname/random-8bit-lawn-NGGmNa */
$( document ).ready(function() {
  var w = window.innerWidth;
  var h = window.innerHeight;

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  function addBigGrass() {
    var marginTop = getRandomInt(0,h);
    var marginLeft = getRandomInt(0,w);
    $('body').append('<div class="grassbig" style="margin-top:' + marginTop + 'px;margin-left:' + marginLeft + 'px"></div>'); 
  }

  function addSmallGrass() {
    var marginTop = getRandomInt(0,h);
    var marginLeft = getRandomInt(0,w);
    $('body').append('<div class="grasssmall" style="margin-top:' + marginTop + 'px;margin-left:' + marginLeft + 'px"></div>'); 
  }

  for(var i = 0; i<=9; i++) {
    addBigGrass();
  }
  for(var i = 0; i<=9; i++) {
    addSmallGrass();
  }
});

Comments