Tondo.js

Tondo.js lets you easily create some SVG curved text to wrap HTML round badges.

It's not that common to see curved text on the internet.

If you wanted to style some text that way, till now you could do that with a couple of jQuery plugins, which however offer less power - compared to this plugin - and have some third-parties dependencies:

Both of those plugins shred the text inside the HTML elements they are applied on, then they build an arc of spans element, one for each letter of the text node. They leverage the CSS rotate() transform.

This plugin is different.

It just takes up ~5kB of plain Javascript, and a couple of CSS rules. With Tondo.js, an SVG element gets absolutely placed over the HTML target. Inside that SVG element, Tondo draws up to 2 arcs, one for placing text on the top of the circle, the other one for placing text on the bottom.

This plugin only makes sense when you target a round HTML element.

It is a new design trend for the next season. You'll see it everywhere.

You can get this plugin and find its documentation on Github.

You can find me on Twitter and on Github