A colorful circular text with pure CSS - Live coding session

Let's build a colorful, rotating, circular text (with pure #CSS) that can be used as a decorative element, cool headline, to wrap a call-for-action button, a loading animation, and more.

The whole concept of circular text is obviously not new, Chris Coyier wrote about it way back in 2012 (🔗👇), and I encountered a few articles and videos about it over the years, up until the quiet recent article by Jhey Tompkins (🔗👇) that shows a great use of CSS trig functions to make our life easier.
Both of them, and others, use a very similar method - splitting the text into individual characters, and rotating these characters around a common center. And while it does work, and looks great, it actually limits us to use a Monospace font. And I don’t like limitations…

So join me as we check out a different methode, that allows us to use any font we want - cursive, symbols, and even emojis.

* Live demo and full code on CodePen: