<div class="container">
  <div class="head"><h1>CSS Patterns</h1></div>
  <div class="block stripes"></div>
  <div class="block diagonal"></div>
  <div class="block dot"></div>
  <div class="block argyle"></div>
  <div class="block checkerboard"></div>
  <div class="block tartan"></div>
  <div class="block net"></div>
  <div class="block seigaiha"></div>
  <div class="block houndstooth"></div>
  <div class="block flower"></div>
  <div class="block wave"></div>
  <div class="block carbon"></div>
</div>

* {
  padding: 0;
  margin: 0;
}

body {
  background: black;
  font-family: 'Open Sans', sans-serif;
}

$width: 1100px;

.container {
  margin: 50px auto;
  width:  $width;
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}

.head {
  color: white;
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  padding-bottom: 30px;
}

@mixin grid($colNumber, $colGutter) {
  width: ($width - $colGutter * ($colNumber - 1)) / $colNumber;
  height: 220px;
  margin: $colGutter $colGutter 0 0;
  float: left;
  padding: 1px;
  box-sizing: border-box;
  background-clip: content-box;
  border: 5px solid hsla(0, 0%, 100%, .5);
  box-shadow: 0 0 15px 0px rgba(0, 0, 0, .2);
  &:nth-child(#{$colNumber}n + 1){
    margin-right: 0;
  }
}

.block {
  @include grid(3, 10px);
}

.stripes {
  $randomStripColor: hsla(0, 0%, 100%, .1);
  background: grey;
  background-image: 
    linear-gradient(90deg, $randomStripColor 3px, transparent 0),
    linear-gradient(90deg, $randomStripColor 11px, transparent 0),
    linear-gradient(90deg, $randomStripColor 23px, transparent 0);
  background-size: 11px 100%, 21px 100%, 33px 100%;
  background-clip: content-box;
}

.diagonal {
  $lightColor: rgba(255, 255, 255, .5);
  $stripWidth: 15px;
  background-color: grey;
  background-image: 
    repeating-linear-gradient(45deg, 
      transparent,
      transparent $stripWidth, 
      $lightColor $stripWidth, 
      $lightColor ($stripWidth * 2)
    );
}

.dot {
  $size: 40px;
  $dotSize: 10%;
  background-color: grey;
  background-image: 
    radial-gradient(white $dotSize, transparent 0),
    radial-gradient(white $dotSize, transparent 0);
  background-size: $size $size;
  background-position: 0 0, ($size / 2) ($size / 2);
}

.argyle {
  $deepColor: rgba(0, 0, 0, .1);
  $stripColor: rgba(255, 255, 255, .1);
  $argyleSize: 60px;
  background-color: grey;
  background-image:
    repeating-linear-gradient(120deg, 
      $stripColor, 
      $stripColor 1px, 
      transparent 1px, 
      transparent ($argyleSize / 2)
    ),
    repeating-linear-gradient(60deg, 
      $stripColor, 
      $stripColor 1px, 
      transparent 1px, 
      transparent ($argyleSize / 2)
    ),
    linear-gradient(60deg, 
      $deepColor 25%, 
      transparent 25%, 
      transparent 75%, 
      $deepColor 75%, 
      $deepColor
    ),
    linear-gradient(120deg, 
      $deepColor 25%, 
      transparent 25%, 
      transparent 75%, 
      $deepColor 75%, 
      $deepColor
    );
  background-size: ($argyleSize / sqrt(3)) $argyleSize;
}

.checkerboard {
  $deepColor: rgba(0, 0, 0, .2);
  $cubeSize: 25px;
  background-color: grey;
  background-image: 
    linear-gradient(45deg, 
      $deepColor 25%, 
      transparent 25%, 
      transparent 75%, 
      $deepColor 75%, 
      $deepColor
    ), 
    linear-gradient(45deg, 
      $deepColor 25%, 
      transparent 25%, 
      transparent 75%, 
      $deepColor 75%, 
      $deepColor
    );
  background-size: ($cubeSize * 2) ($cubeSize * 2);
  background-position: 0 0, $cubeSize $cubeSize;
}

