CSS Animated Radial Graph overflow after animation SVG - html

Question

I've encountered a problem when using the css disarray function. The "front" circle clips over after animation has finished and doesnt "Start" at origin point of the animation. After the animation has completed, the filled stroke clips back past the origin point. Can someone Please help me out - I've tried reading up on SVG elements and have fiddled with the code for a few hours now and I still cant get it to animate properly.
Thank you so much for your support. Here is the code I am working with.
.radial-graph-container {
display: flex;
justify-content: center;
flex-direction: column;
padding-bottom: 2.4rem;
}
.radial-graph-container .chart-container .back {
stroke: #101114;
stroke-width: 10;
}
.radial-graph-container .chart-container .front {
stroke: #94d82d;
stroke-width: 15;
stroke-dasharray: 210;
/* Works fine with values above 300 */
transform: rotate(-90deg);
transform-origin: center;
}
.front {
animation: fill 1s reverse;
}
<div class="radial-graph-container">
<svg width="200" height="200" class="chart-container">
<circle cx="100" cy="100" r="90" class="back" fill="none" />
<circle cx="100" cy="100" r="90" class="front" fill="none" />
<g class="graph-center-txt">
<text
x="100"
y="100"
alignment-baseline="central"
text-anchor="middle"
id="percentage-social-media-usage"
>
42%
</text>
</g>
</svg>
<p class="graph-info-txt">
Description Text Here
</p>
</div>

Answer 1

Your animation part was missing: (the #keyframes section)
.radial-graph-container {
display: flex;
justify-content: center;
flex-direction: column;
padding-bottom: 2.4rem;
}
.radial-graph-container .chart-container .back {
stroke: #101114;
stroke-width: 10;
}
.radial-graph-container .chart-container .front {
stroke: #94d82d;
stroke-width: 15;
stroke-dasharray: 210;
/* Works fine with values above 300 */
transform: rotate(-90deg);
transform-origin: center;
}
.front {
animation: fill 1s reverse;
}
#keyframes fill {
0% {
r: 90;
}
100% {
r: 0;
}
}
<div class="radial-graph-container">
<svg width="200" height="200" class="chart-container">
<circle cx="100" cy="100" r="90" class="back" fill="none" />
<circle cx="100" cy="100" r="90" class="front" fill="none" />
<g class="graph-center-txt">
<text
x="100"
y="100"
alignment-baseline="central"
text-anchor="middle"
id="percentage-social-media-usage"
>
42%
</text>
</g>
</svg>
<p class="graph-info-txt">
Description Text Here
</p>
</div>