Best jQuery SVG Tutorial Plugins & Tutorials with Demo

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.

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.



Best jQuery websites design awards