.tartan {
  $length: 30px;
  $middleLength: 5px;
  $shortLength: 2px;
  $deepColor: rgba(0, 0, 0, .4);
  $lightColor: rgba(255, 255, 255, .2);
  $stripColor: rgba(0, 0, 0, .2);
  background-color: grey;
  background-image: 
    repeating-linear-gradient(
      transparent, 
      transparent $length, 
      $deepColor $length, 
      $deepColor ($length + $shortLength), 
      transparent ($length + $shortLength), 
      transparent ($length + $middleLength + $shortLength), 
      $deepColor ($length + $middleLength + $shortLength), 
      $deepColor ($length + $middleLength + $shortLength * 2), 
      transparent ($length + $middleLength + $shortLength * 2), 
      transparent ($length * 2 + $middleLength + $shortLength * 2), 
      $deepColor ($length * 2 + $middleLength + $shortLength * 2), 
      $deepColor ($length * 3 + $middleLength + $shortLength * 2), 
      $lightColor ($length * 3 + $middleLength + $shortLength * 2), 
      $lightColor ($length * 3 + $middleLength + $shortLength * 3), 
      $deepColor ($length * 3 + $middleLength + $shortLength * 3), 
      $deepColor ($length * 3 + $middleLength * 2 + $shortLength * 3), 
      $lightColor ($length * 3 + $middleLength * 2 + $shortLength * 3), 
      $lightColor ($length * 3 + $middleLength * 2 + $shortLength * 4), 
      $deepColor ($length * 3 + $middleLength * 2 + $shortLength * 4), 
      $deepColor ($length * 4 + $middleLength * 2 + $shortLength * 4), 
      transparent ($length * 4 + $middleLength * 2 + $shortLength * 4)
    ),
    repeating-linear-gradient(270deg, 
      transparent, 
      transparent $length, 
      $deepColor $length, 
      $deepColor ($length + $shortLength), 
      transparent ($length + $shortLength), 
      transparent ($length + $middleLength + $shortLength), 
      $deepColor ($length + $middleLength + $shortLength), 
      $deepColor ($length + $middleLength + $shortLength * 2), 
      transparent ($length + $middleLength + $shortLength * 2), 
      transparent ($length * 2 + $middleLength + $shortLength * 2), 
      $deepColor ($length * 2 + $middleLength + $shortLength * 2), 
      $deepColor ($length * 3 + $middleLength + $shortLength * 2), 
      $lightColor ($length * 3 + $middleLength + $shortLength * 2), 
      $lightColor ($length * 3 + $middleLength + $shortLength * 3), 
      $deepColor ($length * 3 + $middleLength + $shortLength * 3), 
      $deepColor ($length * 3 + $middleLength * 2 + $shortLength * 3), 
      $lightColor ($length * 3 + $middleLength * 2 + $shortLength * 3), 
      $lightColor ($length * 3 + $middleLength * 2 + $shortLength * 4), 
      $deepColor ($length * 3 + $middleLength * 2 + $shortLength * 4), 
      $deepColor ($length * 4 + $middleLength * 2 + $shortLength * 4), 
      transparent ($length * 4 + $middleLength * 2 + $shortLength * 4)
    ),
    repeating-linear-gradient(125deg, 
      transparent, 
      transparent 2px, 
      $stripColor 2px, 
      $stripColor 3px, 
      transparent 3px, 
      transparent 5px, 
      $stripColor 5px
    );
}

.net {
  $size: 40px;
  $holeSize: 40%;
  $reflective: hsla(0, 0%, 100%, .1);
  background:
    radial-gradient(black $holeSize, transparent 0) 0 0,
    radial-gradient(black $holeSize, transparent 0) ($size / 2) ($size / 2),
    radial-gradient($reflective $holeSize, transparent 20%) 0 1px,
    radial-gradient($reflective $holeSize, transparent 20%) ($size / 2) ($size / 2 + 1px);
  background-color: #282828;
  background-size: $size $size;
  background-clip: content-box;
}

.seigaiha {
  $mizuColor: grey;
  $size: 40px;
  background-color: $mizuColor;
  background-image: 
    radial-gradient(
      circle at 100% 150%, 
      $mizuColor 25%, 
      white 25%, 
      white 29%, 
      $mizuColor 29%, 
      $mizuColor 36%, 
      white 36%, 
      white 40%, 
      transparent 40%, 
      transparent
    ),
    radial-gradient(
      circle at 0 150%, 
      $mizuColor 25%, 
      white 25%, 
      white 29%, 
      $mizuColor 29%, 
      $mizuColor 36%, 
      white 36%, 
      white 40%, 
      transparent 40%, 
      transparent
    ),
    radial-gradient(
      circle at 50%  100%, 
      white 10%, 
      $mizuColor 10%, 
      $mizuColor 23%, 
      white 23%, 
      white 30%, 
      $mizuColor 30%, 
      $mizuColor 43%, 
      white 43%, 
      white 50%, 
      $mizuColor 50%, 
      $mizuColor 63%, 
      white 63%, 
      white 70%, 
      transparent 70%, 
      transparent
    ),
    radial-gradient(
      circle at 100% 50%, 
      white 5%, 
      $mizuColor 5%, 
      $mizuColor 15%, 
      white 15%, 
      white 20%, 
      $mizuColor 20%, 
      $mizuColor 30%, 
      white 30%, 
      white 35%, 
      $mizuColor 35%, 
      $mizuColor 45%, 
      white 45%, 
      white 50%, 
      transparent 50%, 
      transparent
    ),
    radial-gradient(
      circle at 0 50%, 
      white 5%, 
      $mizuColor 5%, 
      $mizuColor 15%, 
      white 15%, 
      white 20%, 
      $mizuColor 20%, 
      $mizuColor 30%, 
      white 30%, 
      white 35%, 
      $mizuColor 35%, 
      $mizuColor 45%, 
      white 45%, 
      white 50%, 
      transparent 50%, 
      transparent
    );
  background-size: $size ($size / 2);
}

