Best jQuery SVG Tutorial Plugins & Tutorials with Demo

    SVG Connectable.js : JavaScript library for connecting SVG

    SVG Connectable.js : JavaScript library for connecting SVG

    A JavaScript library for connecting SVG things.

    Animatrix Creative – Drawing SVG Animations Plugin

    Animatrix Creative - Drawing SVG Animations Plugin

    Animatrix Creative allows you to draw and animate SVG images.Professional SVG Image WYSIWYG Editor is included in this plugin, and can be accessed from the admin area. You can draw with the default Pencil tool or create shapes out of the rich Shapes library.

    All SVG images are animated on the front-side, by mimicking the drawing process. You can also export and save the SVG image as well.

    Gooey Menu : Cool gooey effects Menu with jQuery & SVG

    Gooey Menu: Cool gooey effects Menu with jQuery & SVG

    jQuery Menu Plugin With Cool Gooey Effects

    • Cool gooey effects using SVG filters
    • Six menu styles (spaced/stacked round, horizontal, vertical menus)
    • 15+ easily customizable options
    • Easy to use event API
    • Fully responsive layout
    • Support of all modern browsers

    Textures.js : JavaScript library for creating SVG patterns

    Textures.js : JavaScript library for creating SVG patterns

    Textures.js is a Javascript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization.

    SVG Pan-Zoom.js : JavaScript Panning & Zooming SVG Things

    SVG Pan-Zoom.js : JavaScript Panning & Zooming SVG Things

    A JavaScript library for panning and zooming SVG things.

    VexFlow : JavaScript library for Rendering Music Notation

    VexFlow : JavaScript library for Rendering Music Notation

    VexFlow is an open-source web-based music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG, and runs on all modern browsers.

    Nice Looking Contact Form with CSS & jQuery

    Nice Looking Contact Form with CSS & jQuery

    A simple and easy to customize contact form. A minimal and customizable snippet to throw a semantic form into your web projects on the fly.

    Creative Gooey Effects with SVG

    Creative Gooey Effects with SVG

    Today we are going to show how to use SVG Filters to apply a gooey-like effect to HTML elements. We’ll first cover some basics of the technique and then we’ll demonstrate several creative use cases for common website elements, like menus, apps, selections, paginations and more.

    Caching SVG Sprite in localStorage

    Caching SVG Sprite in localStorage

    LocalStorage enables web pages to store the data within the user’s browser. The storage limit is usually 5 MB per domain. This is way more than enough for storing SVG sprites.This script helps you to cache the SVG sprites in localstorage.

    Playful Trampoline Effect with CSS3 & SVG

    Playful Trampoline Effect with CSS3 & SVG

    Today we want to share a fun little effect with you. The idea is to simulate the bounciness of a trampoline when navigating the image stack. For the draggable image stack we are using the Elastic Stack. The SVG animations are done with the help of Snap.svg. We will also use CSS Transitions for all the effects.