Morphing using SVG

Nowadays, the front-end site is not only a webpage but they are becoming rocket science.

Daily new effect come across us or we can find on awwwards or cssawards which make us to thinks many time how could we achieve this type of effect.

I come to know one of the trends of morphing using SVG. I have gone through an example of morphing which I like most.

Then, I start learning about morphing, then I come to know it could be simply done by changing the path of SVG using HTML animate tag or CSS. We tried and achieved the example for our product Webkul WooCommerce POS.

So today! I demonstrate the logic behind the SVG morphing.

To morph SVG we need more than 2 SVG having the same number of point or vertex, don’t delete or add a new node.

For example, I created 2 SVG files having the same vertex and node. Named as shape1.svg and shape2.svg respectively

shape1.svg is

<svg  xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 288 288">
<linearGradient id="PSgrad_0" x1="70.711%" x2="0%" y1="70.711%" y2="0%">
  <stop offset="0%" stop-color="rgb(95,54,152)" stop-opacity="1" />
  <stop offset="100%" stop-color="rgb(247,109,138)" stop-opacity="1" />
</linearGradient>
<path fill="url(#PSgrad_0)"
	d="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
	c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
	c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
	c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z"/>
</svg>

And shape2.svg

<svg  xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 288 288">
<linearGradient id="PSgrad_0" x1="70.711%" x2="0%" y1="70.711%" y2="0%">
  <stop offset="0%" stop-color="rgb(95,54,152)" stop-opacity="1" />
  <stop offset="100%" stop-color="rgb(247,109,138)" stop-opacity="1" />
</linearGradient>
<path fill="url(#PSgrad_0)"
	d="M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4
	c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6
	c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8
	C48.9,198.6,57.8,191,51,171.3z"/>
</svg>

On the code part make sure these both shape have same attributes

If you compare both the SVG you find the difference in attribute d, because I used same size & color in both the SVG. I just relocate the point in SVG so that I have the same vertex. Don’t add or remove the vertex.

So let’s start morphing with this two SVG file.

Using HTML Tag

You have to add the following attribute in animate tag inside the path tag.

attributeName=”d” – to select the path.

Dur=”5s” – duration of the animation.

repeatCount=”indefinite” –  for infinite loop.

Value=[d value of both the shape separated by semicolon;]

Then you will get the code in this format.

<svg  xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 288 288">
<linearGradient id="PSgrad_0" x1="70.711%" x2="0%" y1="70.711%" y2="0%">
  <stop offset="0%" stop-color="rgb(95,54,152)" stop-opacity="1" />
  <stop offset="100%" stop-color="rgb(247,109,138)" stop-opacity="1" />
</linearGradient>
<path fill="url(#PSgrad_0)">

	<animate id="animation-to-check" repeatCount="indefinite" fill="freeze" attributeName="d" dur="50s"
	
	values="M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
	c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
	c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
	c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z;
	
	
	M51,171.3c-6.1-17.7-15.3-17.2-20.7-32c-8-21.9,0.7-54.6,20.7-67.1c19.5-12.3,32.8,5.5,67.7-3.4C145.2,62,145,49.9,173,43.4
	c12-2.8,41.4-9.6,60.2,6.6c19,16.4,16.7,47.5,16,57.7c-1.7,22.8-10.3,25.5-9.4,46.4c1,22.5,11.2,25.8,9.1,42.6
	c-2.2,17.6-16.3,37.5-33.5,40.8c-22,4.1-29.4-22.4-54.9-22.6c-31-0.2-40.8,39-68.3,35.7c-17.3-2-32.2-19.8-37.3-34.8
	C48.9,198.6,57.8,191,51,171.3z;
	
	M37.5,186c-12.1-10.5-11.8-32.3-7.2-46.7c4.8-15,13.1-17.8,30.1-36.7C91,68.8,83.5,56.7,103.4,45
	c22.2-13.1,51.1-9.5,69.6-1.6c18.1,7.8,15.7,15.3,43.3,33.2c28.8,18.8,37.2,14.3,46.7,27.9c15.6,22.3,6.4,53.3,4.4,60.2
	c-3.3,11.2-7.1,23.9-18.5,32c-16.3,11.5-29.5,0.7-48.6,11c-16.2,8.7-12.6,19.7-28.2,33.2c-22.7,19.7-63.8,25.7-79.9,9.7
	c-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z	"/>

	</path>

</svg>

Repeat the code of d of shape1.svg to make connected animation. Now save the file and open it into browser to enjoy the effect of morphing.

See the Pen morphing by kunj (@kunj4u) on CodePen.light

Using CSS

Similarly, In CSS,  have to change the value of d attribute using animation

Path – d attribute to change the value of svg shape.

See the Pen morphing-css by kunj (@kunj4u) on CodePen.light

This is the basic logic about the morphing using in SVG or you can easily acheive morphing using https://shapeshifter.design/

Meanwhile, You can check Vivid.JS to use Open Source SVG Icons in your Projects.

Thanks for reading this blog.