JQuery SVG Libraries to add animations and conceive interactive experiences

Wednesday, 29 April 2015
(13 votes)

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, but are more often created with drawing software.

All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, and Safari—have at least some degree of SVG rendering support. [...]

 

Here in this post i gonna share both JavaScript and jQuery SVG libraries that allow you to add animations and conceive interactive experiences. Let's see :)


vivus.js: Lightweight SVG Animation Library

vivus.js: Lightweight SVG Animation Library

A lightweight JavaScript library for animating SVGs to create a “drawing” visual effect. The class has a good amount of animations, but it gives you the possibility to create a specific script for animating the SVG in any way you like. The effect is achieved by delaying the drawing progressively, drawing each line asynchronously. Source

SVG Morpheus: Morphing SVG Icons JavaScript Library

SVG Morpheus: Morphing SVG Icons JavaScript Library

A library in JavaScript for creating animated SVG icon that morph into the next one. It applies the concept of Delightful details of the Material Design trend. Source

JavaScript SVG Geometric Paths Generator

JavaScript SVG Geometric Paths Generator

Here’s a library called Paths.js that helps you create SVG paths thanks to a high level API. The resulting paths can be used with template engines like Mustache or Handlebars so you can show graphics (SVG) in any browser.
If on the other hand, you use a static template engine like Angular, Facebook react, or Reactive.js, you can animate these SVG graphics as well.
You can define shapes such as ellipses and polygons in the lower levels, and in the highest levels you can draw charts, pies, sparklines, radars and more.
Paths was created by Andrea Aferretti and you can fork it to improve it, or use it for free. Source

Famo.us: 3D JavaScript Framework

Famo.us: 3D JavaScript Framework

Famo.us is an amazing JavaScript framework that integrates its very own 3D layout engine, opening a whole new world of possibilities for developers. This 3D layout engine also has a physics animation engine built in, allowing you to create natural, physics based animations. If you need to get up to date, Famo.us University contains a great amount of lessons so you can learn at your own pace. Source

Snap.svg: JavaScript SVG Library

Snap.svg: JavaScript SVG Library

SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. The Snap.svg JavaScript library intends to make work with your SVG assets as easy as possible. It has modern features for browsers, with a rich animation library and easy event handling. Besides, it is source agnostic, open-source and free. Source

svg.js: JavaScript SVG Animations

svg.js: JavaScript SVG Animations

SVG.JS is a lightweight library for manipulating and animating SVG. With it, you can create masked headers like the one at the top of this page. With svg.js, you have all the power of vector graphics at pocket size. The whole library is about 11k. Source

Lazy Line Painter: SVG Path Animation jQuery Plugin

Lazy Line Painter: SVG Path Animation jQuery Plugin

Lazy Line Painter is a jQuery Plugin for animating SVG paths. It works by exporting your line art from Illustrator as an .SVG, ensure that there are no fills and no closed paths; then drop your .SVG file into the ‘SVG to Lazy Converter.’ Then you just copy the .JS code and you’re done. This is an online tool that will ease you workload. Source

Fabric.js: Javascript Canvas Library

Fabric.js: Javascript Canvas Library

This HTML5 canvas library can help you make interactive objects out of simple geometrical shapes or complex elements composed of hundreds of different SVG paths. It also contains an SVG-to-canvas parser. Check out the resource’s site to have a closer look at all of its possibilities, which in truth, are a lot! Source

bHive: JavaScript Canvas Framework

bHive: JavaScript Canvas Framework

Create rich user experiences, animations, games and applications with bHive, an HTML5 canvas framework API built to make developing easier, so you can start creating straight away. Easily draw any form within it, from circles to squares; polygons to lines, any shape is easy to create and under your control, and the best of all, you can bring life into your artwork by adding animations. It supports rotation, scaling and transparency. Source

CanvasXpress: Powerful Graphing Library

CanvasXpress: Powerful Graphing Library

CanvasXpress is a standalone HTML5 graphing library written in Javascript that includes a simple and unobtrusive user interface to explore complex data sets. That basically means that it’s a tool you can use to put info in graphic form and also see the information itself. Source

LibCanvas: Games & Apps JavaScript Framework

LibCanvas: Games & Apps JavaScript Framework

The LibCanvas Javascript Framework is a free and advanced JavaScript library, based on AtomJS framework and perfect for creating interactive HTML5 games and apps. Source

Paper.js: Open Source Vector Graphics Scripting Framework

Paper.js: Open Source Vector Graphics Scripting Framework

An interesting framework for vector graphics scripting that will allow us to make supremely creative projects. It runs on top of the HTML5 canvas and offers a variety of powerful functionalities to make the most of the tool. It is also quite useful with bezier curves, all within a pretty consistent and clean programming interface. Source

D3.js:Data-Driven Documents

D3.js:Data-Driven Documents

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. Source

Enjoy it ;)


Get started with your own online business

 

Is it not a great idea to follow me to be recieve my last posts? Follow me now!


5807 times

Friday, 30 December 2016

Ibrahim Jabbari

I am Ibrahim Jabbari Web Designer / Developer since 2006, This is my blog, I'll share my experiences, Useful resources and all update news from IT world with you all, I hope you enjoy surfing my blog. Connect with me on Facebook, Twitter and and Instagram.

www.ibrahimjabbari.com