I am trying to fill up a SVG circle that has a radius of 13.5. And I have found a calculation but when entering the value as 100 it's only half full. Which believes me there is something wrong with the math part. Putting the value as 225 fills it up fully. And that's not what's desired at all.
SVG:
//Background of progress circle
<circle r="13.5" cx="16" cy="16" fill="transparent" stroke="#9E9E9E" stroke-width="3" stroke-dasharray="84.82300164692441" stroke-dashoffset="28.27433388230813" />
</svg>
//Progress circle
<svg style={{ height: '32px', width: '32px', transform: 'rotate(150deg)' }}>
<circle r="13.5" cx="16" cy="16" fill="transparent" stroke="#000" stroke-width="3" stroke-dasharray={dashArrayValue} stroke-dashoffset={dashOffsetValue} />
</svg>
Calculation code
let value = 100
let radius = 13.5
let circumference = radius * 2 * Math.PI
let percent = value * 100 / 220
let offset = circumference - ((-percent * 62) / 100) / 100 * circumference
let convertedOffset = -offset
setDashArrayValue(`${circumference}`) //${circumference}
setDashOffsetValue(`${convertedOffset}`)
Hopefully someone can spot the flaw because I certainly can't since my math is awful.
Thanks.
If it is the dash array that you try to manipulate, here are some examples. YOu can see that I'm just changing two values; the rotation of the circle (where the stroke will start) and the first value in the dash array (the length of the stroke). I allso added the pathLength attribute that controls the total length of the stroke of the circle (in this case 360, but it could also be 100 his that fist better into your use case).
<p>From 12 o'clock to 3 o'clock:
<svg height="32px" width="32px">
<circle r="13.5" cx="16" cy="16" fill="transparent"
stroke="#000" stroke-width="3" pathLength="360"
stroke-dasharray="90 360"
transform="rotate(-90 16 16)"/>
</svg>
</p>
<p>From 12 o'clock to 6 o'clock:
<svg height="32px" width="32px">
<circle r="13.5" cx="16" cy="16" fill="transparent"
stroke="#000" stroke-width="3" pathLength="360"
stroke-dasharray="180 360"
transform="rotate(-90 16 16)"/>
</svg>
</p>
<p>From 12 o'clock to 10 o'clock:
<svg height="32px" width="32px">
<circle r="13.5" cx="16" cy="16" fill="transparent"
stroke="#000" stroke-width="3" pathLength="360"
stroke-dasharray="300 360"
transform="rotate(-90 16 16)"/>
</svg>
</p>
<p>From 6 o'clock to 10 o'clock:
<svg height="32px" width="32px">
<circle r="13.5" cx="16" cy="16" fill="transparent"
stroke="#000" stroke-width="3" pathLength="360"
stroke-dasharray="120 360"
transform="rotate(90 16 16)"/>
</svg>
</p>And the interactive version:
document.forms.form01.number.addEventListener('change', e => {
let number = e.target.value;
document.getElementById('c1').attributes['stroke-dasharray'].value = `${number} 100`;
});<form name="form01">
<input name="number" type="range" value="50" min="0" max="100" />
</form>
<p><svg height="32px" width="32px">
<circle id="c1" r="13.5" cx="16" cy="16" fill="transparent"
stroke="#000" stroke-width="3" pathLength="100"
stroke-dasharray="50 100"
transform="rotate(-90 16 16)"/>
</svg></p>