html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background: black;
}

.layer {
  position: absolute;
  width: 200%;
  height: 200%;
  background: repeating-linear-gradient(
      0deg,
      #00ff00 0px,
      #00ff00 2px,
      black 2px,
      black 6px
    ),
    repeating-linear-gradient(
      90deg,
      red 0px,
      red 3px,
      black 3px,
      black 8px
    );
  opacity: 0.5;
  mix-blend-mode: difference;
  animation: tear 0.05s infinite steps(2);
}

@keyframes tear {
  0% { transform: translate(0,0) skewX(0deg); }
  25% { transform: translate(-5px, 3px) skewX(10deg); }
  50% { transform: translate(5px, -3px) skewX(-10deg); }
  75% { transform: translate(-10px, 6px) skewX(20deg); }
  100% { transform: translate(0,0) skewX(0deg); }
}