<div class="full"></div>
.full {
  position:fixed;
  inset:0;
  z-index:336;
  display: flex;
  filter:blur(3px) contrast(15) hue-rotate(260deg);
  background:#ffff;
}
.full:before {
  content: "";
  flex: 1;
  background: #ff00ff;
  -webkit-mask: 
      linear-gradient(60deg,#0000 40%,#000,#0000 60%),
      conic-gradient(from -90deg at 80% 80%,#000 90deg,#0000 0), 
      conic-gradient(from 90deg at 20% 20%,#0000 90deg ,#000 0);
  -webkit-mask-size: 500% 500%,30px 30px,30px 30px;
  -webkit-mask-position: 0 0,center,center;
  -webkit-mask-composite: xor,destination-atop;
  mask-composite:exclude,subtract;
  animation:f 4s infinite linear;
}
@keyframes f {
  80%,100% {-webkit-mask-position:100% 100%,center,center}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.