/* 
Optical illusion 1 
The lines look like they are not parallel, but they always are. Mouse over the page to see the effect
*/
body {
  --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;
  margin: 0;
  height: 100vh;
}

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