DEV Community 👩‍💻👨‍💻

Discussion on: Spin the Wheel — a customizable roulette wheel in less than 30kb with a no-javascript fallback.

shadowfaxrodeo profile image
Nathaniel Author

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.

georgewl profile image
George WL

Thanks for the detailed reasoning, I think you made the right decision.