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

:root {
  --size: 120px;
  --size2: calc(var(--size) * 2);
  --line: 16px;
  --lineNo2: calc(var(--line) / -2);
  --color: #fff8;
  --bgColor: #000;
  transition: --color 1s;
  margin: 0;
  height: 100vh;
  background:
    radial-gradient(
      circle,
      #fff calc(var(--line) * 0.75),
      #0000 0
    ) var(--lineNo2) var(--lineNo2) / var(--size2) var(--size2),
    linear-gradient(
      #0000 calc(var(--size) - var(--line)), 
      var(--color) 0
    ) 0 0 / var(--size) var(--size),
    linear-gradient(
      90deg, 
      #0000 calc(var(--size) - var(--line)), 
      var(--color) 0
    ) 0 0 / var(--size) var(--size),
    var(--bgColor);
  
  &:hover {
    --color: var(--bgColor);
  }
}