Best jQuery SVG Tutorial Plugins & Tutorials with Demo

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.

Creative SVG Letter Animations

Creative SVG Letter Animations

An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way.

SVG 3D Tag Cloud jQuery Plugin

SVG 3D Tag Cloud jQuery Plugin

“SVG 3D Tag Cloud” is a lightweight jQuery plugin that creates a three dimensional Tag Cloud.
Easy to use. Only requires 5 KB of filesize. No depandancies. No additionals plugins. Fully customizable.

Graphviz : jQuery Plugin for Graphviz SVG Charts Responsive

Graphviz : jQuery Plugin for Graphviz SVG Charts Responsive

jQuery plugin to make Graphviz SVG output more interactive and easier to navigate. Makes it easy to have features like:

  • Highlight nodes/edges
  • Zoom in/out
  • Graph navigation – select linked nodes
  • Fancy UI tooltips; bootstrap supported out the box
  • Move things forward/back in the graph

Creating Loading Buttons with SVG & Segment

Creating Loading Buttons with SVG & Segment

The idea that we will develop in this tutorial is basically a few loading buttons that will be able to give a feedback response, showing whether the button action succeeded or failed. To achieve the desired animations we will be using SVG and Segment mostly.

progresspieSVG : jQuery SVG Pie Progress Diagram

progresspieSVG : jQuery SVG Pie Progress Diagram

jQuery plug-in for dynamically rendering a pie or circle diagram comparable to a progress bar, depicting a progress, countdown, percent value or similar.



Best jQuery websites design awards