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

:root:hover::before {
  --color: #0000;
}

:root::before {
  --color: #000;
  transition: --color 1s;
  content: "";
  width: 60vmin;
  height: 80vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background:
    linear-gradient(var(--color) 0 0) 30vmin 0 / 9vmin 100% no-repeat, 
    radial-gradient(300% 150% at calc(300% + 1vmin) 110%, #0000 calc(100% - 1vmin), #000 0 calc(100% - 1px), #0000 0) 0 0 / 50% 100% no-repeat,
    radial-gradient(300% 150% at calc(-200% - 1vmin) 110%, #0000 calc(100% - 1vmin), #000 0 calc(100% - 1px), #0000 0) 100% 0 / 50% 100% no-repeat
}