CircleType.js is a tiny (4kb) JavaScript library that lets you curve type on the web.
Here’s some curved text that flows clockwise.
<h2 id="demo1">Here’s some curved text flowing clockwise.</h2>
new CircleType(document.getElementById('demo1')).radius(384);
By setting dir to -1, the text will flow counter-clockwise instead.
<h2 id="demo2">Here’s some curved text flowing counter-clockwise.</h2>
new CircleType(document.getElementById('demo2')).dir(-1).radius(384);
By leaving the radius empty, CircleType.js will find the perfect radius so the text makes a complete rotation.
<h2 id="demo3">This text makes a complete rotation no matter how long it is. </h2>
new CircleType(document.getElementById('demo3'));
The fluid setting gives the type a flexible radius (try resizing your window)
<h2 id="demo4">This curved type shrinks and expands to fit inside its container. </h2>
var demo4 = new CircleType(document.getElementById('demo4'));
window.addEventListener('resize', function updateRadius() {
demo4.radius(demo4.element.offsetWidth / 2);
});
updateRadius(demo4);
Here’s how you can use FitText.js to make the text scale (try resizing your window)
<h2 id="demo5">I play well with FitText.js too! </h2>
var demo5 = new CircleType(document.getElementById('demo5')).radius(180);
$(demo5.element).fitText();
window.addEventListener('resize', demo5.refresh.bind(demo5));
Here’s how you can remove the effect from an element.
<button id="destroyButton">Destroy Me</button>
<h2 id="demo6">Easily remove the effect.</h2>
var demo6 = new CircleType(document.getElementById('demo6')).radius(180);
document.getElementById('destroyButton').addEventListener('click', demo6.destroy.bind(demo6));