//- Define svg shape and animation
mixin triangle(num, color)
  polygon( 
    points=""
    fill="none" 
    stroke=color 
    stroke-width="5")
    animate(
      attributeName="points"
      repeatCount="indefinite"
      dur="4s"
      begin=num+"s"
      from="50 57.5, 50 57.5, 50 57.5"
      to="50 -75, 175 126, -75 126")

//- Create Overlay  
div(class="overlay")

//- Instantiate triangles
div(class="container")
  - for (var x = 1; x < 60; x++)
    svg(class="shape" viewBox="0 0 100 115" preserveAspectRatio="xMidYMin slice")
      +triangle(0, "hsl(320,100%,70%)")
      +triangle(1, "hsl(240,100%,70%)")
      +triangle(2, "hsl(160,100%,70%)")
      +triangle(3, "hsl(80,100%,70%)")

$cols: 10;
$rows: 6;
$cells: $cols * $rows;
$bgcolor: #6223D2;
$shapeHeight: 230;
$shapeWidth: 200;

body {
  margin: 0; 
  background-color: $bgcolor;
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
}

//Radial gradient to fade edges of viewport
.overlay {
  width: 100vw;
  height: 100vh;
  position: absolute; 
  z-index: 2;
  background: radial-gradient(circle, transparent 0%, transparentize($bgcolor, .15) 100%);
}

//Container to provide grid layout for all items
.container {
  display: grid;

  grid-template-columns: repeat($cols, $shapeWidth+px);
  grid-template-rows: repeat($rows, $shapeHeight+px);
  transform: translate(-3%, -4%); // Starting point bleeds off edge
}

//Invividual shapes
.shape {
  width: $shapeWidth+px;
  height: $shapeHeight+px;
  //Create hexagon mask 
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); 
  
  //Snap hexagon together by moving each "row" up and over
  @for $i from 1 through $cells {
    @if $i > $cols {
      &:nth-child(#{$i}) {
        transform: translate(-50%, -25%);   
      }
    }
    @if $i > ($cols * 2) {
      &:nth-child(#{$i}) {
        transform: translate(0%, -50%);   
      }
    }
    @if $i > ($cols * 3) {
      &:nth-child(#{$i}) {
        transform: translate(-50%, -75%);   
      }
    }
    @if $i > ($cols * 4) {
      &:nth-child(#{$i}) {
        transform: translate(0%, -100%);   
      }
    }
    @if $i > ($cols * 5) {
      &:nth-child(#{$i}) {
        transform: translate(-50%, -125%);   
      }
    }
  }
}
      

//Nothing to see here 👍