Organic Shape Animations with SVG clipPath

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

Organic Shape Animations with SVG clipPath was written by Mary Lou and published on Codrops.

Leave a Reply

Testimonials

"Kyle has helped our company’s image a lot by redesigning our logo, creating our new website and putting together some great, eye-catching ads. He’s very easy to work with and we were able to hit all of our deadlines."
Elliot Feder - Director of Business Development, SpringBoard Data Management
"Kyle has a natural talent for taking any idea I have and turning it into a visual work of art. He is a genius with layouts and overall concepts, the first person I call when I know a project needs to be done right."
Cheryl Bell, Executive Business Manager, Global Automotive Consultants