{"id":127,"date":"2018-05-03T19:04:04","date_gmt":"2018-05-03T17:04:04","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2018\/05\/03\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/"},"modified":"2020-06-18T07:39:43","modified_gmt":"2020-06-18T07:39:43","slug":"morphing-svg-icons-with-keyshape-and-sketch-part-1","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/","title":{"rendered":"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1"},"content":{"rendered":"<figure>\n<p><img decoding=\"async\" data-width=\"1920\" data-height=\"1080\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg\"><br \/>\n<\/figure>\n<p>First of all, creating smooth morphing shape animations is hard. But if you follow these \u201dbest practices\u201d you\u2019ll find that your end results will get better and better. This first part is only 12 minutes long and I can promise you that you will get very far with this few tips and tricks. Good luck! ?<\/p>\n<h4>Why Keyshape?<\/h4>\n<p>We will be creating these with an app called <a href=\"https:\/\/www.keyshapeapp.com\/\" title=\"Go get it dude\" target=\"_blank\" rel=\"noopener noreferrer\">Keyshape<\/a>.<br \/>I prefer Keyshape for a number of reasons:<br \/>\u2022 Simple UI that resembles Sketch<br \/>\u2022 Really stable releases, getting better and better with each update<br \/>\u2022 Zero bugs! It just works man ?<br \/>\u2022 Affordable ?<br \/>\u2022 Support for plugins (we do love those plugins don\u2019t we?) ?<\/p>\n<h4>Keyshape exports to lots of\u00a0formats<\/h4>\n<figure>\n<p><img decoding=\"async\" data-width=\"1543\" data-height=\"939\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*NAVS1w8jG4adhkYk5sjyvQ.jpeg\"><br \/>\n<\/figure>\n<p>Bottom line is you\u2019ll find something that fits your purpose. Whether it\u2019s for using in apps (Lottie, ADV, PNG Image Sequence), the web (SVG, KeyshapeJS, CSS animation) or even for your tutorial videos or blog (MP4, GIF) the app has you covered. Take that After Effects ha!<\/p>\n<h4>You will learn to do this???\u200d?<\/h4>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"450\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*1x1K6p6fCpP6LJrejjUc3w.gif\"><br \/>\n<\/figure>\n<h4>Download these\u00a0first<\/h4>\n<ol>\n<li>\n<a href=\"https:\/\/www.keyshapeapp.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Keyshape App<\/a> (14 day trial version available for free)<\/li>\n<li><a href=\"https:\/\/drive.google.com\/open?id=1xuJRnXEbmfwJfKrkgafX_JrchhZxsLE1\" target=\"_blank\" rel=\"noopener noreferrer\">Tutorial assets<\/a><\/li>\n<\/ol>\n<h3>Video Tutorial\u00a0Includes<\/h3>\n<p>&#8211; Introduction to morphing<br \/>&#8211; Best practices for exporting assets from Sketch<br \/>&#8211; Best practices for getting good morphing results in Keyshape<br \/>&#8211; Hands-on how to animate between states in Keyshape<br \/>&#8211; Preview it in your browser and edit the code directly<\/p>\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"Morphing SVG Icons with Keyshape and Sketch\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/X2quZxYPnWw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<p><em>Approx 11.46 min running time<\/em><\/p>\n<h3>Part 1 Video Tutorial Highlights<\/h3>\n<p>(for really busy people ??)<\/p>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"336\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*T6Zz3Q3MFFgr1lp72ebFww.gif\"><figcaption class=\"wp-caption-text\">Make sure to find similar shapes, that brings better morphing\u00a0results<\/figcaption><\/figure>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"336\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*BNbqZCSy_V1B0VxNBT1RCQ.gif\"><figcaption class=\"wp-caption-text\">You can skip this counting in Sketch but make sure to keep this one in\u00a0mind<\/figcaption><\/figure>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"336\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*3m6bUmYSEkGe8jxcUyP0qg.gif\"><figcaption class=\"wp-caption-text\">Always export the artboards!<\/figcaption><\/figure>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"336\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*2al1-7j2E8weouqoiXmyBg.gif\"><figcaption class=\"wp-caption-text\">Keep checking those anchor points in\u00a0Keyshape<\/figcaption><\/figure>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"336\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*SStE4eTPaMVXQB3ypdHkyg.gif\"><figcaption class=\"wp-caption-text\">Color coding\u00a0helps!<\/figcaption><\/figure>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"336\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*LeSvHTrUiCv8_bKekYQTlg.gif\"><figcaption class=\"wp-caption-text\">You need same amount of nodes in all shapes you want to morph\u00a0between<\/figcaption><\/figure>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"336\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*shFBX-LGQL0BzuDM6PQ__A.gif\"><figcaption class=\"wp-caption-text\">Use the Pen Tool to add\/subtract shapes<\/figcaption><\/figure>\n<hr>\n<figure class=\"wp-caption\">\n<p><img decoding=\"async\" data-width=\"600\" data-height=\"336\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*xgMY1gZeJlxWULSo0QqRYg.gif\"><figcaption class=\"wp-caption-text\">Set Start Node makes or breaks a good\u00a0morph<\/figcaption><\/figure>\n<hr>\n<p><em>That\u2019s all folks!<\/em><\/p>\n<figure>\n<p><img decoding=\"async\" data-width=\"800\" data-height=\"400\" src=\"https:\/\/cdn-images-1.medium.com\/max\/800\/1*CRr6d9kbhPi6bQjEReyHGQ@2x.png\"><br \/>\n<\/figure>\n","protected":false},"excerpt":{"rendered":"<p>First of all, creating smooth morphing shape animations is hard. But if you follow these \u201dbest practices\u201d you\u2019ll find that your end results will get better and better. This first part is only 12 minutes long and I can promise you that you will get very far with this few tips and tricks. Good luck!&hellip;&nbsp;<a href=\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/\" class=\"\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"bgseo_title":"","bgseo_description":"","bgseo_robots_index":"","bgseo_robots_follow":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[166],"tags":[27,74,18,8,28],"class_list":["post-127","post","type-post","status-publish","format-standard","hentry","category-tutorials","tag-keyshape","tag-motion-design","tag-sketch-app","tag-svg","tag-ui-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1 | Sketch2React Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1 - Sketch2React Blog\" \/>\n<meta property=\"og:description\" content=\"First of all, creating smooth morphing shape animations is hard. But if you follow these \u201dbest practices\u201d you\u2019ll find that your end results will get better and better. This first part is only 12 minutes long and I can promise you that you will get very far with this few tips and tricks. Good luck!&hellip;&nbsp;Read More &raquo;Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Sketch2React Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-03T17:04:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-18T07:39:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg\" \/>\n<meta name=\"author\" content=\"Juan Maguid\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Maguid\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/\"},\"author\":{\"name\":\"Juan Maguid\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\"},\"headline\":\"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1\",\"datePublished\":\"2018-05-03T17:04:04+00:00\",\"dateModified\":\"2020-06-18T07:39:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/\"},\"wordCount\":326,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg\",\"keywords\":[\"Keyshape\",\"Motion Design\",\"Sketch App\",\"SVG\",\"UI Design\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/\",\"name\":\"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1 - Sketch2React Blog\",\"isPartOf\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg\",\"datePublished\":\"2018-05-03T17:04:04+00:00\",\"dateModified\":\"2020-06-18T07:39:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#primaryimage\",\"url\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg\",\"contentUrl\":\"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sketch2react.io\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#website\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"name\":\"Sketch2React Blog\",\"description\":\"Articles, tutorials, tips &amp; tricks\",\"publisher\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sketch2react.io\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#organization\",\"name\":\"Sketch2React Blog\",\"url\":\"https:\/\/sketch2react.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"contentUrl\":\"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png\",\"width\":512,\"height\":512,\"caption\":\"Sketch2React Blog\"},\"image\":{\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e\",\"name\":\"Juan Maguid\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g\",\"caption\":\"Juan Maguid\"},\"url\":\"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1 | Sketch2React Blog","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:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/","og_locale":"en_US","og_type":"article","og_title":"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1 - Sketch2React Blog","og_description":"First of all, creating smooth morphing shape animations is hard. But if you follow these \u201dbest practices\u201d you\u2019ll find that your end results will get better and better. This first part is only 12 minutes long and I can promise you that you will get very far with this few tips and tricks. Good luck!&hellip;&nbsp;Read More &raquo;Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1","og_url":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/","og_site_name":"Sketch2React Blog","article_published_time":"2018-05-03T17:04:04+00:00","article_modified_time":"2020-06-18T07:39:43+00:00","og_image":[{"url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg","type":"","width":"","height":""}],"author":"Juan Maguid","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Juan Maguid","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#article","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/"},"author":{"name":"Juan Maguid","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e"},"headline":"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1","datePublished":"2018-05-03T17:04:04+00:00","dateModified":"2020-06-18T07:39:43+00:00","mainEntityOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/"},"wordCount":326,"commentCount":0,"publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg","keywords":["Keyshape","Motion Design","Sketch App","SVG","UI Design"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/","url":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/","name":"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1 - Sketch2React Blog","isPartOf":{"@id":"https:\/\/sketch2react.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#primaryimage"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg","datePublished":"2018-05-03T17:04:04+00:00","dateModified":"2020-06-18T07:39:43+00:00","breadcrumb":{"@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#primaryimage","url":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg","contentUrl":"https:\/\/cdn-images-1.medium.com\/max\/1200\/1*ZNOoA25mHjIektL0F-7QnA.jpeg"},{"@type":"BreadcrumbList","@id":"https:\/\/sketch2react.io\/blog\/morphing-svg-icons-with-keyshape-and-sketch-part-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sketch2react.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Morphing SVG Icons with Keyshape and Sketch \u2014 Part 1"}]},{"@type":"WebSite","@id":"https:\/\/sketch2react.io\/blog\/#website","url":"https:\/\/sketch2react.io\/blog\/","name":"Sketch2React Blog","description":"Articles, tutorials, tips &amp; tricks","publisher":{"@id":"https:\/\/sketch2react.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sketch2react.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sketch2react.io\/blog\/#organization","name":"Sketch2React Blog","url":"https:\/\/sketch2react.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","contentUrl":"https:\/\/sketch2react.io\/blog\/wp-content\/uploads\/2021\/10\/cropped-S2R2021Icon.png","width":512,"height":512,"caption":"Sketch2React Blog"},"image":{"@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/7fc8fe20e137be20a66bc8634c059f4e","name":"Juan Maguid","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sketch2react.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eac199ca87b7cbb76863825e2f447fafd34ac3b7c4a03c94f499103333c24832?s=96&d=wavatar&r=g","caption":"Juan Maguid"},"url":"https:\/\/sketch2react.io\/blog\/author\/sketch2react\/"}]}},"_links":{"self":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":1,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":351,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/posts\/127\/revisions\/351"}],"wp:attachment":[{"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sketch2react.io\/blog\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}