Best jQuery SVG Tutorial Plugins & Tutorials with Demo

Dailychart.js : SVG Charting library

Dailychart.js : SVG Charting library

Dailychart.js is a tiny standalone SVG charting library to display daily graph of a stock market security.

AlphaTab : Music notation & Guitar Tablature rendering Library

AlphaTab : Music notation & Guitar Tablature rendering Library

AlphaTab is a cross platform music notation and guitar tablature rendering library.

You can use alphaTab within your own website or application to load and display music sheets from data sources like Guitar Pro or the built in markup language named alphaTex.

Features:

  • load GuitarPro 3-5, GuitarPro 6, AlphaTex or MusicXML (experimental)
  • render as SVG, HTML5 canvas, GDI+,…
  • adapt to your responsive design by dynamic resizing
  • play the music sheet via HTML5 Web Audio API and Flash

SVGFlowBox : SVG based Event Highlighting

SVGFlowBox : SVG based Event Highlighting

SVGFlowBox is a lightweight SVG based event highlighting on flow paths.

Vivid.Js : JavaScript Library to use SVG Icons

Vivid.Js : JavaScript Library to use SVG Icons

Vivid.JS is a JavaScript library which is built to easily customize and use the SVG Icons with a blaze.

js2flowchart.js : Beautiful SVG Flowchart Library

js2flowchart.js : Beautiful SVG Flowchart Library

js2flowchart – a visualization library to convert any JavaScript code into beautiful SVG flowchart. Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.

 

Elastic Slider : Animated Slider with SVG clip-path

Elastic Slider : Animated Slider with SVG clip-path

Elastic Slider is an experimental slider using SVG clip-path feature and animations powered by Snap.svg.

Elastic Range Input with SVG & Anime.js

Elastic Range Input with SVG & Anime.js

In this tutorial we will see how we can simulate the behavior of a range input, with an elegant component. Fancy component to simulate a range input, based on this dribbble shot by Stan Yakusevich.

To code it, we will mainly use SVG to draw the paths, and anime.js to perform the animations.

Splash Transition with CSS and SVG

Splash Transition with CSS and SVG

In this tutorial we’ll be creating an eye catching animation, just using SVG paths and CSS transitions. To make things easier, we will also be using Pug and Sass, HTML and CSS preprocessors respectively. They will allow us to write much cleaner and more organized code, and also help with maths.

Animating Elements Along SVG Paths with JavaScript

Animating Elements Along SVG Paths with JavaScript

Path slider is a animating elements along SVG paths with javascript.

Gradient Topography Animation with Anime.js

Gradient Topography Animation with Anime.js

An organic SVG shape layer animation based on Diana Hlevnjak’s work “Gradient Topography”. Powered by anime.js.