.houndstooth {
  $size: 1.5em;
  background:
    linear-gradient(-45deg, 
      white 25%, 
      transparent 25%, 
      transparent 75%, 
      black 75%, 
      black
    ) 0 0,
    linear-gradient(-45deg, 
      black 25%, 
      transparent 25%, 
      transparent 75%, 
      white 75%, 
      white
    ) ($size / 2) ($size / 2),
    linear-gradient(45deg, 
      black 17%, 
      transparent 17%, 
      transparent 25%, 
      black 25%, 
      black 36%, 
      transparent 36%, 
      transparent 64%, 
      black 64%, 
      black 75%, 
      transparent 75%, 
      transparent 83%, 
      black 83%
    ) ($size / 2) ($size / 2);
  background-color: white;
  background-size: $size $size;
  background-clip: content-box;
}

.flower {
  $ikkonzomeColor: #333;
  $wasurenagusaColor: grey;
  background:
    radial-gradient(circle at 20px 20px,
      $ikkonzomeColor 4px,
      #ddd 4px,
      #ddd 7px,
      transparent 0
    ) 5px 5px,
    radial-gradient(circle at 20px 13px,
      $ikkonzomeColor 10px,
      #ddd 10px,
      #ddd 13px,
      transparent 0
    )  5px 5px,
    radial-gradient(circle at 12px 20px,
      $ikkonzomeColor 10px,
      #ddd 10px,
      #ddd 13px,
      transparent 0
    ) 5px 5px,
    radial-gradient(circle at 27px 20px,
      $ikkonzomeColor 10px,
      #ddd 10px,
      #ddd 13px,
      transparent 0
    )  5px 5px,
    radial-gradient(circle at 20px 25px,
      $ikkonzomeColor 10px,
      #ddd 10px,
      #ddd 13px,
      transparent 0
    )  5px 5px,
    radial-gradient(circle at 20px 20px,
      $wasurenagusaColor 4px,
      #ddd 4px,
      #ddd 7px,
      transparent 0
    )  40px 40px,
    radial-gradient(circle at 20px 13px,
      $wasurenagusaColor 10px,
      #ddd 10px,
      #ddd 13px,
      transparent 0
    ) 40px 40px,
    radial-gradient(circle at 12px 20px,
      $wasurenagusaColor 10px,
      #ddd 10px,
      #ddd 13px,
      transparent 0
    ) 40px 40px,
    radial-gradient(circle at 27px 20px,
      $wasurenagusaColor 10px,
      #ddd 10px,
      #ddd 13px,
      transparent 0
    ) 40px 40px,
    radial-gradient(circle at 20px 25px,
      $wasurenagusaColor 10px,
      #ddd 10px,
      #ddd 13px,
      transparent 0
    ) 40px 40px;
  background-color: #ddd; 
  background-size: 70px 70px;
  background-clip: content-box;
}

.wave {
  background-image: 
    repeating-radial-gradient(
      circle at 0 0, 
      transparent 0,
      #eee 10px
    ),
    repeating-linear-gradient(
      #ccc,
      #777
    );
}

.carbon {
  background:
    linear-gradient(27deg, 
      #151515 5px, 
      transparent 5px
    ) 0 5px,
    linear-gradient(207deg, 
      #151515 5px, 
      transparent 5px
    ) 10px 0px,
    linear-gradient(27deg, 
      #222 5px, 
      transparent 5px
    ) 0px 10px,
    linear-gradient(207deg, 
      #222 5px, 
      transparent 5px
    ) 10px 5px,
    linear-gradient(90deg, 
      #1b1b1b 10px, 
      transparent 10px
    ),
    linear-gradient(
      #1d1d1d 25%, 
      #1a1a1a 25%, 
      #1a1a1a 50%, 
      transparent 50%, 
      transparent 75%, 
      #242424 75%, 
      #242424
    );
  background-color: #131313;
  background-size: 20px 20px;
  background-clip: content-box;
}