# CircleType.js

Tweet

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.

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

## Browser Support

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