SVG circle with multiple origin for stroke animation

Question

I have a simple donut graph with fill-in animation. The problem is that I get two separate paths. (Es. 10% bar gives me 0-10% and then space and then another 10%.

I have tried playing around with the different variables but I can't figure out what I am doing wrong, any help? I have used this: https://codepen.io/matttherat/pen/EeMaEw?editors=1100

Here's a screen:

.svg-item {
  flex: 1;
  font-size: 16px;
  max-width: 120px;
  animation: donutfade 1s;
  margin: 0 auto;
}

.data-des {
  font-size: 0.7em;
  display: block;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

@keyframes donutfade {
  /* this applies to the whole svg item wrapper */
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

.donut-ring-ext {
  stroke: #50b180;
}

.donut-segment {
  transform-origin: center;
}

.donut-segment-2 {
  stroke: #a8df8a;
  animation: donut1 1s;
}

.donut-segment-3 {
  stroke: #a8df8a;
  animation: donut2 1s;
}

.donut-segment-4 {
  stroke: #a8df8a;
  animation: donut3 1s;
}

.donut-percent {
  color: #3c8560;
  animation: donutfadelong 1s;
}

@keyframes donutfadelong {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes donut1 {
  0% {
    stroke-dasharray: 0 100;
  }
  100% {
    stroke-dasharray: 10 90;
  }
}

@keyframes donut2 {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 20, 80;
  }
}

@keyframes donut3 {
  0% {
    stroke-dasharray: 0, 100;
  }
  100% {
    stroke-dasharray: 50, 50;
  }
}

.donut-label {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  fill: #000;
  transform: translateY(0.25em);
}

.donut-percent {
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: 100;
}

.donut-data {
  font-size: 0.12em;
  line-height: 1;
  transform: translateY(0.5em);
  text-align: center;
  text-anchor: middle;
  color: #666;
  fill: #666;
  animation: donutfadelong 1s;
}

<div class="svg-item">
  <svg width="100%" height="100%" viewBox="0 0 40 40" class="donut">
                                <circle
                                    class="donut-hole"
                                    cx="20"
                                    cy="20"
                                    r="15.91549430918954"
                                    fill="#fff"
                                ></circle>
                                <circle
                                    class="donut-ring-ext"
                                    cx="20"
                                    cy="20"
                                    r="19"
                                    fill="transparent"
                                    stroke-width="2"
                                ></circle>
                                <circle
                                    class="donut-segment donut-segment-2"
                                    cx="20"
                                    cy="20"
                                    r="22"
                                    fill="transparent"
                                    stroke-width="2"
                                    stroke-dasharray="10 90"
                                    stroke-dashoffset="-5"
                                ></circle>
                                <g class="donut-text donut-text-1">
                                    <text y="50%" transform="translate(0, 2)">
                                        <tspan
                                            x="50%"
                                            text-anchor="middle"
                                            class="donut-percent"
                                        >
                                            10%
                                        </tspan>
                                    </text>
                                </g>
                                <span class="data-des">Amet dolorem sit</span>
                            </svg>
</div>

Answer 1

You need to animate the stroke-dashoffset attribute. At the beginning stroke-dasharay = the path's total length (calculated with .getTotalLength()). Since you are using only one value the dashes and the gaps are of equal length.

stroke-dasharray="137.35"

Also the stroke-dashoffset="137.35". This means that you don't see the dash. In this moment your stroke is the gap.

Next you are animating the stroke-dashoffset. If you want to see 10% of the dash yoi need to animate the stroke-dashoffset from 100% to 90% i.e

 100% {
    stroke-dashoffset: 123.6;
  }

I hope it helps.

.svg-item {
  flex: 1;
  font-size: 16px;
  max-width: 400px;
  margin: 0 auto;
}

.data-des {
  font-size: 0.7em;
  display: block;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.donut-ring-ext {
  stroke: #50b180;
}

.donut-segment {
  transform-origin: center;
}

.donut-segment-2 {
  stroke: #a8df8a;
  animation: donut1 1s forwards;
}

.donut-segment-3 {
  stroke: #a8df8a;
  animation: donut2 1s;
}

.donut-segment-4 {
  stroke: #a8df8a;
  animation: donut3 1s;
}

.donut-percent {
  color: #3c8560;
  animation: donutfadelong 1s;
}



@keyframes donut1 {
  100% {
    stroke-dashoffset: 123.6;
  }
}


.donut-label {
  font-size: 0.28em;
  font-weight: 700;
  line-height: 1;
  fill: #000;
  transform: translateY(0.25em);
}

.donut-percent {
  font-size: 0.5em;
  line-height: 1;
  transform: translateY(0.5em);
  font-weight: 100;
}

.donut-data {
  font-size: 0.12em;
  line-height: 1;
  transform: translateY(0.5em);
  text-align: center;
  text-anchor: middle;
  color: #666;
  fill: #666;
  animation: donutfadelong 1s;
}

svg{border:1px solid}

<div class="svg-item">
  <svg viewBox="-30 -10 100 100" class="donut">
  <g transform="rotate(-90 20 20)">
                                <circle
                                    class="donut-hole"
                                    cx="20"
                                    cy="20"
                                    r="15.91549430918954"
                                    fill="#f00"
                                ></circle>
                                <circle
                                    class="donut-ring-ext"
                                    cx="20"
                                    cy="20"
                                    r="19"
                                    fill="transparent"
                                    stroke-width="2"
                                ></circle>
                                <circle 
                                    class="donut-segment donut-segment-2"
                                    cx="20"
                                    cy="20"
                                    r="22"
                                    fill="transparent"
                                    stroke-width="2"
                                    stroke-dasharray="137.35"
                                    stroke-dashoffset="137.35"
                                ></circle></g>
                                <g class="donut-text donut-text-1">
                                    <text y="50%" transform="translate(0, 2)">
                                        <tspan
                                            x="50%"
                                            text-anchor="middle"
                                            class="donut-percent"
                                        >
                                            10%
                                        </tspan>
                                    </text>
                                </g>
                                <span class="data-des">Amet dolorem sit</span>
                            </svg>
</div>