<!DOCTYPE html>
<html lang="en" class="demo-1 no-js" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta name="description" content="Hover Effects with animated SVG Shapes using Snap.svg" />
<meta name="keywords" content="animated svg, hover effect, grid, svg shape html, " />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/snap.svg-min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor msdt:dt="string">Everyone</mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Editor>
<mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author msdt:dt="string">Everyone</mso:display_urn_x003a_schemas-microsoft-com_x003a_office_x003a_office_x0023_Author>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<div class="codrops-top clearfix">
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/SVGDrawingAnimation/"><span>Previous Demo</span></a>
<span class="right"><a href="http://cargocollective.com/isaac317">Artwork by Isaac Montemayor</a><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=18145"><span>Back to the Codrops Article</span></a></span>
</div>
<header class="codrops-header">
<h1>Shape Hover Effect with SVG<span>Recreating the effect as seen on <a href="http://christmasexperiments.com/">The Christmas Experiments</a></span></h1>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
</header>
<section id="grid" class="grid clearfix">
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/1.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Crystalline</h2>
<p>Soko radicchio bunya nuts gram dulse.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/3.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Cacophony</h2>
<p>Two greens tigernut soybean radish.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/5.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Languid</h2>
<p>Beetroot water spinach okra water.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/7.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Serene</h2>
<p>Water spinach arugula pea tatsoi.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/2.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Nebulous</h2>
<p>Pea horseradish azuki bean lettuce.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/4.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Iridescent</h2>
<p>A grape silver beet watercress potato.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/6.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Resonant</h2>
<p>Chickweed okra pea winter purslane.</p>
<button>View</button>
</figcaption>
</figure>
</a>
<a href="#" data-path-hover="m 180,34.57627 -180,0 L 0,0 180,0 z">
<figure>
<img src="img/8.png" />
<svg viewBox="0 0 180 320" preserveAspectRatio="none"><path d="M 180,160 0,218 0,0 180,0 z"/></svg>
<figcaption>
<h2>Zenith</h2>
<p>Salsify taro catsear garlic gram.</p>
<button>View</button>
</figcaption>
</figure>
</a>
</section>
<section class="related">
<p>If you enjoyed these effects you might also like:</p>
<div><a href="http://tympanus.net/Tutorials/CaptionHoverEffects/"><h4>Caption Hover Effects</h4></a></div>
<div><a href="http://tympanus.net/Development/AnimatedSVGIcons/"><h4>Animated SVG Icons</h4></a></div>
</section>
</div><!-- /container -->
<script>
(function() {
function init() {
var speed = 250,
easing = mina.easeinout;
[].slice.call ( document.querySelectorAll( '#grid > a' ) ).forEach( function( el ) {
var s = Snap( el.querySelector( 'svg' ) ), path = s.select( 'path' ),
pathConfig = {
from : path.attr( 'd' ),
to : el.getAttribute( 'data-path-hover' )
};
el.addEventListener( 'mouseenter', function() {
path.animate( { 'path' : pathConfig.to }, speed, easing );
} );
el.addEventListener( 'mouseleave', function() {
path.animate( { 'path' : pathConfig.from }, speed, easing );
} );
} );
}
init();
})();
</script>
</body>
</html>