<div class="_bg">
  <div class="_bg_1-1-1"></div>
  <div class="_bg_1-1-2"></div>
  <div class="_bg_1-1-3"></div>
</div>
<div class="_bg">
  <div class="_bg_1-2-1"></div>
  <div class="_bg_1-2-2"></div>
  <div class="_bg_1-2-3"></div>
</div>
<div class="_bg">
  <div class="_bg_2-1-1"></div>
  <div class="_bg_2-1-2"></div>
  <div class="_bg_2-1-3-1"></div>
  <div class="_bg_2-1-3-2"></div>
</div>
<div class="_bg">
  <div class="_bg_2-2-1"></div>
  <div class="_bg_2-2-2"></div>
  <div class="_bg_2-2-3"></div>
</div>
<div class="_bg">
  <div class="_bg_2-3-1"></div>
  <div class="_bg_2-3-2"></div>
  <div class="_bg_2-3-3"></div>
</div>
<div class="_bg">
  <div class="_bg_2-4-1"></div>
  <div class="_bg_2-4-2"></div>
  <div class="_bg_2-4-3"></div>
</div>
<div class="_bg">
  <div class="_bg_2-5-1"></div>
  <div class="_bg_2-5-2"></div>
  <div class="_bg_2-5-3"></div>
</div>
<div class="_bg">
  <div class="_bg_2-6-1"></div>
  <div class="_bg_2-6-2"></div>
  <div class="_bg_2-6-3"></div>
  <div class="_bg_2-6-4"></div>
</div>
/*
**  body
*/
body {
  background-image: linear-gradient(
      45deg,
      rgba(128, 128, 128, 0.125) 25%,
      transparent 25%,
      transparent 75%,
      rgba(128, 128, 128, 0.125) 75%
    ),
    linear-gradient(
      45deg,
      rgba(128, 128, 128, 0.125) 25%,
      transparent 25%,
      transparent 75%,
      rgba(128, 128, 128, 0.125) 75%
    );
  background-position: calc(50% + 10px) 10px, calc(50% + 20px) 20px;
  background-size: 20px 20px;
  margin: 0;
}

/*
**  body ._bg
*/
._bg {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 10px;
  position: relative;
}
._bg:before {
  border-top: dotted 1px;
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
}

/*
**  body ._bg > [class*="_bg_"]
*/
[class*="_bg_"] {
  margin: 10px;
  position: relative;
  transition: background-position 1s ease 0s;
  width: 160px;
  height: 160px;
}
[class*="_bg_1-"]:before {
  border: solid 2px red;
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
}
[class*="_bg_2-"]:before {
  border-top: solid 2px red;
  box-shadow: 0 80px 0 red, 0 160px 0 red;
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
}
[class*="_bg_2-"]:after {
  border-left: solid 2px red;
  box-shadow: 80px 0 0 red, 160px 0 0 red;
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
}

/*
**  body ._bg > [class*="_bg_1-1-"]
*/
._bg_1-1-1 {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 20px,
    currentcolor 20px,
    currentcolor 40px
  );
}
._bg_1-1-2 {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 20px,
    currentcolor 20px,
    currentcolor 40px
  );
}
._bg_1-1-3 {
  background-image: repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 20px,
      currentcolor 20px,
      currentcolor 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 20px,
      currentcolor 20px,
      currentcolor 40px
    );
}

/*
**  body ._bg > [class*="_bg_1-2-"]
*/
._bg_1-2-1 {
  background-image: repeating-radial-gradient(
    circle at 0 100%,
    transparent 0,
    transparent 20px,
    currentcolor 20px,
    currentcolor 40px
  );
}
._bg_1-2-2 {
  background-image: repeating-radial-gradient(
    circle at 100% 0,
    transparent 0,
    transparent 20px,
    currentcolor 20px,
    currentcolor 40px
  );
}
._bg_1-2-3 {
  background-image: repeating-radial-gradient(
      circle at 0 100%,
      transparent 0,
      transparent 20px,
      currentcolor 20px,
      currentcolor 40px
    ),
    repeating-radial-gradient(
      circle at 100% 0,
      transparent 0,
      transparent 20px,
      currentcolor 20px,
      currentcolor 40px
    );
}

