@keyframes ball {
  0% { transform: translate(0, 0); }
  100% { transform: translate(0, -92%); }
}

:root {
  height: 100vh;
  overflow: hidden;
  font-size: 0.8vw;
  background: 
    linear-gradient(#000 0 0) 50% 50% / 0.4em 2em,
    linear-gradient(#000 0 0) 50% 50% / 2em 0.4em,
    linear-gradient(#000 0 0) 50% 3em / 0.4em 2em,
    linear-gradient(#000 0 0) 50% 3.8em / 2em 0.4em,
    linear-gradient(#000 0 0) 50% calc(100% - 3em) / 0.4em 2em,
    linear-gradient(#000 0 0) 50% calc(100% - 3.8em) / 2em 0.4em,
    #777;
  background-repeat: no-repeat;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    --mask:
      radial-gradient(7.75em at calc(100% + 5.25em) 50%,#0000 calc(99% - 1em),#000 calc(101% - 1em) 99%,#0000 101%) calc(50% - 5em + .5px) calc(50% - 10em)/ 10em 20em,
      radial-gradient(7.75em at -5.25em 50%,#0000 calc(99% - 1em),#000 calc(101% - 1em) 99%,#0000 101%) calc(50% + 5em) 50%/10em 20em;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: #fff;
    clip-path: polygon(5% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 95% 0, 95% 100%, 5% 100%);
    clip-path: polygon(0% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 100% 0, 100% 100%, 0% 100%)
  }
  
  &::after {
    --color: #f00;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background:
      radial-gradient(circle at 50% 96%, red 2em, #0000 0) 50% 50% / 8% 100%
      ;
    animation: ball 3s linear alternate infinite;
    clip-path: polygon(0% 0, 45% 0, 45% 100%, 55% 100%, 55% 0, 100% 0, 100% 100%, 0% 100%)
  }
}