This is very short talk about doing donuts with SVG
You might think it's pretty simple if you know SVG because you know you just do a circle it's not that hard
But what I found in practice doing this is it needed math?
And even though I did university level calculus. I've forgotten every last bit of it somewhere along the way
So I had to learn how to do maths again. Just to do donuts
When you get donuts out of math and math is probably worth it
I'm just gonna change the view here so we can see but there's a little bit of CSS just for colouring
But it's not really relevant and where it goes. I mean, I'm wearing my CSS t-shirt. There's no JavaScript in this whatsoever
So here we've got just a
regular doughnut of the top
I've got one with a half circle and we'll get a full circle so the ideal of what we were trying to achieve here was
To show progress basically we do donuts
If you're doing this for the circle. It's not too hard, but when you're trying to reduce the
The length of the line it takes a bit of thought
So looking at the code here what we're actually using is you've got usual stroke, width which determines
How wide something is we've got the out of circle. Which is a stroke width of 12
It is a circle so it has a radius of 12
so
Radius of 12 stroke width of 12 it takes up the entire
container
The problem is if you want to actually leave a hole in the middle of it
So looking at the red circle here
It has a stroke width of 10. It's a radius of 10, so it's slightly indented. So we can see what's going on
It has a stroke dash array now. This is something. I've not really come across before least like you can this is how you do
Like dashes in SVG so a little bit on little bit off
But the problem is when it applies to a circle
My first thought is maybe this would work in degrees or something like this when I looked at it. It wasn't very well documented
So I can I had to find out by trial and error
And I even found out by looking at one of my colleagues code who tried this
Came up with the solution that seemed to work, but then we found out the maths was completely wrong so
What we really need to do is actually look at how do you calculate a?
Radius or something and that's math it's 2 PI R. So if I want something in this case. I've got my
Unpop the font size a bit that's readable enough anyway
for my red circle my stroke - array is
62.8318 what's that?
What it is is I increase the size of that two times Math.PI?
x My radius, which is 10 and my answer here is
62.8318 and NASA made it all the way to
Outside our galaxy using 4 decimal places so you don't need any more than that
If I want to reduce this all I need to do is multiply that by what I don't want it to be
So if it only wants to be a half circle I can multiply by 0.5
So there's my result
actually
Let's put that in there 31.
4159 and now I've got a half circle
and
Then you can go with anything so my inner circle I've got here is not actually rendering right now because there's nothing there
my stroke dash array is
0
52
Which is basically from the start to
50 point 2 6 5 5 which is 2 pi 8
Don't show anything and then start the dash again
So 2 pi 8 let's reduce it a bit we'll go
Go by point 5 so I've now got 25.13 if I modify this
25.1327 oh and I've broke it and I'd done my math wrong
Ha ha live demo I've done something wrong all right over 25, not 23, ah
Why is it not setting properly and there we go so that's how you do doughnut see in SVG