Web and Software Frontend Developer. Used to work in Full-stack JavaScript.Been at this for a few years now, and think I now understand my specific domain pretty well. Still a lot to learn though.
Location
Manchester, UK
Education
Web Systems Design BSc at Sheffield Hallam University, Sheffield, UK
Firstly, becuase when it can, the text curves along with the edges of the wheel — not the simplest thing to do, but I felt like it looked nicer and was probably the expectation of the user. That's only possible with an svg <textPath>.
The text paths reuse some of the same functions used to draw the rest of the wheel.
I think there's a performance reason too. I haven't actually tested this, but my understanding is that the browser treats an inline svg in a similar way to a single image. So performing animations on it is less expensive to compute — i'd have to double check that.
The svg scales to fit the user's device. I suppose it is possible to set a font-size relative the parent's height, but that didn't occur to me at the time.
Web and Software Frontend Developer. Used to work in Full-stack JavaScript.Been at this for a few years now, and think I now understand my specific domain pretty well. Still a lot to learn though.
Location
Manchester, UK
Education
Web Systems Design BSc at Sheffield Hallam University, Sheffield, UK
Why did you decide on text paths, rather than using simple html elements with a
transform: rotateapplied?That's a good question.
Firstly, becuase when it can, the text curves along with the edges of the wheel — not the simplest thing to do, but I felt like it looked nicer and was probably the expectation of the user. That's only possible with an svg
<textPath>.The text paths reuse some of the same functions used to draw the rest of the wheel.
I think there's a performance reason too. I haven't actually tested this, but my understanding is that the browser treats an inline svg in a similar way to a single image. So performing animations on it is less expensive to compute — i'd have to double check that.
The svg scales to fit the user's device. I suppose it is possible to set a font-size relative the parent's height, but that didn't occur to me at the time.
Thanks for the detailed reasoning, I think you made the right decision.