html {
  background: #111;
}

body {
  background-color: black;
  width: 80vmin;
  height: 80vmin;
  overflow: hidden;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  background: linear-gradient(180deg, #010 46%, midnightblue 52%);
}

body::before,
body::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
}

body::before {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cpath%20id%3D%22circle%22%20d%3D%22M%208%2C64%20a%2056%2C56%200%201%2C0%20112%2C0%20a%2056%2C56%200%201%2C0%20-112%2C0%22%20fill%3D%22transparent%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20attributeType%3D%22XML%22%20type%3D%22rotate%22%20from%3D%22-4%2064%2064%22%20to%3D%22206%2064%2064%22%20dur%3D%2216384ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%3C%2Fpath%3E%3Ctext%20x%3D%220%22%20font-size%3D%2216%22%3E'%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%95%3Cset%20id%3D%22moon1%22%20attributeName%3D%22visibility%22%20begin%3D%220ms%3B%20moon8.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%96%3Cset%20id%3D%22moon2%22%20attributeName%3D%22visibility%22%20begin%3D%2216384ms%3B%20moon1.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%97%3Cset%20id%3D%22moon3%22%20attributeName%3D%22visibility%22%20begin%3D%2232768ms%3B%20moon2.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%98%3Cset%20id%3D%22moon4%22%20attributeName%3D%22visibility%22%20begin%3D%2249152ms%3B%20moon3.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%91%3Cset%20id%3D%22moon5%22%20attributeName%3D%22visibility%22%20begin%3D%2265536ms%3B%20moon4.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%92%3Cset%20id%3D%22moon6%22%20attributeName%3D%22visibility%22%20begin%3D%2281920ms%3B%20moon5.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%93%3Cset%20id%3D%22moon7%22%20attributeName%3D%22visibility%22%20begin%3D%2298304ms%3B%20moon6.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%94%3Cset%20id%3D%22moon8%22%20attributeName%3D%22visibility%22%20begin%3D%22114688ms%3B%20moon7.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E'%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
  mix-blend-mode: luminosity;
}

body::after {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cpath%20id%3D%22circle%22%20d%3D%22M%208%2C64%20a%2056%2C56%200%201%2C0%20112%2C0%20a%2056%2C56%200%201%2C0%20-112%2C0%22%20fill%3D%22transparent%22%3E%3CanimateTransform%20attributeName%3D%22transform%22%20attributeType%3D%22XML%22%20type%3D%22rotate%22%20from%3D%22176%2064%2064%22%20to%3D%22386%2064%2064%22%20dur%3D%2216384ms%22%20repeatCount%3D%22indefinite%22%3E%3C%2FanimateTransform%3E%3C%2Fpath%3E%3Ctext%20x%3D%220%22%20font-size%3D%2216%22%3E'%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%95%3Cset%20id%3D%22moon1%22%20attributeName%3D%22visibility%22%20begin%3D%220ms%3B%20moon8.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%96%3Cset%20id%3D%22moon2%22%20attributeName%3D%22visibility%22%20begin%3D%2216384ms%3B%20moon1.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%97%3Cset%20id%3D%22moon3%22%20attributeName%3D%22visibility%22%20begin%3D%2232768ms%3B%20moon2.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%98%3Cset%20id%3D%22moon4%22%20attributeName%3D%22visibility%22%20begin%3D%2249152ms%3B%20moon3.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%91%3Cset%20id%3D%22moon5%22%20attributeName%3D%22visibility%22%20begin%3D%2265536ms%3B%20moon4.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%92%3Cset%20id%3D%22moon6%22%20attributeName%3D%22visibility%22%20begin%3D%2281920ms%3B%20moon5.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%93%3Cset%20id%3D%22moon7%22%20attributeName%3D%22visibility%22%20begin%3D%2298304ms%3B%20moon6.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E%3CtextPath%20xlink%3Ahref%3D%22%23circle%22%20visibility%3D%22hidden%22%3E%F0%9F%8C%94%3Cset%20id%3D%22moon8%22%20attributeName%3D%22visibility%22%20begin%3D%22114688ms%3B%20moon7.end%22%20dur%3D%2216384ms%22%20to%3D%22visible%22%3E%3C%2Fset%3E%3C%2FtextPath%3E'%3C%2Ftext%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
  transform: scaleX(-1);
  mix-blend-mode: luminosity;
  filter: blur(0.5vmin);
}