JavaScript – Activate SVG Circle Border as you progress, but one way and another.

For my poor English, sir, I will try to explain what I need as much as possible. jsFiddle will help you understand what I want: https://jsfiddle.net/8natrpqm/

var circle = document.querySelector('.animated-circle--animated > .animated-circle__circle');
var ghostCircle = document.querySelector('.animated-circle--animated > .animated-circle__circle--ghost');

var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

ghostCircle.style.strokeDasharray = `${circumference} ${circumference}`;
ghostCircle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
  const offset = circumference - percent / 100 * circumference;
  circle.style.strokeDashoffset = offset;
}

function setGhostProgress(percent) {
  const offset = circumference - percent / 100 * circumference;
  ghostCircle.style.strokeDashoffset = offset;
}


var progress = 0;
var ghostProgress = 0;

function animateProgress() {
  if (progress < 18) {
    progress++;
    setProgress(progress);

    setTimeout(animateProgress, 60);
  } else {
    animateGhostProgress();
  }
}

function animateGhostProgress() {
  if (ghostProgress < 18) {
    ghostProgress++;
    setGhostProgress(ghostProgress);
    setTimeout(animateGhostProgress, 60);
  } else {

  }
}

animateProgress();

.circles {
  position: relative;
}

.animated-circle--fixed {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.animated-circle--animated {
  position: relative;
  z-index: 50;
}

.animated-circle__circle {
  transition: 0.35s stroke-dashoffset;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.animated-circle__circle--ghost {
  z-index: 60;
}

<div class="circles">
  <svg class="animated-circle animated-circle--fixed" width="400" height="400">
        <circle class="animated-circle__circle" stroke="lightblue" stroke-width="2" fill="transparent" r="199" cx="200" cy="200" />
      </svg>

  <svg class="animated-circle animated-circle--animated" width="400" height="400">
        <circle class="animated-circle__circle" stroke="blue" stroke-width="2" fill="transparent" r="199" cx="200" cy="200" />
        <circle class="animated-circle__circle animated-circle__circle--ghost" stroke="lightblue" stroke-width="2" fill="transparent" r="199" cx="200" cy="200" />
    
        <circle class="circle-icon__circle" stroke="transparent" stroke-width="0" fill="red" r="15" cx="375" cy="110" />
      </svg>
</div>

I want to move the boundary of the SVG circle, so that it goes to a point, then slowly disappears. I’m using the stroke dash offset, working fine to go like 0 to 15, but I really can’t find a way to go the opposite way (meaning 15 stays up, but down again from 0 Have to go up to 15).

In Fiddle, you’ll see that I first tried to add a ghost circle to overlap the dynamic circle, but the result is a bit weird, like there’s a graphical problem.

Any guesses?

Thanks !