/*
**  body ._bg > [class*="_bg_2-1-"]
*/
._bg_2-1-1 {
  background-image: radial-gradient(currentcolor 70.71%, transparent 70.71%);
  background-size: 80px 80px;
}
._bg_2-1-2 {
  background-image: radial-gradient(
    transparent 35.355%,
    currentcolor 35.355%,
    currentcolor 70.71%,
    transparent 70.71%
  );
  background-size: 80px 80px;
}
._bg_2-1-3-1 {
  background-image: radial-gradient(currentcolor 35.355%, transparent 35.355%);
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-1-3-2 {
  background-image: radial-gradient(currentcolor 35.355%, transparent 35.355%),
    radial-gradient(currentcolor 35.355%, transparent 35.355%);
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
}
._bg_2-1-1:hover,
._bg_2-1-2:hover,
._bg_2-1-3-1:hover {
  background-position: 160px 160px;
}
._bg_2-1-3-2:hover {
  background-position: 160px 160px, 200px 200px;
}

/*
**  body ._bg > [class*="_bg_2-2-"]
*/
._bg_2-2-1 {
  background-image: linear-gradient(0deg, transparent 50%, currentcolor 50%);
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-2-2 {
  background-image: linear-gradient(90deg, transparent 50%, currentcolor 50%);
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-2-3 {
  background-image: linear-gradient(0deg, transparent 50%, currentcolor 50%),
    linear-gradient(90deg, transparent 50%, currentcolor 50%);
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-2-1:hover,
._bg_2-2-2:hover,
._bg_2-2-3:hover {
  background-position: 160px 160px;
}

/*
**  body ._bg > [class*="_bg_2-3-"]
*/
._bg_2-3-1 {
  background-image: linear-gradient(
    45deg,
    transparent 25%,
    currentcolor 25%,
    currentcolor 50%,
    transparent 50%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-3-2 {
  background-image: linear-gradient(
    135deg,
    transparent 25%,
    currentcolor 25%,
    currentcolor 50%,
    transparent 50%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-3-3 {
  background-image: linear-gradient(
      45deg,
      transparent 25%,
      currentcolor 25%,
      currentcolor 50%,
      transparent 50%,
      transparent 75%,
      currentcolor 75%
    ),
    linear-gradient(
      135deg,
      transparent 25%,
      currentcolor 25%,
      currentcolor 50%,
      transparent 50%,
      transparent 75%,
      currentcolor 75%
    );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-3-1:hover,
._bg_2-3-2:hover,
._bg_2-3-3:hover {
  background-position: 0 160px;
}

/*
**  body ._bg > [class*="_bg_2-4-"]
*/
._bg_2-4-1 {
  background-image: linear-gradient(
    45deg,
    currentcolor 25%,
    transparent 25%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-4-2 {
  background-image: linear-gradient(
    45deg,
    currentcolor 25%,
    transparent 25%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 40px 40px;
  background-size: 80px 80px;
}
._bg_2-4-3 {
  background-image: linear-gradient(
      45deg,
      currentcolor 25%,
      transparent 25%,
      transparent 75%,
      currentcolor 75%
    ),
    linear-gradient(
      45deg,
      currentcolor 25%,
      transparent 25%,
      transparent 75%,
      currentcolor 75%
    );
  background-position: 0 0, 40px 40px;
  background-size: 80px 80px;
}
._bg_2-4-1:hover {
  background-position: 160px 160px;
}
._bg_2-4-2:hover {
  background-position: 200px 200px;
}
._bg_2-4-3:hover {
  background-position: 160px 160px, 200px 200px;
}

/*
**  body ._bg > [class*="_bg_2-5-"]
*/
._bg_2-5-1 {
  background-image: linear-gradient(
    45deg,
    currentcolor 25%,
    transparent 25%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-5-2 {
  background-image: linear-gradient(
    135deg,
    currentcolor 25%,
    transparent 25%,
    transparent 75%,
    currentcolor 75%
  );
  background-position: 80px 80px;
  background-size: 80px 80px;
}
._bg_2-5-3 {
  background-image: linear-gradient(
      45deg,
      currentcolor 25%,
      transparent 25%,
      transparent 75%,
      currentcolor 75%
    ),
    linear-gradient(
      135deg,
      currentcolor 25%,
      transparent 25%,
      transparent 75%,
      currentcolor 75%
    );
  background-position: 0 0, 80px 80px;
  background-size: 80px 80px;
}
._bg_2-5-1:hover {
  background-position: 160px 160px;
}
._bg_2-5-2:hover {
  background-position: 240px 240px;
}
._bg_2-5-3:hover {
  background-position: 160px 160px, 240px 240px;
}

/*
**  body ._bg > [class*="_bg_2-6-"]
*/
._bg_2-6-1 {
  background-image: linear-gradient(
    45deg,
    currentcolor 12.5%,
    transparent 12.5%,
    transparent 87.5%,
    currentcolor 87.5%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-6-2 {
  background-image: linear-gradient(
    135deg,
    currentcolor 12.5%,
    transparent 12.5%,
    transparent 87.5%,
    currentcolor 87.5%
  );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-6-3 {
  background-image: linear-gradient(
      45deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    ),
    linear-gradient(
      135deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    );
  background-position: 0 0;
  background-size: 80px 80px;
}
._bg_2-6-4 {
  background-image: linear-gradient(
      45deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    ),
    linear-gradient(
      135deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    ),
    linear-gradient(
      45deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    ),
    linear-gradient(
      135deg,
      currentcolor 12.5%,
      transparent 12.5%,
      transparent 87.5%,
      currentcolor 87.5%
    );
  background-position: 0 0, 0 0, 40px 40px, 40px 40px;
  background-size: 80px 80px;
}
._bg_2-6-1:hover,
._bg_2-6-2:hover,
._bg_2-6-3:hover {
  background-position: 160px 160px;
}
._bg_2-6-4:hover {
  background-position: 160px 160px, 160px 160px, 200px 200px, 200px 200px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.