Best jQuery SVG Tutorial Plugins & Tutorials with Demo

jQuery SVG Progress Plugin

jQuery SVG Progress Plugin

This is a unique and one-of-a-kind jQuery plugin that allows you to display infographics on your web resource. Its main feature is a large variety of figures to be precise then six.

Dimensions of each figure are formed based on the size of the block to which jQuery-svg-progress was applied, which gives great flexibility in use. Accordingly, the size of the contour of figs perfectly adapts when loaded on mobile devices.

jQuery SVG Animated PopUp

jQuery SVG Animated PopUp
  • There is a solution – the jQuery-the svg-popup .
  • Quick – the formation of the particles based on the basis of SVG.
  • Easy – just plug weight 5kb.
  • Easy to use – it has documentation in Russian.
  • Eto decision to diversify the design of your site, and give the uniqueness and style!

zPath.js : jQuery plugin to Animate SVG Path

zPath.js : jQuery plugin to Animate SVG Path

A simple and easy to use plugin to draw any simple svg that uses only paths or any other elements but without fills.

Surf Report Template with SVG & CSS Flexbox

Surf Report Template with SVG & CSS Flexbox

A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experimental.

Fancy SVG Letter Animation

Fancy SVG Letter Animation

Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.

Clipped SVG Slider

Clipped SVG Slider

A simple slider, with morphing preview images animated using SVG properties.

Simple Interactive Points Effect with SVG

Simple Interactive Points Effect with SVG

Today we’d like to share a simple hover/click effect for images with you. The main idea is to show a map or a base image with some points of interest (POS) and when we come close to one of these points and hover, an image starts to fade in. When clicking on the POS indicator, a content layer is shown with some more information on that point; the background image becomes completely opaque. This concept could be fitting for some kind of map assisted story telling, like a travel piece or similar.

Item Reveal Animations with SVG

Item Reveal Animations with SVG

An experiment where grid items get revealed and unrevealed with animated, morphing SVG paths using anime.js.

SVG Triangle Generator using JS

SVG Triangle Generator using JS

Simple demo of generating an equilateral triangle in SVG using JS.

Rounded Polygon Creator with SVG

Rounded Polygon Creator with SVG

Create any size of regular rounded polygon with the help of javascript and svg.



Best jQuery websites design awards