Parallel Lines (II) - CSS Optical Illusions

Code Live Demo

:root {
  --color: #000;
  font-size: 1vmax;
  height: 100vh;
  overflow: hidden;
  background: #fd5;
  
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 300em;
    height: 300em;
    background:
      repeating-linear-gradient(#0000 0 18em, #000 0 20em),
      conic-gradient(at 1em 8em, #0000 75%, var(--color) 0) 0 -5em / 2em 20em;
    transform: skewY(-45deg)
  }
  
  &::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 300em;
    height: 300em;
    background:
      repeating-linear-gradient(#0000 0 18em, #000 0 20em),
      conic-gradient(at 1em 8em, #0000 75%, var(--color) 0) 0 -5em / 2em 20em;
    transform: rotate(90deg) skewY(45deg) translate(0.25em, 12em)
  }
}

About This Illusion

the black lines are parallel, but they appear not to be because of the direction of the bars crossing them.

I slightly overcomplicated this one while coding it. I initially built the black-and-red version below and tried to reuse more code than I probably should have.

Try This

Mouse over the demo to see the illusion in action.