limit the number of points in svg path

Question

I'm developed the below graph using SVG. I added the point to the end of the path using stroke-dasharray, but there are multiple points been added. How to add one point end of the purple path? Is it possible to do that using stroke-dasharray?

https://i.stack.imgur.com/fXFrO.png

This is my HTML so far:

<svg style="fill:none; stroke:#81125A" width="300px" height="200px">
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
      <stop offset="0%" stop-color="#81125A" />
      <stop offset="100%" stop-color="#81125A" />
    </linearGradient>

    <path d=" M  130.45001850481378   166  A  78 78 107 0 1 126.20062143070965 96.52297197783665" stroke="#e7e7e8"></path>

    <path d=" M  131.14095054523523   86.82703015701578  A  78 78 107 0 1 189.84677986512304 49.427292161274664" stroke="#e7e7e8"></path>

    <path d=" M  200.72216074279504   49.04751549251053  A  78 78 107 0 1 261.8938594545413 82.26103796461837" stroke="#e7e7e8"></path>

    <path d=" M  267.49850888669266   91.58874102031533  A  78 78 107 0 1 266.2203371568729 164.81515037921423" stroke="#e7e7e8"></path>

    <path d=" M  130.45001850481378   166  A  78 78 107 1 1 265.5499814951862 166" id="purple" fill='none' class="purple"></path>

    <path d=" M  130.45001850481378   166  A  78 78 107 1 1 265.5499814951862 166" id="white" fill='none' class="border"></path>

    <path d=" M  130.45001850481378   166  A  78 78 107 1 1 265.5499814951862 166" id="back" fill='none' class="fill"></path>

 </svg>

And this my CSS:

path {
    stroke-linecap: round;
    stroke-width: 8;
  }

path.grey {
  stroke: #e7e7e8;
}

path.purple {
  stroke: url(#gradient);
  stroke-dasharray: 100,326;
  stroke-dashoffset: 100; 
  stroke-width: 8;
  animation: dash 2.6s ease-out forwards;
}

path.border {
  stroke: #81125A;
  stroke-dasharray: 0px,100px;
  stroke-dashoffset: 100px;
  stroke-width: 19.5px; 
  animation: dash 2.6s ease-out forwards;
  fill-rule: evenodd;

}

path.fill {
  stroke: #FFFFFF;
  stroke-dasharray: 0px, 100px;
  stroke-dashoffset: 100;
  stroke-width:9.5px;
  animation: dash 2.6s ease-out forwards;

}

.circle{
  height:15px;
  width:15px;
  background-color:purple;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1; 
  }
}

Answer 1

I'm not sure that stroke-dasharray is the right tool here.

Here you are probably looking for stroke-dashoffset, it will help you have some progress all along the path of the SVG. You can get the length of it w/ some JS: path.getTotalLength() and decide on how long you want it to progress, with a percentage or alike.

This article may help you understand a bit better how this works.
https://css-tricks.com/svg-line-animation-works/

Great news is that you can animate this ! Just beware because there are some sneaky behavior w/ Firefox when your progress is at 0, it may go backwards at initial load (if I remember correctly).