I'm currently making a doughnut graph with svg and also adding a animation to it. Currently I'm getting a trouble other parts of the graph. There are two graph that I wanted to make :
And here is the graph that I've made this far for the first graph.
.svg-item {
width: 50%;
animation: donutfade 1s;
}
.donut-ring {
stroke: #F4E2E2;
}
.donut-segment-1 {
stroke: #EA0001;
animation: donut1 3s;
}
.donut-segment-2 {
stroke: blue;
animation: donut2 3s;
}
.donut-segment-3 {
stroke: pink;
animation: donut3 3s;
}
@keyframes donutfade {
/* this applies to the whole svg item wrapper */
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes donut1 {
0% {
stroke-dasharray: 0, 100;
}
100% {
stroke-dasharray: 17, 83;
}
}
@keyframes donut2 {
0% {
stroke-dasharray: 0, 100;
}
100% {
stroke-dasharray: 32, 85;
}
}
@keyframes donut3 {
0% {
stroke-dasharray: 0, 100;
}
100% {
stroke-dasharray: 49, 85;
}
}<div class="svg-item">
<svg width="100%" viewBox="0 0 44 44" class="donut">
<circle class="donut-hole" cx="10" cy="10" r="15.91549430918954" fill="transparent"></circle>
<circle class="donut-ring" cx="22" cy="22" r="15.91549430918954" fill="#ffff" stroke-width="12"></circle>
<circle class="donut-segment donut-segment-1" cx="22" cy="22" r="15.91549430918954" fill="transparent" stroke-width="12" stroke-dasharray="17 83" stroke-dashoffset="25"></circle>
<circle class="donut-segment donut-segment-2" cx="22" cy="22" r="15.91549430918954" fill="transparent" stroke-width="12" stroke-dasharray="32 85" stroke-dashoffset="25"></circle>
<circle class="donut-segment donut-segment-3" cx="22" cy="22" r="15.91549430918954" fill="transparent" stroke-width="12" stroke-dasharray="49 85" stroke-dashoffset="25"></circle>
</svg>
</div>From the code above I kinda manage to make 2 parts of the first graph and been struggling making the third part and the others. Is there a better way to make moving doughnut graph ? Can anyone please help me make this doughnut graph. Thanks in advance.