svg-text-animate.js

[中文] [English]

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

See svg-text-animate for a live demo.

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

or

  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.

(c) oubenruing 2019 | MIT License