/*
optical illusion
It looks like the top rectangle is leaning/tilted to the left. But it's parallel to the one at the bottom. This one is better seeing big. Mouse over to reveal. The weight is not really needed, so I commmented it.
*/
@property --color {
  inherits: true;
  syntax: '<color>';
  initial-value: #000;
}
body {
  --color: #000;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  transition: --color 1s;
  background:
/*     radial-gradient(circle at calc(50% - 33vmin) calc(50% - 20vmin), blue 2.25vmin, #0000 calc(2.25vmin + 1px)),
    linear-gradient(blue 0 0) calc(50% - 33vmin) calc(50% - 15vmin) / 0.75em 3em no-repeat,
    linear-gradient(blue 0 0) calc(50% - 33vmin) calc(50% - 13vmin) / 3em 3em no-repeat, */
    radial-gradient(circle, blue 1vmin, #0000 0);
/*   background: linear-gradient(blue 0 0) 50% 50% / 1em 1em no-repeat; */
  
  &::before {
    content: "";
    width: 80vmin;
    height: 8vmin;
    border: 0.5vmin solid;
    position: absolute;
    top: calc(50% - 1vmin);
    left: 50%;
    translate: -50% -100%;
    background: repeating-linear-gradient(10deg, #fff 0 0.7vmin, var(--color) 0 1vmin)
  }
  
  &::after {
    content: "";
    width: 35vmin;
    height: 10vmin;
    border: 0.5vmin solid;
    position: absolute;
    top: calc(50% + 1vmin);
    left: 50%;
    translate: -50% 0%;
    background: repeating-linear-gradient(-10deg, #fff 0 0.7vmin, var(--color) 0 1vmin)
  }
  
  &:hover {
    --color: #fff;
  }
}