- var square = 100
while square--
  .square

/*
  Johan Karlsson, 2020
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
  
  https://en.wikipedia.org/wiki/Vera_Moln%C3%A1r
*/

$side: 10;
$size: 90vmin / $side;
$gap: 16;
$xOffset: calc((100vw - 90vmin) / 2);
$yOffset: calc((100vh - 90vmin) / 2);

html, body {
  background-color: white;
  margin: 0;
  overflow: hidden;
}

.square {
  width: $size;
  height: $size;
  position: absolute;
  background-color: black;
  $i: 0;
  @for $x from 0 through $side - 1 {
    @for $y from 0 through $side - 1 {
      $i: $i + 1;
      &:nth-child(#{$i}) {
        left: calc(#{$xOffset} + #{$x * $size} + #{random($gap) - $gap / 2}px);
        top: calc(#{$yOffset} + #{$y * $size} + #{random($gap) - $gap / 2}px);
      }
    }
  } 
}