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

:root {
  --size: 120px;
  --size2: calc(var(--size) * 2);
  --line: 8px;
  --lineNo: calc(var(--line) * -1);
  --lineNo2: calc(var(--line) / -2);
  --color: #888;
  --bgColor: #fff;
  transition: --color 1s;
  margin: 0;
  height: 100vh;
  background:
    /* circles */
    radial-gradient(
      circle,
      #000 var(--line), 
      #fff 0 calc(var(--line) * 1.2),
      #0000 0
    ) var(--lineNo2) var(--lineNo2) / var(--size2) var(--size2),
    /* horizontal lines */
    linear-gradient(
      #0000 calc(var(--size) - var(--line)),
      var(--color) 0
    ) 0 0 / var(--size) var(--size),
    /* vertical lines */
    linear-gradient(
      90deg,
      #0000 calc(var(--size) - var(--line)),
      var(--color) 0
    ) 0 0 / var(--size) var(--size),
    /* diagonal lines */
    linear-gradient(
      45deg, 
      #0000 calc(50% - var(--line) / 2), 
      var(--color) 0 calc(50% + var(--line) / 2), 
      #0000 0
    ) 0 0 / var(--size) var(--size),
    linear-gradient(
      135deg, 
      #0000 calc(50% - var(--line) / 2), 
      var(--color) 0 calc(50% + var(--line) / 2), 
      #0000 0
    ) var(--lineNo) 0 / var(--size) var(--size),
    var(--bgColor);
  
  &:hover {
    --color: var(--bgColor);
  }
}