CircleType.js

CircleType.js is a tiny (4kb) JavaScript library that lets you curve type on the web.

Features

• Use any font
• Adjust letter-spacing as usual with CSS
• Flip it around so it reads counter-clockwise instead
• Set the radius manually or let CircleType.js figure it out for you
• Works in fluid and responsive layouts
• Plays well with FitText.js

Download on GitHub

Demos

Basic Arc

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);

Reversed Arc

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);

Auto Radius

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'));

Fluid

Update the radius when the window is resized to create a fluid effect (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();

Using FitText.js

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();

Destroy

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));

Emojis

I work with emojis but you’ll need to provide your own splitter function. Here is an example that uses GraphemeSplitter:

// <script src="https://cdn.rawgit.com/orling/grapheme-splitter/b4500feb/index.js"></script>
// <h2 id="demo7">👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦👨‍👩‍👧‍👦</h2>
var splitter = new GraphemeSplitter()
var demo7 = new CircleType(
  document.getElementById('demo7'),
  splitter.splitGraphemes.bind(splitter)
);

Browser Support

• Chrome, Firefox, Safari, Opera, Edge (last 2 versions)
• IE 10+