<article>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</article>

article {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  width: 80em;
  font-size: 1.5vmin;
}

div {
  aspect-ratio: 4 / 3;
  border: 0.5em solid;
  position: relative;
  
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
      radial-gradient(circle at 42% 55%, #000 1em, #0000 0),
      radial-gradient(circle at 58% 55%, #000 1em, #0000 0),
      conic-gradient(#0000 155deg, #000 0 205deg, #0000 0) 50% 53% / 20% 20%,
      radial-gradient(farthest-side at 50% 0, #000 99%, #0000) 50% 72% / 5em 1.25em,
      orange;
    background-repeat: no-repeat;
    mask:
      radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 0),
      radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 0);
  }
  
  &::after {
    content: "";
    box-sizing: border-box;
    font-family: Roboto, Helvetica, sans-serif;
    text-align: center;
    padding-top: 1.2em;
    font-size: 2em;
    position: absolute;
    inset: 0;
    background:
      radial-gradient(farthest-side circle at 40% 60%, #0000 28%, #000 28.2% 30%, #0000 0),
      radial-gradient(farthest-side circle at 60% 60%, #0000 28%, #000 28.2% 30%, #0000 0);
  }
  
  &:nth-child(n + 4) {
    &::before {
      mask:
        radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 0),
        radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 0),
        linear-gradient(#000 0 0);
    }
  }
}

/* OR */
article > :nth-child(1) {
  &::after { content: "trick OR treat"; }
  &::before { mask-composite: initial; }
}

/* AND */
article > :nth-child(2) {
  &::after { content: "trick AND treat"; }
  &::before { mask-composite: intersect; }
}

/* XOR... d'uh! */
article > :nth-child(3) {
  &::after { content: "trick XOR treat"; }
/*   &::before { -webkit-mask-composite: xor; } */
  &::before { mask-composite: exclude; }
}

/* NOR */
article > :nth-child(4) {
  &::after { content: "trick NOR treat"; }
  &::before { -webkit-mask-composite: destination-out; }
}

/* NAND... cheating a lot here :S */
article > :nth-child(5) {
  &::after { content: "trick NAND treat"; }
  &::before { 
    mask:
      linear-gradient(#000 0 0),
      radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 0),
      linear-gradient(#000 0 0),
      radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 0)
    ;
    mask-composite: subtract;
  }
}

/* XNOR */
article > :nth-child(6) {
  &::after { content: "trick XNOR treat"; }
  &::before { -webkit-mask-composite: xor; }
}