<div class="fabrics">
  <div class="swatch argyle">
  </div>
  <div class="swatch houndstooth">
  </div>
  <div class="swatch zigzag">
  </div>
  <div class="swatch madras">
  </div>
</div>

body,
html {
  height: 100%;
  display: grid;
}

.fabrics {
  width: 625px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 310px);
}

.swatch {
  width: 300px;
  height: 300px;
}

/* All Patterns from Lea Verou's CSS3 Patterns Gallery: https://projects.verou.me/css3patterns/ */

.argyle {
  background-color: green;
  background-image: repeating-linear-gradient(
      120deg,
      rgba(22, 105, 255, 1),
      rgba(22, 105, 255, 1) 2px,
      transparent 2px,
      transparent 60px
    ),
    repeating-linear-gradient(
      60deg,
      rgba(22, 105, 255, 1),
      rgba(22, 105, 255, 1) 2px,
      transparent 2px,
      transparent 60px
    ),
    linear-gradient(
      60deg,
      rgba(21, 105, 55, 1) 25%,
      transparent 60%,
      transparent 40%,
      rgba(0, 0, 0, 0.1) 40%,
      black
    ),
    linear-gradient(
      120deg,
      rgba(0, 0, 0, 0.1) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.1) 75%,
      rgba(0, 0, 0, 0.1)
    );
  background-size: 70px 120px;
}

.houndstooth {
  background: linear-gradient(
        -45deg,
        white 50%,
        transparent 25%,
        transparent 50%,
        black 75%,
        black
      )
      0 0,
    linear-gradient(
        -45deg,
        black 25%,
        transparent 25%,
        transparent 75%,
        white 75%,
        white
      )
      1em 1em,
    linear-gradient(
        45deg,
        black 20%,
        transparent 50%,
        transparent 25%,
        black 65%,
        black 36%,
        transparent 36%,
        transparent 64%,
        black 64%,
        black 85%,
        transparent 45%,
        transparent 53%,
        black 83%
      )
      1em 1em;
  background-color: black;
  background-size: 1em 1em;
}

.zigzag {
  background: linear-gradient(135deg, gold 35%, transparent 35%) -50px 0,
    linear-gradient(225deg, green 35%, transparent 35%) -50px 0,
    linear-gradient(315deg, gold 35%, transparent 35%),
    linear-gradient(45deg, green 35%, transparent 35%);
  background-size: 100px 100px;
  background-color: black;
}

.madras {
  background-color: hsl(134, 53%, 42%);
  background-image: repeating-linear-gradient(
      45deg,
      transparent 5px,
      hsla(7, 2%, 11%, 0.5) 40px,
      hsla(7, 2%, 1%, 0.5) 60px,
      hsla(5, 3%, 3%, 0.5) 80px,
      hsla(5, 3%, 3%, 0.5) 100px,
      hsla(5, 53%, 63%, 0.5) 35px,
      hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 50px,
      hsla(197, 62%, 11%, 0) 50px,
      hsla(197, 62%, 11%, 0) 60px,
      hsla(5, 53%, 63%, 0.5) 60px,
      hsla(5, 53%, 63%, 0.5) 70px,
      hsla(35, 91%, 65%, 0.5) 70px,
      hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px,
      hsla(35, 91%, 65%, 0) 90px,
      hsla(5, 53%, 63%, 0.5) 90px,
      hsla(5, 53%, 63%, 0.5) 10px,
      hsla(5, 53%, 63%, 0) 10px,
      hsla(5, 53%, 63%, 0) 120px,
      hsla(7, 62%, 11%, 0.5) 120px,
      hsla(7, 2%, 11%, 0.5) 140px
    ),
    repeating-linear-gradient(
      135deg,
      transparent 5px,
      hsla(7, 62%, 11%, 0.5) 5px,
      hsla(7, 62%, 11%, 0.5) 10px,
      hsla(5, 53%, 63%, 0) 10px,
      hsla(5, 53%, 63%, 0) 35px,
      hsla(5, 53%, 63%, 0.5) 35px,
      hsla(5, 53%, 63%, 0.5) 40px,
      hsla(7, 62%, 11%, 0.5) 40px,
      hsla(7, 62%, 11%, 0.5) 50px,
      hsla(7, 62%, 11%, 0) 50px,
      hsla(197, 62%, 11%, 0) 60px,
      hsla(5, 53%, 63%, 0.5) 60px,
      hsla(5, 53%, 63%, 0.5) 70px,
      hsla(35, 91%, 65%, 0.5) 70px,
      hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px,
      hsla(35, 91%, 65%, 0) 90px,
      hsla(5, 53%, 63%, 0.5) 90px,
      hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px,
      hsla(5, 53%, 63%, 0) 140px,
      hsla(7, 62%, 11%, 0.5) 140px,
      hsla(7, 62%, 11%, 0.5) 160px
    );
}