Back to Top

Morphing using SVG

Updated 16 July 2021

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.

Start your headless eCommerce
now.
Find out More

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.

vivid.js

Thanks for reading this blog.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


6 comments

  • Sabine Otto
    • kunj bihari (Moderator)
  • Eugene Ross
    • kunj bihari (Moderator)
      • Tim
        • kunj bihari (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home