@property --color {
  syntax: '<color>';
  initial-value: #f00;
  inherits: true;
}

:root {
  --color: #000;
  margin: 0;
  font-size: 1vmax;
  height: 100vh;
  overflow: hidden;
  transition: --color 1s;
  background: #fd5;
  
  &:hover {
    --color: #0000;
  }
  
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 300em;
    height: 300em;
    background:
      repeating-linear-gradient(#0000 0 18em, #000 0 20em),
      conic-gradient(at 1em 8em, #0000 75%, var(--color) 0) 0 -5em / 2em 20em;
    transform: skewY(-45deg)
  }
  
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 300em;
    height: 300em;
    background:
      repeating-linear-gradient(#0000 0 18em, #000 0 20em),
      conic-gradient(at 1em 8em, #0000 75%, var(--color) 0) 0 -5em / 2em 20em;
    transform: rotate(90deg) skewY(45deg) translate(0.25em, 12em)
  }
}