CircleType

You can install CircleType using several methods depending on your environment:

Browser (Script Tag)

Include the minified file directly in your HTML:

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

CDN

Use JSDelivr to load the library via a URL:

<script src="https://cdn.jsdelivr.net/gh/peterhry/CircleType@2.3.1/dist/circletype.min.js"></script>

npm

Install via npm for use in modern build pipelines:

$ npm i circletype --save

ES Modules

Import the class directly in your JavaScript files:

import CircleType from `circletype`;

For direct browser usage without a build step, include the minified script in your HTML.

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

If you are using a module bundler or an environment that supports ES modules, import CircleType directly from the package.

import CircleType from `circletype`;

To create a circular text effect, instantiate the CircleType class by passing a target HTMLElement.

Optional: You can provide a splitter function. This function is used to split the element's text content into individual characters. This is useful for handling complex characters like emojis using libraries like grapheme-splitter.

Setter methods on the instance are chainable.

// Instantiate `CircleType` with an HTML element.
const circleType = new CircleType(document.getElementById('myElement'));

// Set the text radius and direction. Note: setter methods are chainable.
circleType.radius(200).dir(-1);

// Provide your own splitter function to handle emojis
const splitter = new GraphemeSplitter()
new CircleType(
  document.getElementById('myElement'),
  splitter.splitGraphemes.bind(splitter)
);

To create circular text, instantiate the CircleType class by passing a target HTML element. You can optionally provide a splitter function to define how the text content is broken down into individual characters (e.g., to support emojis via a grapheme splitter).

Setter methods on the instance are chainable.

// Basic instantiation
const circleType = new CircleType(document.getElementById('myElement'));

// Set radius and direction using chaining
circleType.radius(200).dir(-1);

// Using a custom splitter (e.g., for emojis)
const splitter = new GraphemeSplitter();
new CircleType(
  document.getElementById('myElement'),
  splitter.splitGraphemes.bind(splitter)
);

You can import the CircleType class from the circletype package using CommonJS require or ES module import syntax. This class is the primary entry point for creating circular text effects on DOM elements.

const CircleType = require('circletype');

These methods control whether the calculated arc dimensions are applied as inline styles to the container element.

forceWidth(value)

• Getter: Returns a boolean indicating if the width is being forced.
• Setter: Sets the forceWidth option. If true, the width of the arc is calculated and applied to the element as an inline style. Defaults to false.

forceHeight(value)

• Getter: Returns a boolean indicating if the height is being forced.
• Setter: Sets the forceHeight option. If true, the height of the arc is calculated and applied to the element as an inline style. Defaults to true.

const circleType = new CircleType(document.getElementById('myElement'));

// Enable force width
circleType.forceWidth(true);

// Disable force height
circleType.forceHeight(false);

The radius() method allows you to get or set the text radius in pixels.

• Getter: Returns the current text radius as a number.
• Setter: Sets a new radius. The minimum radius is the amount required for the text to form a complete circle. If the provided value is less than this minimum, the minimum radius is used instead.

Returns the CircleType instance for chaining.

const circleType = new CircleType(document.getElementById('myElement'));

// Get radius
circleType.radius(); // returns number

// Set radius
circleType.radius(150);

refresh()

Schedules a task to recalculate the height of the element. Call this if the font size of the target element changes.

destroy()

Removes the CircleType effect from the element, restoring it to its original state.

const circleType = new CircleType(document.getElementById('myElement'));

// Recalculate if font size changed
circleType.refresh();

// Remove effect and restore original element state
circleType.destroy();

The dir() method allows you to get or set the text direction.

• Getter: Returns the current direction as a number.
• Setter: Sets the direction. 1 is clockwise, -1 is counter-clockwise.

Returns the CircleType instance for chaining.

const circleType = new CircleType(document.getElementById('myElement'));

// Get direction
circleType.dir(); // returns 1 (clockwise)

// Set direction
circleType.dir(-1); // counter-clockwise
circleType.dir(1);  // clockwise

The fullCircle() method adds equal spacing between letters to ensure the text forms a complete circle, regardless of the current radius.

const circleType = new CircleType(document.getElementById('myElement'));
circleType.radius(200);

// Adds spacing between letters to make a full rotation
circleType.fullCircle();

By default, CircleType manages the height of the container to fit the arc, but not the width. You can toggle these behaviors:

• forceHeight(value): If true, the height of the arc is calculated and applied to the element as an inline style. Defaults to true.
• forceWidth(value): If true, the width of the arc is calculated and applied to the element as an inline style. Defaults to false.

Both methods return the CircleType instance for chaining.

const circleType = new CircleType(document.getElementById('myElement'));

// Enable width calculation
circleType.forceWidth(true);

// Disable height calculation
circleType.forceHeight(false);