How to animate SVG using anime.js

Due to their programmability and scalability, we often use Scalable Vector Graphics (SVG) in animation. In HTML we use the <svg> tag as a container for SVG elements.

Like any HTML element, all SVG elements can be animated using the anime() function.

Note: Click here for an overview of anime.js and the anime() function.

In the code above, we target the <svg> tag using its ID and apply the animation we require (a translation on the y-axis).

Note: We can animate SVGs with the same properties and property parameters as any other element.

Although this is a good use of SVG in animation, we can animate SVGs with far more interesting effects in anime.js. These effects include morphing shapes and creating a line drawing effect.

Morphing SVG shapes

The most helpful thing about SVG images is that they are just plain text and can be manipulated by code. The SVG tag, <polygon>, draws a shape using a set of coordinates given in the points attribute.

Using anime.js, we can change these coordinates to give the effect that the shape is morphing. In the example below, we morph a triangle into a rhombus.

Explanation

In the HTML section, we create a <svg> tag containing a single <polygon> tag.

• Line 8: We set the <polygon> tag to use the poly class to help style it and target it for animation. For the points attribute, we give the coordinates for the triangle $(50, 0)$, $(100, 100)$, and $(0, 100)$ where a comma separates each point.

Note: The number of points must be equal across shapes. Even though triangles have three points, we have given four coordinates by repeating $(0, 100)$. This is because we will be morphing this triangle into a shape with four points.

In the JavaScript section, we create the animation using the anime() function.

• Line 2: We target the <polygon> tag using our assigned poly class.

• Line 3: We use the points attribute and pass the four coordinates of a rhombus. The animation will change the original four points into this new set.

• Lines 5–10: We provide some optional parameters to control the timing and nature of the animation.

Instead of one target shape, we can provide coordinates for multiple shapes.

Instead of a single value for the points property, we provide an array of objects known as property keyframes. The animation will move through each item in the array.

Line drawing effect

We can also give SVGs a 'drawing' effect. This is done by manipulating the stroke-dasharray and stroke-dashoffset CSS properties. These properties usually change the strokeThe visual style of a line of SVG elements to a dashed line and set its position. However, a drawing effect can be implemented if these values are carefully manipulated using CSS and JavaScript.

Anime.js simplifies this manipulation. The following example demonstrates the line drawing effect.

Explanation

In the HTML section, we create an SVG element with a <path> tag and style it using the logo-path class.

In the JavaScript section, we define the animation using the anime() function.

• Line 2: We target the <path> tag using the logo-path class.

• Line 3: We set the strokeDashOffset property to [anime.strokeDashOffset, 0]. Doing so takes care of manipulating CSS to produce the 'drawing' effect.

• Lines 4–7: We set some optional parameters to control the timing and nature of the animation.

We can add multiple <path> tags to create much more complicated animations. Each letter is a separate <path> tag in the following animation.