:root {
  --x: 18vh;
  --y: calc(var(--x) * 2 / 3);
  --hy: calc(var(--y) / 2);
  --qx: calc(var(--x) / 4);
  background:
    linear-gradient(#0000 93%, #666 0) 0 0 / var(--x) var(--hy),
    conic-gradient(#fff 25%, #0000 0 75%, #000 0) 0 0 / var(--x) var(--y),
    conic-gradient(#fff 25%, #0000 0 75%, #000 0) var(--qx) var(--hy) / var(--x) var(--y);

  /* code to reveal the effect */
  transition: background-position 1s;
}

:root:hover {
  background-position: 0 0, 0 0, 0 var(--hy);
}