🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL
  1. Home
  2. jQuery Plugins
  3. Shape Hover Effect with SVG

Shape Hover Effect with SVG

In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover.The idea is to create a SVG with one path that represents the shape background for some caption and to morph that path into another one on hover. There are many creative possibilities and today we’ll create three different examples. The nice thing of utilizing SVG is that we can adjust the shape size to their parent container’s size and make everything fluid.

SVG Tutorial
Demo Tutorial

You May Also Like

arbor.js – A Graph Visualization Library

NETEYE Activity Indicator in jQuery

CoolClock in jQuery

jVectorMap a jQuery vector map plugin

Dracula : JavaScript Graph Library

Add automatic area highlighting to image Maps with javascript : Mapper.js

Kartograph : jQuery Interactive map applications without Google Maps

Cubism.js : Time Series Visualization Chart

JQVMap : jQuery Vector Maps

jCS Media Library in jQuery

Custom HTML5 video player with jQuery and CSS3

JavaScript Mindmap

D3.js : Data-Driven Documents

SeuratJS : Raphaël plugin for beautiful pointillized Animations

JustGage : Animated Gauges in SVG & Raphaël library

jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML

fabric.js : JavaScript Html5 Canvas Library

jsDraw2DX : SVG Graphics Library for JavaScript Html5

Method-Draw : A web based SVG editor

Jim Knopf : JavaScript library for creating SVG-powered knobs

Vague.js : jQuery Blur any kind of Html Element

Lazy Line Painter : jQuery plugin for SVG path animation

spoiler-alert : jQuery plugin to hide spoilers on your site

Rickshaw.Graph : JavaScript toolkit for real-time Graphs

Interactive Infographic with SVG and CSS Animations

Metro Style Side Menu with jQuery

LivIcons : 303 Truly Animated Vector Icons with jQuery

Two.js : Two-dimensional Drawing API

three.js : JavaScript 3D library

jQuery.Feyn : Drawing Feynman Diagrams with SVG

Animated Checkboxes and Radio Buttons with SVG

SVG.js : A lightweight library for manipulating and animating SVG

xCharts : D3-based library for building custom Charts and Graphs

Animated SVG Icons with Snap.svg

Panelize : A jquery plugin that Navigates an Image

Custom Interactive Map : jQuery Plugin

Interact.js : Javascript drag and drop, resizing and gestures Library

SVG Avatars Generator – jQuery Integrated Script

Shape Hover Effect with SVG

Dot Navigation Styles with CSS3 & SVG

Path Animator with JavaScript & SVG

SVG Avatars Generator – jQuery WordPress Plugin

Fullscreen Overlay Effects with CSS3 & JavaScript

Twism : A clickable SVG maps jQuery plugin

Creating a Border Animation Effect with SVG and CSS

Circular Progress Button with SVG Animation

wayfinding : jQuery plugin for Interactive svg maps

Page Loading Effects Animation with SVG

Seen.js : Render 3D scenes into SVG or HTML5 Canvas

How to Build a Page Scroll Progress Indicator With jQuery and SVG

JS PHP Product Designer

Trianglify : JavaScript Poly style Background Generator

JS Print Designer

Arrow Navigation Styles with CSS & SVG

Flat Surface Shader with JavaScript & SVG

Inspiration for Inline Anchor Styles with CSS3 & SVG

Trigons – Create and Animate Abstract SVG Images

SVGMagic : jQuery SVG fallback Plugin

StatMapSVG : Statistical Map SVG & jQuery

Clipping in CSS and SVG

Notification Styles Inspiration with CSS3 & JavaScript

Icons Filling Effect with CSS3 & SVG

Enliven ’em! – Animation Engine for Vector Graphic

Page Preloading Effect with CSS3 & SVG

oblurlay : Blur view of iOS7 style with CSS & jQuery

Tab Styles Inspiration with CSS3 & SVG

Off-Canvas Menu Effects with CSS3 & SVG

Tooltip Styles Inspiration with CSS3 & SVG

Wobbly Slideshow Effect with SVG & JavaScript

Subtle Hover Effect Ideas with SVG & CSS3

jQuery Plugins

AngularJs Plugins