I must admit, this list was created while re-designing “free-patterns” (aka: this awesome website). I want to add some interesting entry animations using the SVG’s across this site, and also – it’s fun! so, I have collected some of the leading tools nowadays to work with and animate SVG files. Hope this helps you too ❤️
GreenSock – The standard for modern web animation
This is the mega tool I used in so many cases and suits many cases not only when using SVG files. If your proficient with JS you must already know GreenSock. If not its highly recommended you try it!
A super light JS library for animating (but not only) SVG files. Its easy to use, very popular which means you can find many examples and tutorials online and very powerful. Also, as the description details, SVG.js has no dependencies !
SVG Text Animation
A project by @oubenruing (an amazing project) that would help you convert texts into strokes and then animate them and all inside the browser with no additional tools required! worth visiting. works great, maintained and updated.
TwoJs – Draw svg on the fly inside the browser
A different tool, defined by the creator as “A two-dimensional drawing API geared towards modern web browsers”. This basically means you can dynamically draw SVG shapes inside the browsers. I have yet to use it but it is considered popular for specific projects and is worth mentioning this tools list.
vivus, bringing your SVGs to life
Raphaël—JS Library to create SVG
This library helps you create graphics for example a chart, a shape or even images. On the site you will find examples and implementation of this library. Raphaël [‘ræfeɪəl] uses the SVG W3C Recommendation as a base for creating graphics
Paper.js – The Swiss Army Knife of Vector Graphics Scripting.
An open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well-designed, consistent and clean programming interface.
Walkway – An easy way to animate SVG images
Walkway is a library created to help us with animating line, path, and polyline elements. Its is actively being developed by a group of contributors and you can use to do a lot of cool animations!
Segment – draw and animate SVG path strokes
A very simple, lightweight JS library that would enable you to draw and also animate paths. But not only that, using Segment.js you can draw a path/stroke between 2 elements and control the timing and appearance.
Meanderer.js Responsive CSS motion paths!
A micro-library for scaling CSS motion path strings. Using meanderer you can move things over a preset path which is truly awesome (and we have all seen similar effects in highlighted websites. Released under MIT license with a lot of examples
I Love SVG!
Dont you just love SVG? vector graphics as a whole really changed the way we “do business”… it’s now easier to provide a single solution (in some cases) to all resolutions without giving out on quality or page speed. I hope you found some useful libraries in this article.
I am sure I have some great ones that somehow got under my radar or are just too new for me to know about – let me know please if you are using some awesome SVG manipulation library – the comment are here for the community.
Have a great one, Sagive.
Ohh.. didnt knew about Animate Plus – thank you 🙏
Thank you 😉 – a very useful list.
Very good post, thanks a lot guys