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

body {
  --c: #00f;
  overflow: hidden;
  transition: --c 1s; 

  &:hover {
    --c: #fff;
  }

  &::before {
    --p: #0000 calc(50% - 0.2vmin), var(--c) calc(50% - 0.1vmin) calc(50% + 0.1vmin), #0000 calc(50% + 0.2vmin);
    aspect-ratio: 1;
    background:
      linear-gradient(#f00 0 0) 40.5% 0 / 0.9vmin 100% no-repeat,
      linear-gradient(#f00 0 0) 59.5% 0 / 0.9vmin 100% no-repeat,
      linear-gradient( 0deg, var(--p)),
      linear-gradient( 8deg, var(--p)),
      linear-gradient(16deg, var(--p)),
      linear-gradient(23deg, var(--p)),
      linear-gradient(30deg, var(--p)),
      linear-gradient(36deg, var(--p)),
      linear-gradient(42deg, var(--p)),
      linear-gradient(47deg, var(--p)),
      linear-gradient(52deg, var(--p)),
      linear-gradient(56deg, var(--p)),
      linear-gradient(60deg, var(--p)),
      linear-gradient(63deg, var(--p)),
      linear-gradient(66deg, var(--p)),
      linear-gradient(69deg, var(--p)),
      linear-gradient(71deg, var(--p)),
      linear-gradient(73deg, var(--p)),
      linear-gradient(75deg, var(--p)),
      linear-gradient(77deg, var(--p)),
      linear-gradient( -8deg, var(--p)),
      linear-gradient(-16deg, var(--p)),
      linear-gradient(-23deg, var(--p)),
      linear-gradient(-30deg, var(--p)),
      linear-gradient(-36deg, var(--p)),
      linear-gradient(-42deg, var(--p)),
      linear-gradient(-47deg, var(--p)),
      linear-gradient(-52deg, var(--p)),
      linear-gradient(-56deg, var(--p)),
      linear-gradient(-60deg, var(--p)),
      linear-gradient(-63deg, var(--p)),
      linear-gradient(-66deg, var(--p)),
      linear-gradient(-69deg, var(--p)),
      linear-gradient(-71deg, var(--p)),
      linear-gradient(-73deg, var(--p)),
      linear-gradient(-75deg, var(--p)),
      linear-gradient(-77deg, var(--p));
    content: "";
    left: 50%;
    position: absolute;    
    top: 50%;
    translate: -50% -50%;
    width: 100vmin;
  }
}