Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    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


    And shape2.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.


    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

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

    Thanks for reading this blog.


    . . .

    Comments (6)

    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.
  • Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again