CircleType.js

Circletype.js is a tiny (2.7kb) jQuery plugin that lets you set type on a circle

Features

Download on GitHub

Demos

Basic Arc

Here’s your basic arc, meh.

Here is some type on a simple arc.

<h2 id="demo1">Here is some type on a simple arc.</h2> $('#demo1').circleType({radius: 384});

Reversed Arc

By setting dir to -1, the text will flow counter-clockwise instead.

Here is the same arc but this time reversed.

<h2 id="demo2">Here is the same arc but this time reversed.</h2> $('#demo2').circleType({radius: 384, dir:-1});

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> $('#demo3').circleType();

Fluid

The fluid setting gives the type a flexible radius (try resizing your window)

This arc shrinks and expands to fit inside its container.

<h2 id="demo4">This arc shrinks and expands to fit inside its container. </h2> $('#demo4').circleType({fluid:true});

Using FitText.js

Here’s how you can use FitText.js to make the text a bit more flexible (try resizing your window)

I play well with FitText.js too!

<h2 id="demo5">I play well with FitText.js too! </h2> $('#demo5').circleType({fitText:true, radius: 180});

Requirements