jQuery SVG Tutorial Plugin & Tutorials with Example

SVG Circus : SVG Spinners Loaders Animation Creator

SVG Circus : SVG Spinners Loaders Animation Creator

SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds.

Inspiration for Dialog Effects with CSS3 SVG

Inspiration for Dialog Effects with CSS3 SVG

A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.svg.

Walkway.js : Animate SVG elements

Walkway.js : Animate SVG elements

Walkway is an easy way to animate SVG elements.

Options:

  • selector (mandatory) – The selector of the parent element (usually will be a specific svg element)
  • duration – Time the animation should run for, in ms. Default is 400.
  • easing – Name of the easing function used for drawing. Default is ‘easeInOutCubic’. You can also supply your own function that will be passed the progress and should return a value in the range of [0, 1];

SVG Morpheus : JavaScript library for SVG icons to morph

SVG Morpheus : JavaScript library for SVG icons to morph

JavaScript library enabling SVG icons to morph from one to the other.

ProgressBar.js : Beautiful and Responsive Progress bars

ProgressBar.js : Beautiful and Responsive Progress bars

Beautiful and responsive progress bars with animated SVG paths.ProgressBar.js uses shifty tweening library to animate path drawing. So in other words, animation is done with JavaScript using requestAnimationFrame. Animating with JS gives more control over the animation and is supported across major browsers.

Animate Text with SVG Paths & CSS3

Animate Text with SVG Paths & CSS3

This technique allows you to animate the drawing of text via converting text to SVG paths.SVG path animation is a trending technique in web-design allowing designers to draw simple and elegant icons. Now, designers can easily apply SVG animations to text.

SVG Path Animation with jQuery

SVG Path Animation with jQuery

A jQuery function for animating SVG multiple path asynchronously

Animated SVG Icon with CSS & SVG

Animated SVG Icon with CSS & SVG

How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library.

Subtle Hover Effect Ideas with SVG & CSS3

Subtle Hover Effect Ideas with SVG & CSS3

A second set of styles was added to the collection of subtle hover effect ideas. The old set was updated and we’ve added some fresh effects with various transitions.

Wobbly Slideshow Effect with SVG & JavaScript

Wobbly Slideshow Effect with SVG & JavaScript

The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh’s Dribbble shot and was made using Snap.svg and morphing SVG paths to animated the slide background SVGs in order to simulate the elastic effect. What happens is that we basically morph an SVG path from a rectangle to a curved shaped; either a right curve or a left curve, depending on where we are navigating to.



Best jQuery websites design awards