A JavaScript Library That Can Create Text Drawing Animations Using Vara.js

Vara is a JavaScript library that can create text drawing animations. Vara 1.x will soon be replaced by v2 which uses canvas instead of SVG and may cause sudden changes.

The font used is a specially created JSON file that contains the information needed to generate the text. It is included by passing the URL of the font as the second argument. A few custom fonts are available in the Github repository, and more will be added soon.



Is used to execute a function when the font is loaded and the elements are created.

Any other method should be called inside this function.


Returns an object with properties characters and container.

characters is an array of SVG g elements, each representing a letter, and the container is an svg g wrapping the text block. If an id was given to the text during creation, it should be given as the argument, otherwise use the index of the text block.


Used to animate texts with autoAnimation:false.

If an id was given to the text during creation it should be given as the argument, otherwise use the index of the text block.


Used to execute a function once animation ends, triggers every time a block of text is drawn. Has two arguments,

i – The id of the drawn text.

o – The object described in the get() method.


Introduced in v1.1.0

Is used to play the animation of every text block, obeying delay and queue

Must Read: Seamless HTML5 Canvas-based Signature Drawing Pad Library

How to make use of it:

1. Link to Vara.js library.

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

2. Create a container in which you want to display the text graphic animation.

<div id="vara-container"></div>

3. Initialize the Vara.js library and specify the text to be written in the container.

var vara = new Vara("#vara-container","font.json",[{
    text:" "

4. Possible options to customize the text drawing animation.

var vara = new Vara("#vara-container","font.json",[{

    // text to type
    text:" ",

    // font size

    // strok width

    // font color

    // unique ID

    // duration in ms

    // text alignment

    // offsets

    // Whether the x or y coordinate should be from its calculated position, ie the position if x or y coordinates were not applied
      x:true, // Boolean
      y:true, // Boolean

    // auto play

    // animate the text in a queue

    // delay in ms

    /* Letter spacing can be a number or an object, if number, the spacing will be applied to every character.
      If object, each letter can be assigned a different spacing as follows,
      letterSpacing: {
          a: 4,
          j: -6,
          global: -1
      The global property is used to set spacing of all other characters

See Demo And Download


Official Website(akzhy): Click Here

This superior jQuery/javascript plugin is developed by akzhy. For extra Advanced Usage, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…

Leave a Reply

Your email address will not be published. Required fields are marked *