body {
  display: flex;
  justify-content: center;
  margin: 0;
  height: 100vh;
  background: #000;
}

svg {
  align-self: center;
  width: 100vmin;
  height: 100vmin;
  box-shadow: inset 0 0 0 0.125em #000;
  background: radial-gradient(#000000 14%, rgba(0, 0, 0, 0) 17%), radial-gradient(#000000 14%, rgba(0, 0, 0, 0) 17%) 0.75em 0.75em, radial-gradient(#999999 15%, rgba(0, 0, 0, 0) 20%) 0 0.075em, radial-gradient(#999999 15%, rgba(0, 0, 0, 0) 20%) 0.75em 0.825em #666;
  background-size: 1.5em 1.5em;
}

.pos:nth-child(1) polygon {
  fill: #fbd047;
  animation-duration: 8s;
  animation-direction: normal;
}
.pos:nth-child(1) circle {
  fill: #d7a505;
}

.pos:nth-child(2) polygon {
  fill: #fb7c6d;
  animation-duration: 6.5s;
  animation-direction: reverse;
}
.pos:nth-child(2) circle {
  fill: #f8230a;
}

.pos:nth-child(3) polygon {
  fill: #f561ca;
  animation-duration: 6s;
  animation-direction: normal;
}
.pos:nth-child(3) circle {
  fill: #e20ea4;
}

.pos:nth-child(4) polygon {
  fill: #dd7aef;
  animation-duration: 4.5s;
  animation-direction: reverse;
}
.pos:nth-child(4) circle {
  fill: #c61fe4;
}

.pos:nth-child(5) polygon {
  fill: #c4a6dd;
  animation-duration: 4s;
  animation-direction: normal;
}
.pos:nth-child(5) circle {
  fill: #935cc1;
}

.pos:nth-child(6) polygon {
  fill: #62b6f2;
  animation-duration: 13.74687s;
  animation-direction: normal;
}
.pos:nth-child(6) circle {
  fill: #1288dc;
}

.pos:nth-child(7) polygon {
  fill: #84d2ba;
  animation-duration: 8.83728s;
  animation-direction: reverse;
}
.pos:nth-child(7) circle {
  fill: #40b08d;
}

.pos:nth-child(8) polygon {
  fill: #b8ed83;
  animation-duration: 14.72879s;
  animation-direction: normal;
}
.pos:nth-child(8) circle {
  fill: #85e02a;
}

polygon {
  animation: r 0s linear infinite;
}

@keyframes r {
  to {
    transform: rotate(1turn);
  }
}
.pos path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

mask .w {
  fill: #fff;
}

.cover {
  fill: #000;
}