<header>
  <h1>Background Patterns</h1>
</header>
<section class="wrapper">

  <div class="triangle-bw"></div>

  <div class="classy"></div>

  <div class="rough_paper"></div>

  <div class="little_circles"></div>

  <div class="diagonal_stripes"></div>

  <div class="crosshatch"></div>

  <div class="triangle2"></div>

  <div class="tartan"></div>

  <div class="triangles"></div>

</section>
<footer>coded with passion💛 by miXTim</footer>

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
header,
footer {
  font: 1rem/1.618em "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: #444;
  text-align: center;
}
.wrapper {
  width: min(1000px, 100%);
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 1rem auto;
  padding: 5px;
}
div {
  flex: 1 1 16rem;
  height: 10rem;
  margin: 5px;
  transition: transform 200ms ease;
  will-change: transform;
  user-select: none;
}
footer {
  position: static;
  bottom: 0;
  width: 100%;
  margin-top: 15px;
  padding: 1rem;
  background-color: #e2e2f2;
}

.triangle-bw {
  background-color: #eee8d0;
  background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 50%,
      #f0ecdb 50%,
      rgba(240, 236, 219, 0.1)
    ),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.1),
      rgba(215, 215, 230, 0.6) 50%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0.1)
    );
  background-size: 40px 40px;
}

.triangle2 {
  background-color: #f2ec99;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 49.5%,
    white 50%,
    white 50%,
    #f2f2e2 50.5%,
    #e7ff59
  );
  background-size: 20px 20px;
}

.triangles {
  background-color: #eee8d0;
  background-image: repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 50%,
      #f0ecdb 50%,
      rgba(240, 236, 219, 0.1)
    ),
    repeating-linear-gradient(
      45deg,
      white,
      rgba(255, 210, 10, 0.5) 50%,
      rgba(255, 255, 255, 0.8) 50%,
      rgb(255, 255, 255, 0.1)
    );
  background-size: 80px 80px;
}

.rough_paper {
  background-color: #e4d4bb;
  background-image: repeating-radial-gradient(
    circle,
    #e4d4bb,
    #e7dac6 50%,
    #e7dac6 100%
  );
  background-size: 6px 6px;
}

.little_circles {
  background-color: #2c3e50;
  background-image: repeating-radial-gradient(
    circle,
    #34495e,
    #34495e 45%,
    transparent 45%,
    transparent 60%,
    #34495e 60%,
    #34495e 100%
  );
  background-size: 10px 10px;
}

.diagonal_stripes {
  background-color: #1a171b;
  background-image: repeating-linear-gradient(
    135deg,
    #2f3238,
    #2f3238 5%,
    transparent 5%,
    transparent 50%
  );
  background-size: 20px 20px;
}

.crosshatch {
  background-color: #0f0f24;
  background-image: repeating-linear-gradient(
      135deg,
      #123456,
      #123456 10%,
      transparent 10%,
      transparent 50%
    ),
    repeating-linear-gradient(
      -135deg,
      #333,
      #333 10%,
      transparent 10%,
      transparent 50%
    );
  background-size: 10px 10px;
}

.classy {
  background: beige;
  background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 12px,
      whitesmoke 12px,
      whitesmoke 24px
    ),
    radial-gradient(circle at center center, white 33%, transparent 35%);
}

.tartan {
  background-image: repeating-linear-gradient(
      0deg,
      rgba(173, 69, 226, 0.23) 0px,
      rgba(173, 69, 226, 0.23) 1px,
      transparent 1px,
      transparent 22px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(173, 69, 226, 0.23) 0px,
      rgba(173, 69, 226, 0.23) 1px,
      transparent 1px,
      transparent 22px
    ),
    linear-gradient(45deg, hsl(246, 31%, 20%), hsl(246, 31%, 30%));
  background-size: 65px 65px;
}
div.active {
  position: fixed;
  width: 100%;
  height: 100%;
  top: -5px;
  z-index: 9;
}
div.active {
  animation: scale-down 400ms ease;
}
div:not(.active):hover {
  cursor: pointer;
  transform: scale(1.02);
}
div.active:after {
  content: "x";
  position: fixed;
  top: 1em;
  right: 1em;
  width: 1.5em;
  height: 1.5em;
  font: 100 24px/1.4 sans-serif;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
}

@keyframes scale-down {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1);
  }
}

Array.from(document.querySelectorAll('div')).forEach(div => {
  div.addEventListener('click', e => {
    div.classList.toggle('active');
  });
});