@charset "UTF-8";
html, body {
  display: grid;
}

html {
  height: 100%;
}

div {
  box-sizing: border-box;
  aspect-ratio: 1/1;
}

.box {
  display: grid;
  place-self: center;
  overflow: auto;
  position: relative;
  width: min(17em, 40vmin);
  box-shadow: 4px 4px 13px #141414;
  background: #fff;
}
.box::before, .box::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}
.box::before {
  inset: -45%;
  background: repeating-conic-gradient(#000 0% 12.5%, #fff 0% 25%);
  mix-blend-mode: difference;
  animation: r 5s linear infinite;
}
.box::after {
  box-shadow: inset 0 0 3em teal;
  background: radial-gradient(#000 0.25em, lime, teal);
  mix-blend-mode: darken;
}

@keyframes r {
  0% {
    transform: rotate(1turn);
  }
}
.🔳 {
  margin: 5%;
  padding: 5%;
  background: linear-gradient(#fff 0 0) content-box, linear-gradient(#000 0 0);
}
.box > .🔳 {
  animation: s 1.25s linear infinite;
}

@keyframes s {
  to {
    transform: scale(1.25);
  }
}