CircleType.js

Demos

Basic Arc

Here’s your basic arc, meh.

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

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

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

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

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