Create Flexible & Responsive Curving Text - CircleType.js

CircleType.js is a smart and lightweight jQuery plugin JavaScript library that allows you to arrange each letter of your text along a curved path based on Lettering.js.

Feathers:

• Auto Radius
• Custom arc and radius
• Flexible & Responsive radius based on window size
• Works well with FitText.js plugin.
• Supports of any font used in your html document
• No jQuery required.

Basic Usage:

1. Install and import the CircleType.js library into the document.

# Yarn
$ yarn add circletype

# NPM
$ npm install circletype --save

import CircleType from 'circletype';

2. Or directly include the circletype.min.js from the dist folder.

<script src="dist/circletype.min.js"></script>

3. Initialize the library on the target text.

<div id="demo">
  YOUR TEXT
</div>

const myText = CircleType(document.getElementById('demo'))

4. Set the text radius in pixels.

myText.radius(300);

5. Reverse the direction.

myText.dir(-1);

6. Recalculate the height of the element.

myText.refresh();

7. Destroy the library.

myText.destroy();

Changelog:

2020-05-18

• v2.3.2: Bugfix

2020-01-06

• Upgrade deps, fix security issues

2018-12-30

• Doc updated.

2018-05-27

• Support a custom splitter function

2017-07-25

• remove silly whitespace

2016-01-13

• updated the event handling

2014-07-11

• Fixed letters overlapping if line-height is undefined

2014-07-06

• adding star button

 

---

This awesome jQuery plugin is developed by peterhry. For more Advanced Usages, please check the demo page or visit the official website.