CircleType.js

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

Features

Download on GitHub

Demos

Basic Arc

Here’s some curved text that flows clockwise.

Here’s some curved text flowing 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.

Here’s some curved text flowing counter-clockwise.

// <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.

This text makes a complete rotation no matter how long it is.

// <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).

This curved type shrinks and expands to fit inside its container.

// <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).

I play well with FitText.js too!

// <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.

Destroy Me

Easily remove the effect.

// <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