Best jQuery SVG Tutorial Plugins & Tutorials with Demo

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.

GeoPattern : Generate beautiful SVG patterns

GeoPattern : Generate beautiful SVG patterns

This is a JavaScript port of jasonlong/geo_pattern  and is derived from the background generator originally used for GitHub Guides.

LivIcons Evolution as jQuery plugin

LivIcons Evolution as jQuery plugin

LivIcons Evolution is the next modern generation of a classic LivIcons pack of a cross browser vector icons with individual mini animation for each one. They are based on SVG (Scalable Vector Graphic), powered by JavaScript, work in all modern browsers and look perfect at any devices. Yes, Retina too.

Features:

  • Based on GSAP (GreenSock Animation Platform)
  • Completely redeveloped from scratch
  • Each icon comes with five (5) styles
  • Very flexible settings
  • More than 300 icons
  • Hover,click and autoPlay events
  • Any color, any size
  • Animated and static
  • Retina perfect

Distorted Button Effects with SVG Filters

Distorted Button Effects with SVG Filters

A set of inspirational, highly experimental distortion effects for buttons using SVG filters.The main idea is to apply distortion or blob filters to buttons and explore some creative possibilities.

Interactive 3D Mall Map with CSS & SVG

Interactive 3D Mall Map with CSS & SVG

Today we’d like to share a little 3D experiment with you. The idea is to show a mall map with all its floors in perspective. Additionally, we have a search in a sidebar that allows to filter mall spaces. Once a floor is selected, we show some pins as indicators for the different stores/spaces. When clicking on a pin, we show some more details of that space. We’ve mostly used CSS trickery for this, applying transitions that will rotate and move the levels by adding or removing classes. The levels are represented by inline SVGs.

Pure CSS Select Styling

Pure CSS Select Styling

CSS styling of select component without JS, and using inline SVGs for the arrow symbol. The idea is to get rid of the need of using JS / JQuery for a decent select styling. Using inline SVG files to avoid extra requests to the server and a good visualization quality in retina displays.

Star Rating jQuery Plugin using SVG

Star Rating jQuery Plugin using SVG

A star rating jQuery plugin that uses SVG for easier customization.

Features:

  • Doesn’t use images
  • Custom size
  • Custom colors
  • Choose the number of stars to be displayed
  • Define gradient color of selected stars
  • Specify a border/stroke thickness and color
  • Specify initial rating via options or markup data attribute
  • Callback after rating, to do things like notify a server

Animated Animals in CSS and SVG

Animated Animals in CSS and SVG

Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals.

Interactive Animated SVG Drum Kit

Interactive Animated SVG Drum Kit

Today we’re going to create an animated SVG drum kit that can be played by clicking, tapping or using your keyboard, and that can also be programmed to play by itself! We’ll be making use of GreenSock’s TweenMax animation library, jQuery and the <audio> element.



Best jQuery websites design awards