Describing my current issue is proving to be challenging, but I'll do my best:
My project involves creating an SVG circle progress bar and fortunately, I came across a great example that aligns with what I aim to achieve. I prefer not to use any third-party libraries such as snap for this task.
Here's the example I found on CodePen
The main hurdle I'm facing revolves around altering the origin of the stroke in the design. Upon testing the progress bar from the example link, you'll notice that the stroke originates from the right side. However, I need it to start from the top instead.
Being a developer myself, I attempted to resolve this challenge independently but alas, I couldn't quite crack the code. Adjusting the stroke-dasharray attribute only led to inconsistencies between the stroke width and the percentage set in stroke-dashoffset.
I comprehend that resolving this issue boils down to mathematical calculations involving the stroke-dasharray value, but I'm struggling to decipher the exact steps to take.
The dashoffset calculation formula currently stands as follows:
var pct = ((100-val)/100)*(Math.PI*(r*2));
There must exist a connection between this formula and the default dasharray value of 565.48, although no explicit reference has been provided anywhere.