Organic Shape Animations with SVG clipPath

Some shape morphing hover effects on images using SVG clipPath. The idea is to create an organic, fluid feel by animating several elements on hover.
OrganicShapeAnimations_Featured

After playing with some on-scroll morphing background shapes, we wanted to explore some hover effects in this demo. By morphing SVG paths we can create some organic, flowy movements on hover. Doing so on an SVG clipPath allows us to use this effect on an image.

For the animations in this demo we are using anime.js.

Attention: Some modern techniques at work, so please use a capable browser to view the demo.

For the hover effect on an item, we are doing several things. Let’s just look at the actual shape manipulations we do. These are performed on the clip path, the image that is being clipped and a decorative path element that is behind the image.

Here is an example item:

<div class="item item--style-1" 
		data-animation-path-duration="800" 
		data-animation-path-easing="easeInOutCubic" 
		data-path-elasticity="300" 
		data-morph-path="M 189,80.37 C 232.6,46.67 352.5,67.06 350.9,124.1 349.5,173.4 311.7,168 312.4,248.1 312.9,301.1 382.5,319.2 368.5,379.1 349.4,460.6 137.7,467.5 117.6,386.3 98.68,309.7 171.5,292.2 183.6,240.1 195.7,188.2 123.8,130.7 189,80.37 Z" 
		data-path-scaleX="0.8" 
		data-path-scaleY="1.1" 
		data-path-translateX="0" 
		data-path-translateY="30" 
		data-path-rotate="5" 
		data-animation-image-duration="800" 
		data-animation-image-easing="easeInOutQuart" 
		data-image-elasticity="300" 
		data-image-scaleX="1.2" 
		data-image-scaleY="1.2" 
		data-image-translateX="-20" 
		data-image-translateY="-45" 
		data-image-rotate="-5" 
		data-animation-deco-duration="1300" 
		data-animation-deco-easing="easeOutQuad" 
		data-deco-elasticity="300" 
		data-deco-scaleX="0.8" 
		data-deco-scaleY="0.9" 
		data-deco-translateX="-5" 
		data-deco-translateY="-5" 
		data-deco-rotate="2">
	<svg class="item__svg" width="500px" height="500px" viewBox="0 0 500 500">
		<clipPath id="clipShape1">
			<path class="item__clippath" d="M 189,80.37 C 243,66.12 307.3,87.28 350.9,124.1 389.3,156.6 417,211.2 418.1,263.4 419.1,305.7 401.8,355.6 368.5,379.1 298.8,428 179.2,446.4 117.6,386.3 65.4,335.3 78.55,230.3 105.5,160.5 119.7,123.6 152.6,89.85 189,80.37 Z" />
		</clipPath>
		<g class="item__deco">
			<use xlink:href="#deco1" />
		</g>
		<g clip-path="url(#clipShape1)">
			<image class="item__img" xlink:href="img/1.png" x="0" y="0" height="500px" width="500px" />
		</g>
	</svg>
	<div class="item__meta">
		<div class="item__number">
			<span class="item__specimen">21</span>
			<span class="item__reference">BX3</span>
		</div>
		<h2 class="item__title">Codium fasciculatus</h2>
		<h3 class="item__subtitle">Exoplanet Gliese 180 b</h3>
	</div>
</div>

We are using a clipPath on an image in the SVG. The deco element is taken from outside; we’ve included all of the paths at the beginning of the HTML file and reference to them with use. You can also directly add it as well, but it allows for re-use which in our case makes sense. The path that the initial clip path will morph to is stored in the data-morph-path data attribute. The other data attributes are for setting the durations, easings, etc. for the path, the image and the deco element. The only one missing here is the delay, which you can also add for each of the elements. Of course you don’t have to specify all these data attributes as there are default values for each one of them (see main.js).

OrganicShapeAnimations_01

We hope you enjoy this little effect and find it useful!

References and Credits

Previous:
Next:

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://www.codrops.com

Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 7

  1. 2

    Very cute….I made it work. Now I just need to figure out how to have links to those blobs.

  2. 5

    Phenomenal work! Looks like I’ve got a weekend project now. Thank you for this breath of fresh air!

  3. 6

    impressive! very cool effect..but it could more beautiful if you would have add parallax effect too. Nice work

Follow this discussion

Leave a Comment