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

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

div {
  aspect-ratio: 7/6;
  border: 0.35em solid;
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: 
      radial-gradient(30% 76% at 110% 50%, #0000 calc(81% - 1px), darkorange 81% 87%, #0000 calc(87% + 1px)) -20% 65% / 50% 34%,
      radial-gradient(30% 76% at -10% 50%, #0000 calc(81% - 1px), darkorange 81% 87%, #0000 calc(87% + 1px)) 120% 66% / 50% 32%,
      linear-gradient(orange 0 0) 48% 69% / 1em 1em,
      radial-gradient(circle at 42% 55%, #000 1em, #0000 calc(1em + 1px)),
      radial-gradient(circle at 58% 55%, #000 1em, #0000 calc(1em + 1px)),
      conic-gradient(#0000 155deg, #000 0 205deg, #0000 0) 50% 53% / 20% 20%,
      radial-gradient(farthest-side at 50% 0, #000 calc(100% - 1px), #0000) 50% 72% / 5em 1.25em,
      orange;
    background-repeat: no-repeat;
    mask:
      radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 calc(30% + 1px)),
      radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 calc(30% + 1px));
  }

  &::after {
    content: "";
    box-sizing: border-box;
    font-family: Roboto, Helvetica, sans-serif;
    text-align: center;
    padding-top: 2em;
    font-size: 2.125em;
    position: absolute;
    inset: 0;
    background:
      radial-gradient(farthest-side circle at 40% 60%, #0000 calc(29% - 1px), #000a 29% 30%, #0000 calc(30% + 1px)),
      radial-gradient(farthest-side circle at 60% 60%, #0000 calc(29% - 1px), #000a 29% 30%, #0000 calc(30% + 1px));
  }
}

/*TRICK*/
article > :nth-child(1) {
  &::after { content: "trick"; }
  &::before { 
    mask: radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 calc(30% + 1px));
  }
}

/* TREAT */
article > :nth-child(2) {
  &::after { content: "treat"; }
  &::before { 
    mask: radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 calc(30% + 1px));
  }
}

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

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

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

/* NOR */
article > :nth-child(6) {
  &::after { content: "trick NOR treat"; }
  &::before { 
    mask:
      linear-gradient(#000 0 0) subtract,
      radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 calc(30% + 1px)),
      radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 calc(30% + 1px))
      ;
  }
}

/* XNOR */
article > :nth-child(7) {
  &::after { content: "trick XNOR treat"; }
  &::before { 
    mask:
      linear-gradient(#000 0 0),
      radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 calc(30% + 1px)),
      radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 calc(30% + 1px));
    mask-composite: exclude;
  }
}

/* NAND */
article > :nth-child(8) {
  &::after { content: "trick NAND treat"; }
  &::before { 
    mask:
      linear-gradient(#000 0 0) exclude,
      radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 calc(30% + 1px)) intersect,
      radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 calc(30% + 1px));
  }
}

/* TRICK AND NOT TREAT */
article > :nth-child(9) {
  &::after { content: "trick AND NOT-treat"; }
  &::before { 
    mask:
      radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 calc(30% + 1px)) subtract,
      radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 calc(30% + 1px));
  }
}

/* NOT TRICK AND TREAT */
article > :nth-child(10) {
  &::after { content: "NOT-trick AND treat"; }
  &::before {
    mask:
      radial-gradient(farthest-side circle at 60% 60%, #000 30%, #0000 calc(30% + 1px)) subtract,
      radial-gradient(farthest-side circle at 40% 60%, #000 30%, #0000 calc(30% + 1px));
  }
}