Create and Animate SVG with Anime.js

Introduction

Animation in web pages is a crucial part. It gives life to the web page with small and interesting element animation. We can create a path to create vector images with SVG tags in HTML.

Today, we are going to learn about SVG, …


This content originally appeared on DEV Community and was authored by Suraj Vishwakarma

Introduction

Animation in web pages is a crucial part. It gives life to the web page with small and interesting element animation. We can create a path to create vector images with SVG tags in HTML.

Today, we are going to learn about SVG, create some SVG and animate it with anime.js

So let's get started.

SVG

Before creating SVG, let's learn about it. SVG stands for Scalar Vector Graphics. SVG is one of the formats for defining vector images. We can animate the element that is defined within the SVG tag.

There are benefits our using SVG. Few are as follows:

  • SVG is a vector, so they don't pixelate when zooming in.
  • They are easily scalable.
  • They do not lose resolution when resizing

In HTML, we can create predefined SVG by defining a few properties such as

  • Circle
  • Rectangle
  • Eclipse
  • Polygon
  • Path
  • Text
  • Others

That's enough of SVG. Let's create some SVG.

Circle

We use the <circle> element within the <svg> to define our circle.
It has various tag important ones are:

  • cx: It is the x-coordinate of the center of the circle
  • cy: It is the y-coordinate of the center of the circle
  • r: It is the radius of the circle

Code

<svg>
  <circle cx="50" cy="50" r="40" />
</svg>

Few other tags include:

  • fill: It is the color of the circle
  • stroke: It is the color of the stroke
  • stroke-width: It is the width of the stroke

CodePen

Polygon

As the name suggests, it can have any number of gons(angles). We use the <polygon> element to define it. Polygon will be created in a closed shaped i.e, lines will be connected. It has a points tag to define the points of the variable.

  • points: The points are the vertex. There need to be at least three points for the closed path.

Code

<svg>
  <polygon points="200,10 250,190 160,210"/>
</svg>

CodePen

Path

The path is one of the most interesting and used elements that come under SVG. You can use it to create paths to form icons, illustrations, and shapes.

There are 10 commands to create different paths. Here are the commands with description.

Command Name Description
M moveto move from one point to another point
L lineto create a line
H horizontal lineto create a horizontal line
V vertical lineto create a vertical line
C curveto create a curve
S smooth curveto create a smooth curve
Q quadratic Bezier curve create a quadratic Bezier curve
T smooth quadratic Bezier curveto create a smooth quadratic Bezier curve
A elliptical Arc create a elliptical arc
Z closepath close the path

Code

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>

CodePen

Animating Path with AnimeJS

You can animate SVG with CSS's transform and transition. We are going to use the anime.js library to animate the path.

Code

let path = anime.path('path');

anime({
  targets: '.circle',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});

We define the path tag in a variable.

CodePen

Conclusion

Today, we had gone through the SVG and its different tags such as circle, polygon, and path. We have also animated the path with the
animejs.

I hope this article has helped in understanding the SVG. Thanks for reading the blog post.


This content originally appeared on DEV Community and was authored by Suraj Vishwakarma


Print Share Comment Cite Upload Translate Updates
APA

Suraj Vishwakarma | Sciencx (2022-04-21T16:11:06+00:00) Create and Animate SVG with Anime.js. Retrieved from https://www.scien.cx/2022/04/21/create-and-animate-svg-with-anime-js/

MLA
" » Create and Animate SVG with Anime.js." Suraj Vishwakarma | Sciencx - Thursday April 21, 2022, https://www.scien.cx/2022/04/21/create-and-animate-svg-with-anime-js/
HARVARD
Suraj Vishwakarma | Sciencx Thursday April 21, 2022 » Create and Animate SVG with Anime.js., viewed ,<https://www.scien.cx/2022/04/21/create-and-animate-svg-with-anime-js/>
VANCOUVER
Suraj Vishwakarma | Sciencx - » Create and Animate SVG with Anime.js. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/21/create-and-animate-svg-with-anime-js/
CHICAGO
" » Create and Animate SVG with Anime.js." Suraj Vishwakarma | Sciencx - Accessed . https://www.scien.cx/2022/04/21/create-and-animate-svg-with-anime-js/
IEEE
" » Create and Animate SVG with Anime.js." Suraj Vishwakarma | Sciencx [Online]. Available: https://www.scien.cx/2022/04/21/create-and-animate-svg-with-anime-js/. [Accessed: ]
rf:citation
» Create and Animate SVG with Anime.js | Suraj Vishwakarma | Sciencx | https://www.scien.cx/2022/04/21/create-and-animate-svg-with-anime-js/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.