body {
  background: #343434;
}

svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.st1 {
  stroke: #eec6e0;
  stroke-width: 1;
  fill: transparent;
}

.dot {
  fill: url(#radial);
  stroke: none;
}

.st0 {
  stroke: #de1b55;
  stroke-width: 1;
  stroke-dasharray: 770;
  stroke-dashoffset: 0;
  animation: dash 10s ease-in-out;
  opacity: 10;
  fill: url(#linear);
}

@keyframes dash {
  0% {
    stroke-dashoffset: 670;
    fill: none;
    opacity: 0;
  }
  30% {
    opacity: 5;
    fill: none;
    stroke-dashoffset: 770;
    opacity: 10;
    stroke: #de1b55;
  }
  80% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 10;
    fill: url(#linear);
  }
}