{"id":303261,"date":"2020-02-20T14:49:25","date_gmt":"2020-02-20T21:49:25","guid":{"rendered":"https:\/\/css-tricks.com\/?p=303261"},"modified":"2020-02-20T14:49:27","modified_gmt":"2020-02-20T21:49:27","slug":"animate-svg-path-changes-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/animate-svg-path-changes-in-css\/","title":{"rendered":"Animate SVG Path Changes in CSS"},"content":{"rendered":"\n<p>Every once in a while I&#8217;m motivated to attempt to draw some shapes with <code>&lt;path&gt;<\/code>, the <a href=\"https:\/\/css-tricks.com\/svg-path-syntax-illustrated-guide\/\">all-powerful drawing syntax<\/a> of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like <code>L<\/code>) are pretty straightforward and I find the curved <code>Q<\/code> command fairly intuitive. Box yourself into a <code>viewBox=\"0 0 100 100\"<\/code> and drawing simple stuff doesn&#8217;t seem so bad.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p> Here&#8217;s a classic example of mine that draws things with all the basic commands, <em>but also animates them with CSS<\/em> (Chromium browsers only): <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NRwANp\" src=\"\/\/codepen.io\/anon\/embed\/NRwANp?height=550&amp;theme-id=1&amp;slug-hash=NRwANp&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NRwANp\" title=\"CodePen Embed NRwANp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Weird but true:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;svg viewBox=\"0 0 10 10\">\n  &lt;path d=\"M2,2 L8,8\" \/>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">svg:hover path {\n  transition: 0.2s;\n  d: path(\"M8,2 L2,8\");\n}<\/code><\/pre>\n\n\n\n<p>The other day I had a situation where I needed a UI element that has a different icon depending on what state it&#8217;s in. It was kind of a &#8220;log&#8221; shape so the default was straight lines, kinda like a hamburger menu (only four lines so it read more like lines of text), then other various states.<\/p>\n\n\n\n<ol><li>DEFAULT<\/li><li>ACTIVE<\/li><li>SUCCESS<\/li><li>ERROR<\/li><\/ol>\n\n\n\n<p>First I wrote the most complicated state machine in the world:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const indicator = document.querySelector(\".element\");\n\nlet currentState = indicator.dataset.state;\n\nindicator.addEventListener(\"click\", () => {\n  let nextState = \"\";\n\n  if (currentState == \"DEFAULT\") {\n    nextState = \"ACTIVE\";\n  } else if (currentState == \"ACTIVE\") {\n    nextState = \"SUCCESS\";\n  } else if (currentState == \"SUCCESS\") {\n    nextState = \"ERROR\";\n  } else {\n    nextState = \"DEFAULT\";\n  }\n  \n  indicator.dataset.state = nextState;\n  currentState = nextState;\n});<\/code><\/pre>\n\n\n\n<p>That opened the door for styling states with data-attributes:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.element {\n  \n  &amp;[data-state=\"DEFAULT\"] {\n  }\n  &amp;[data-state=\"ACTIVE\"] {\n  }\n  &amp;[data-state=\"SUCCESS\"] {\n  }\n  &amp;[data-state=\"ERROR\"] {\n  }\n\n}<\/code><\/pre>\n\n\n\n<p>So now if my element starts with the default state of four lines:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div class=\"element\" data-state=\"DEFAULT\">\n  &lt;svg viewBox=\"0 0 100 100\" class=\"icon\">\n    &lt;path d=\"M0, 20 Q50, 20 100, 20\">&lt;\/path>\n    &lt;path d=\"M0, 40 Q50, 40 100, 40\">&lt;\/path>\n    &lt;path d=\"M0, 60 Q50, 60 100, 60\">&lt;\/path>\n    &lt;path d=\"M0, 80 Q50, 80 100, 80\">&lt;\/path>\n  &lt;\/svg>\n&lt;\/div>\n<\/code><\/pre>\n\n\n\n<p>&#8230;I can alter those paths in CSS for the rest of the states. For example, I can take those four straight lines and alter them in CSS.<\/p>\n\n\n\n<p class=\"explanation\">Note the four &#8220;straight&#8221; lines conveniently have an unused curve point in them. Only paths that have the same number and type of points in them can be animated in CSS. Putting the curve point in there opens doors.<\/p>\n\n\n\n<p>These four new paths actually draw something close to a circle! <\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">.editor-indicator {\n  \n  &amp;[data-state=\"ACTIVE\"] {\n    .icon {\n      :nth-child(1) {\n        d: path(\"M50, 0 Q95, 5 100,50\");\n      }\n      :nth-child(2) {\n        d: path(\"M100, 50 Q95, 95 50,100\");\n      }\n      :nth-child(3) {\n        d: path(\"M50,100 Q5, 95 0, 50\");\n      }\n      :nth-child(4) {\n        d: path(\"M0, 50 Q5, 5 50, 0\");\n      }\n    }\n  }\n\n}<\/code><\/pre>\n\n\n\n<p>For the other states, I drew a crude checkmark (for SUCCESS) and a crude exclamation point (for FAILURE). <\/p>\n\n\n\n<p>Here&#8217;s a demo (again, Chromium), where you can click it to change the states:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvBZyXX\" src=\"\/\/codepen.io\/anon\/embed\/wvBZyXX?height=250&amp;theme-id=1&amp;slug-hash=wvBZyXX&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvBZyXX\" title=\"CodePen Embed wvBZyXX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>I didn&#8217;t end up using the thing because neither Firefox nor Safari support the <code>d: path();<\/code> thing in CSS. Not that it doesn&#8217;t animate them, it just doesn&#8217;t work period, so it was out for me. I just ended up swapping out the icons in the different states. <\/p>\n\n\n\n<p>If you need cross-browser shape morphing, we have <a href=\"https:\/\/css-tricks.com\/many-tools-shape-morphing\/\">a whole article about that<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Every once in a while I&#8217;m motivated to attempt to draw some shapes with &lt;path&gt;, the all-powerful drawing syntax of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like L) are pretty straightforward and I find the curved Q [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":303535,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/02\/simple-svg-paths.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303261"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=303261"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303261\/revisions"}],"predecessor-version":[{"id":304058,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/303261\/revisions\/304058"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/303535"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=303261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=303261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=303261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}