#main
  - for (var x = 0; x < 800; x++)
    svg(viewBox="0 0 10 10")
      polygon(class="▲" fill="rgba(255,255,255,0)" points="5 0, 10 10, 0 10")     

:root {
  --cols: 20;
  --rows: 40;
}

body{ 
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100vh;
  background-color: #111;
  margin: 0;
}

#main {
  display: grid;
  cursor: pointer;
  grid-gap: 3px 0;
  grid-template-columns: repeat(var(--cols), 15px);
  grid-template-rows: repeat(var(--rows), 15px);
}

svg {
  &:nth-child(even) {
    transform: rotate(180deg);
  }
  .▲{
    transform-origin: center;
    &.is--active {
      animation: 500ms fadeIn cubic-bezier(0.2, 0.9, 0.3, 1.2);
    }
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px)scale(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0px)scale(1);
  }
}

//Set up variables
const main = document.getElementById("main");
var col = getComputedStyle(document.documentElement).getPropertyValue('--cols')
var allShapes = document.getElementsByClassName("▲");
var activeShapes = document.getElementsByClassName("▲ is--active");

//Set click event on container to refresh content
main.addEventListener('click', randomize);

function generateShapes(){
  //Loop through all shapes
  for(i = 0; i < allShapes.length; i++) { 
    //Set random number
    var d = Math.random();
    //Set current shape
    var shape = allShapes[i];
    //Activate shapes with increasing likelihood according to the iteration shape (i), dom order (col), and random number (d) 
    if( i < (col*4) && d < .1 ||
        i > (col*4) && i < (col*8) && d < .2 ||
        i > (col*8) && i < (col*12) && d < .3 ||
        i > (col*12) && i < (col*16) && d < .4 ||
        i > (col*16) && i < (col*20) && d < .5 ||
        i > (col*20) && i < (col*24) && d < .6 ||
        i > (col*24) && i < (col*28) && d < .7 ||
        i > (col*28) && i < (col*32) && d < .8 ||
        i > (col*32) && i < (col*36) && d < .9 ||
        i > (col*36) && i < (col*40) && d < 1 ) {
          shape.classList += " is--active";
    } 
    //If activated, set opacity to the random number
    if(shape.classList.contains("is--active")) {
       shape.setAttribute("fill","rgba(255,255,255," + d + ")");
    }
  }
}

//Reset all active shaps to default fill and classes
function clearAll() {
  while (activeShapes[0]) {
    activeShapes[0].setAttribute("fill","rgba(255,255,255,0)");
    activeShapes[0].classList.remove('is--active')
  }
}

//Clear all active shapes and randomize
function randomize() {
  clearAll();
  generateShapes();
}

//Generate shapes on initial page load
generateShapes();