:root {
  --size: 6px;
  --width: calc(var(--size) * 2);
  --height: calc(var(--size) * 3);
  margin: 0;
  height: 100vh;
  background: #777;
  font-size: var(--size);
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    width: 400em;
    height: 400em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background:
      conic-gradient(at var(--size) var(--size), #fff 25%, #0000 0 75%, #000 0) 0 0 / var(--width) var(--height),
      #aaa;
  }
  
  &::after {
    content: "";
    position: absolute;
    width: 34em;
    height: 34em;
    top: 50%;
    left: 50%;
    border-inline: 0.5em solid #aaa;
    border-block: 2em solid #aaa;
    transform: translate(-50%, -50%) rotate(-45deg);
    background:
      conic-gradient(at var(--size) var(--size), #fff 25%, #0000 0 75%, #000 0) 0 0 / var(--width) calc(var(--height) * 2),
      conic-gradient(at var(--size) var(--size), #fff 25%, #0000 0 75%, #000 0) calc(var(--size) * 0.5) var(--height) / var(--width) calc(var(--height) * 2),
      #aaa;
  }
}