svg-text-animate.js

Svg-text-animate is a JavaScript library for convert text to SVG stroke animations in the browser.

Usage

NPM

npm i svg-text-animate

CDN

<script src="https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/dist/svg-text-animate.min.js"></script>

Demo

    import SVGTextAnimate from 'svt-text-animate;
    
    const opensans = new SVGTextAnimate("https://cdn.jsdelivr.net/gh/oubenruing/svg-text-animate@latest/docs/fonts/OpenSans-Regular-webfont.woff", {
      "duration": 300,
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 150,
      "mode": "delay"
    }, {
      "stroke": "#005792",
      "stroke-width": "2px",
      "font-size": 55,
      "fill-color":"white"
    });

    await opensans.setFont();
    
    opensans.create("svg-text-animate", "#name");

Constructor

Creates an instance of SVGTextAnimate.

SVGTextAnimate(fontfile, options, stroke, cretor)

@param {String} Required fontfile: Path of font file with WOFF, OTF, TTF (both with TrueType glyf and PostScript cff outlines)
@param {Object} Required options: {duration,timing-function,iteration-count,direction,fill-mode,delay,mode}
@param {Object} Required stroke: {stroke,stroke-width,font-size}
@param {String} Optional creator: The mode of animation, use CSSCreator by default.

Font-size moved from ‘options’ to ‘stroke’ in version 1.2.0

Options

An Object for controlling animation

Name	Type	Default value	Description
duration	Number	1000	this option sets the length of time that an animation takes to complete one cycle in milliseconds.
timing-function	String	linear	Same as the animation-timing-function CSS property.
iteration-count	Number	1	Same as the animation-iteration-count CSS property.
direction	String	normal	Same as the animation-direction CSS property.
fill-mode	String	forwards	Same as the animation-fill-mode CSS property.
mode	String	sync	"sync":All symbols appear at the same time; "onebyone":a symbol appears after the last symbol animation; "delay":a symbol appears n milliseconds later when the last symbol starts drawing.(The value of n is taken from the next option)
delay	Number	0	Only work with mode:"delay"

Stroke

An Object for controlling stroke

Name	Type	Default value	Description
stroke	String	#000000	The hex color of stroke
stroke-width	String	1px	The width of stroke
font-size	Number	72	Output font size.
fill-color	String	transparent	Fill color.

Creator

A string describing the animation mode.

Param	Description
css	(default) Using CSSCreator. Create a CSS style SVG animation.(Using <style> tag and @keyframes).
svg	Using SVGCreator. Create a SMIL SVG animation.(Using <animate> tag). In this case： 1.The option 'timing-function' always works in 'linear' mode. 2.The option 'fill-mode' only works in 'forwards' mode or 'none' mode. 3.The option 'direction' always works in 'normal' mode. The 'svg' mode can be used in the scenario where CSS is not supported

Methods

setfont()

An asynchronous method for loading font files passed in from the constructor.
This method will returns a Promise.
Each font just needs to be loaded only once.

  await opensans.setFont();

  opensans.setFont().then();

setFontFromBuffer()

Load a font file from an ArrayBuffer
Each font just needs to be loaded only once.
returns current instance

setOptions(options)

set an Object for controlling animation, same as options
returns current instance

setStroke(stroke)

set an Object for controlling animation, same as stroke returns current instance

create(text,selector) add(text,selector)

create a svg animation from the given string. Clear the selector first, then insert SVG into the DOM of delector. add(v1.2.0) a svg animation from the given string and inserts it into the DOM of the selector.

returns current instance

Name	Type	Description
text	String	The text you want to animate
selector	String	The DOM selector you want to insert into

    opensans.create("svg-text-animate", "#name");

    opensans.setOptions({
      "duration": 500,
      "timing-function": "linear",
      "direction": "normal",
      "fill-mode": "forwards",
      "delay": 50,
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "2px",
      "font-size": 23,
      "fill-color":"white"
    }).create("Try it", ".button");

Special fonts

Fonts with a large number of characters, such as chinese.
Fonts exported from icons, for example the fonts download from fontawesom.

In the first case, I recommend compressing the font first. Try font-spider or other font compress tools;

In the second case, you can use like this

    fontawesome.setOptions({
      "duration": 2000,
      "timing-function": "linear",
      "direction": "alternate",
      "delay": 500,
      "iteration-count": "infinite",
      "mode": "sync"
    }).setStroke({
      "stroke": "white",
      "stroke-width": "1px",
      "font-size": 22,
      "fill-color":"white"
    }).create(String.fromCharCode(0xf581), "#symbols")
      .create(String.fromCharCode(0xf164), "#symbols2");

      //you can find hex code on the website where you downloaded the iconfont.
      //Using String.fromCharCode(hexcode) as "create" method`s first parameter.

Thanks

opentype.js Read and write OpenType fonts using JavaScript.
fontawesom The iconic SVG, font, and CSS toolkit.
font-spider Smart webfont compression and format conversion tool.