Request Quote

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

shape1.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="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

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.

 

. . .

Comments (4)

Add Your Comment

  • Sabine Otto
    Hi, great work and works fine. I would like to use it with link button inside an a mouse hover move. Maybe you can help me?
  • Eugene Ross
    What’s the browser support for this? It seems like it would have good support, however, not sure what spec is for: `d:path();`.
    • kunj bihari
      Hi Eugene Ross,
      Thanks for showing your interest,
      Its work fine with Google Chrome Version 68, Firefox 56.0.2 and Safari 11,
      “d” is an attribute that’s needed to create the SVG path.
  • css.php