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

body {
  --c: #fff;
  margin: 0;
  height: 100vh;
  background:
    linear-gradient(#0000 calc(50% - 1px), #333 0 calc(50% + 1px), #0000 0),
    linear-gradient(90deg, #0000 calc(50% - 1px), #333 0 calc(50% + 1px), #0000 0),
    
    linear-gradient(45deg, #0000 calc(50% - 0.5px), #333 0 calc(50% + 0.5px), #0000 0) 50% 50% / 12vmin 12vmin,
    linear-gradient(-45deg, #0000 calc(50% - 0.5px), #333 0 calc(50% + 0.5px), #0000 0) 50% 50% / 12vmin 12vmin,
    
    linear-gradient(45deg, #0000 calc(50% - 2px), var(--c) 0 calc(50% + 2px), #0000 0) 50% 50% / 12vmin 12vmin,
    linear-gradient(-45deg, #0000 calc(50% - 2px), var(--c) 0 calc(50% + 2px), #0000 0) 50% 50% / 12vmin 12vmin,
    
    conic-gradient(#b2b2b2 25%, #ff9 0 50%, #fdf 0 75%, #9ff 0)
    ;
  transition: --c 1s;
  
  &:hover {
    --c: #fff0;
  }
}