{"id":130195,"date":"2018-06-29T04:43:56","date_gmt":"2018-06-29T04:43:56","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=130195"},"modified":"2024-10-15T09:52:22","modified_gmt":"2024-10-15T09:52:22","slug":"morphing-using-svg-animate-css","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/","title":{"rendered":"Morphing using SVG"},"content":{"rendered":"\n

Nowadays, the front-end site is not only a webpage but they are becoming rocket science.<\/p>\n\n\n\n

Daily new effect come across us or we can find on awwwards<\/a> or cssawards<\/a> which make us to thinks many time how could we achieve this type of effect.<\/p>\n\n\n\n

I come to know one of the trends of morphing using SVG. I have gone through an example of morphing<\/a> which I like most.<\/p>\n\n\n\n

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<\/a>.<\/p>\n\n\n\n

So today! I demonstrate the logic behind the SVG morphing.<\/p>\n\n\n\n

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.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

For example, I created 2 SVG files having the same vertex and node. Named as shape1.svg and shape2.svg respectively<\/span><\/p>\n\n\n\n

shape1.svg is<\/span><\/p>\n\n\n

\n
\"\"
shape1.svg<\/figcaption><\/figure>\n<\/div>\n\n\n
<svg  xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 288 288\">\n<linearGradient id=\"PSgrad_0\" x1=\"70.711%\" x2=\"0%\" y1=\"70.711%\" y2=\"0%\">\n  <stop offset=\"0%\" stop-color=\"rgb(95,54,152)\" stop-opacity=\"1\" \/>\n  <stop offset=\"100%\" stop-color=\"rgb(247,109,138)\" stop-opacity=\"1\" \/>\n<\/linearGradient>\n<path fill=\"url(#PSgrad_0)\"\n\td=\"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\n\tc22.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\n\tc-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\n\tc-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z\"\/>\n<\/svg>\n\n<\/pre>\n\n\n\n
And shape2.svg<\/span><\/p>\n\n\n
\n
\"\"
shape2.svg<\/figcaption><\/figure>\n<\/div>\n\n\n
<svg  xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 288 288\">\n<linearGradient id=\"PSgrad_0\" x1=\"70.711%\" x2=\"0%\" y1=\"70.711%\" y2=\"0%\">\n  <stop offset=\"0%\" stop-color=\"rgb(95,54,152)\" stop-opacity=\"1\" \/>\n  <stop offset=\"100%\" stop-color=\"rgb(247,109,138)\" stop-opacity=\"1\" \/>\n<\/linearGradient>\n<path fill=\"url(#PSgrad_0)\"\n\td=\"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\n\tc12-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\n\tc-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\n\tC48.9,198.6,57.8,191,51,171.3z\"\/>\n<\/svg><\/pre>\n\n\n\n
On the code part make sure both shapes have the same attributes<\/p>\n\n\n\n
If you compare both the SVG you find the difference in attribute d, because I used same size & color in both SVG. I just relocate the point in SVG so that I have the same vertex. Don’t add or remove the vertex. <\/span><\/p>\n\n\n\n
So let’s start morphing with this two SVG file.<\/span><\/p>\n\n\n\n
Using HTML Tag<\/h3>\n\n\n\n
You have to add the following attribute in animate tag inside the path tag.<\/span><\/p>\n\n\n\n
attributeName=\u201dd\u201d \u2013 to select the path.<\/span><\/p>\n\n\n\n
Dur=\u201d5s\u201d \u2013 duration of the animation.<\/span><\/p>\n\n\n\n
repeatCount=\u201dindefinite\u201d –  <\/span>for infinite loop.<\/span><\/p>\n\n\n\n
Value=[d value of both the shape separated by semicolon;]<\/span><\/p>\n\n\n\n
Then you will get the code in this format.<\/p>\n\n\n\n
<svg  xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" viewBox=\"0 0 288 288\">\n<linearGradient id=\"PSgrad_0\" x1=\"70.711%\" x2=\"0%\" y1=\"70.711%\" y2=\"0%\">\n  <stop offset=\"0%\" stop-color=\"rgb(95,54,152)\" stop-opacity=\"1\" \/>\n  <stop offset=\"100%\" stop-color=\"rgb(247,109,138)\" stop-opacity=\"1\" \/>\n<\/linearGradient>\n<path fill=\"url(#PSgrad_0)\">\n\n\t<animate id=\"animation-to-check\" repeatCount=\"indefinite\" fill=\"freeze\" attributeName=\"d\" dur=\"50s\"\n\t\n\tvalues=\"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\n\tc22.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\n\tc-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\n\tc-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z;\n\t\n\t\n\tM51,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\n\tc12-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\n\tc-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\n\tC48.9,198.6,57.8,191,51,171.3z;\n\t\n\tM37.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\n\tc22.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\n\tc-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\n\tc-15.2-15.1,0.3-41.7-16.6-54.9C63,186,49.7,196.7,37.5,186z\t\"\/>\n\n\t<\/path>\n\n<\/svg>\n<\/pre>\n\n\n\n
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.<\/p>\n\n\n
[codepen_embed height=”600″ theme_id=”light” slug_hash=”EROVGG” default_tab=”result” user=”kunj4u”]See the Pen morphing<\/a> by kunj (@kunj4u<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n
Using CSS<\/h3>\n\n\n\n
Similarly, In CSS,  have to change the value of d attribute using animation<\/p>\n\n\n\n
Path – d attribute to change the value of svg shape.<\/p>\n\n\n
[codepen_embed height=”624″ theme_id=”light” slug_hash=”vrQzjy” default_tab=”result” user=”kunj4u”]See the Pen morphing-css<\/a> by kunj (@kunj4u<\/a>) on CodePen<\/a>.[\/codepen_embed]<\/p>\n\n\n\n
This is the basic logic about the morphing using in SVG\u00a0or you can easily achieve morphing using\u00a0https:\/\/shapeshifter.design\/<\/span><\/a> <\/span><\/p>\n\n\n\n
Meanwhile, You can check\u00a0Vivid.JS<\/a> to use Open Source SVG Icons in your Projects.<\/p>\n\n\n\n
Thanks for reading this blog.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/a><\/p>\n","protected":false},"author":162,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1202],"tags":[],"class_list":["post-130195","post","type-post","status-publish","format-standard","hentry","category-design-trends"],"yoast_head":"\nMorphing using SVG - Webkul Blog<\/title>\n<meta name=\"description\" content=\"create morphing using html and css no javascript required. don't play with vertexes\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Morphing using SVG - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"create morphing using html and css no javascript required. don't play with vertexes\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-29T04:43:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-15T09:52:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif\" \/>\n<meta name=\"author\" content=\"Kunj Bihari\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/Kunj4uS4?s=08\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kunj Bihari\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/\"},\"author\":{\"name\":\"Kunj Bihari\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8108d3ba90ec52566f1a5ac42f15e67f\"},\"headline\":\"Morphing using SVG\",\"datePublished\":\"2018-06-29T04:43:56+00:00\",\"dateModified\":\"2024-10-15T09:52:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/\"},\"wordCount\":443,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif\",\"articleSection\":[\"Design Trends\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/\",\"url\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/\",\"name\":\"Morphing using SVG - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif\",\"datePublished\":\"2018-06-29T04:43:56+00:00\",\"dateModified\":\"2024-10-15T09:52:22+00:00\",\"description\":\"create morphing using html and css no javascript required. don't play with vertexes\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif\",\"width\":\"574\",\"height\":\"573\",\"caption\":\"node\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Morphing using SVG\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/8108d3ba90ec52566f1a5ac42f15e67f\",\"name\":\"Kunj Bihari\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1ac55e9feea587a83d579df303cf808fb1c609d6c106ad7ed51ba4ebd6af2296?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1ac55e9feea587a83d579df303cf808fb1c609d6c106ad7ed51ba4ebd6af2296?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Kunj Bihari\"},\"sameAs\":[\"https:\/\/x.com\/https:\/\/twitter.com\/Kunj4uS4?s=08\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/kunj-bihari671\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Morphing using SVG - Webkul Blog","description":"create morphing using html and css no javascript required. don't play with vertexes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/","og_locale":"en_US","og_type":"article","og_title":"Morphing using SVG - Webkul Blog","og_description":"create morphing using html and css no javascript required. don't play with vertexes","og_url":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-06-29T04:43:56+00:00","article_modified_time":"2024-10-15T09:52:22+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif","type":"","width":"","height":""}],"author":"Kunj Bihari","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/Kunj4uS4?s=08","twitter_site":"@webkul","twitter_misc":{"Written by":"Kunj Bihari","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/"},"author":{"name":"Kunj Bihari","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8108d3ba90ec52566f1a5ac42f15e67f"},"headline":"Morphing using SVG","datePublished":"2018-06-29T04:43:56+00:00","dateModified":"2024-10-15T09:52:22+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/"},"wordCount":443,"commentCount":6,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif","articleSection":["Design Trends"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/","url":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/","name":"Morphing using SVG - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif","datePublished":"2018-06-29T04:43:56+00:00","dateModified":"2024-10-15T09:52:22+00:00","description":"create morphing using html and css no javascript required. don't play with vertexes","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/06\/shape-min-min.gif","width":"574","height":"573","caption":"node"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/morphing-using-svg-animate-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Morphing using SVG"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/8108d3ba90ec52566f1a5ac42f15e67f","name":"Kunj Bihari","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1ac55e9feea587a83d579df303cf808fb1c609d6c106ad7ed51ba4ebd6af2296?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1ac55e9feea587a83d579df303cf808fb1c609d6c106ad7ed51ba4ebd6af2296?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Kunj Bihari"},"sameAs":["https:\/\/x.com\/https:\/\/twitter.com\/Kunj4uS4?s=08"],"url":"https:\/\/webkul.com\/blog\/author\/kunj-bihari671\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/130195","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/162"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=130195"}],"version-history":[{"count":66,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/130195\/revisions"}],"predecessor-version":[{"id":468932,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/130195\/revisions\/468932"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=130195"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=130195"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=130195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}