body {
  background-color: black;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  overflow: visible;
}

path.b,
path.ar,
path.j,
ellipse.o {
  animation: draw 0.6s ease-in-out forwards;
}

path.b {
  stroke-dasharray: 72;
  stroke-dashoffset: -72;
  animation-delay: 0s;
}

path.ar {
  stroke-dasharray: 76;
  stroke-dashoffset: -76;
  animation-delay: 0.4s;
}

path.j {
  stroke-dasharray: 23;
  stroke-dashoffset: -23;
  animation-delay: 1s;
}

ellipse.o {
  stroke-dasharray: 53.9;
  stroke-dashoffset: -53.9;
  animation-delay: 1.3s;
}

rect.dot {
  filter: drop-shadow(0 0 2px #f29d68);
  opacity: 0;
  animation: fadein 0.6s ease-in-out forwards;
  animation-delay: 3s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fadein {
  to {
    opacity: 1;
  }
}