Route Trace

<div class="nuda-route">
  <svg viewBox="0 0 200 100" preserveAspectRatio="none">
    <path class="nuda-route__bg"
          d="M10 80 Q40 80 60 60 T120 35 Q150 20 190 18"
          fill="none" stroke="rgba(255,255,255,.08)" stroke-width="3"
          stroke-linecap="round" stroke-dasharray="2 6" />
    <path class="nuda-route__draw"
          d="M10 80 Q40 80 60 60 T120 35 Q150 20 190 18"
          fill="none" stroke="#e4ff54" stroke-width="3"
          stroke-linecap="round" />
    <circle cx="10"  cy="80" r="5" fill="#62b6ff" stroke="#fafafa" stroke-width="2" />
    <circle class="nuda-route__end" cx="190" cy="18" r="5"
            fill="#e4ff54" stroke="#fafafa" stroke-width="2" />
  </svg>
</div>

.nuda-route {
  width: 100%;
  max-width: 240px;
  padding: 8px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
}

.nuda-route svg {
  width: 100%;
  height: 80px;
  overflow: visible;
}

.nuda-route__draw {
  stroke-dasharray: 280;
  stroke-dashoffset: 280;
  filter: drop-shadow(0 0 4px #e4ff54);
  animation: _routeDraw 2.4s cubic-bezier(.16,1,.3,1) forwards;
}

.nuda-route__end {
  transform-origin: 190px 18px;
  animation: _routeEnd .5s cubic-bezier(.34,1.56,.64,1) 2.4s both;
}

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

@keyframes _routeEnd {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-route__draw {
    animation: none;
    stroke-dashoffset: 0;
  }
  .nuda-route__end {
    animation: none;
  }
}