{"id":302186,"date":"2020-01-28T08:36:34","date_gmt":"2020-01-28T15:36:34","guid":{"rendered":"https:\/\/css-tricks.com\/?p=302186"},"modified":"2020-01-28T08:36:35","modified_gmt":"2020-01-28T15:36:35","slug":"use-and-reuse-everything-in-svg-even-animations","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/use-and-reuse-everything-in-svg-even-animations\/","title":{"rendered":"Use and Reuse Everything in SVG\u2026 Even Animations!"},"content":{"rendered":"\n<p>If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your code with <strong><code>&lt;use&gt;<\/code> element, CSS Variables and CSS animations.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay controls loop src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2020\/01\/cubes.mp4\"><\/video><figcaption><a rel=\"noreferrer noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/marianab\/pen\/KKKYdxE\">Live Demo<\/a><\/figcaption><\/figure>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"part-1-the-svg-ltusegt-element\">Part 1: The SVG &lt;use&gt; element<\/h3>\n\n\n<p>If you are a developer that likes to keep your code <a href=\"https:\/\/en.wikipedia.org\/wiki\/Don%2527t_repeat_yourself%23:~:targetText=From%2520Wikipedia%252C%2520the%2520free%2520encyclopedia,data%2520normalization%2520to%2520avoid%2520redundancy.\" rel=\"noopener\">DRY<\/a> or a big fan of Sass\/CSS variables, there is a good chance that you will like this tag.<\/p>\n\n\n\n<p>Let\u2019s say you have an element that is repeated many times in your graphic. Instead of having a complex part of your code repeated many times in your SVG, you can define this part once and then clone it somewhere else in your document with the &lt;use&gt; element. This will not only reduce an enormous amount of code, but also will make your markup simpler and easier to manipulate.<\/p>\n\n\n\n<p>To start implementing the <code>&lt;use&gt;<\/code> element, go to your SVG and follow this steps:<\/p>\n\n\n\n<ol><li>Identify the part of the code that you want to clone<\/li><li>Add an ID to that part<\/li><li>Link it inside your <code>&lt;use&gt;<\/code> tag like this: <code>&lt;use xlink:href=\"#id\"\/&gt;<\/code><\/li><\/ol>\n\n\n\n<p>That\u2019s it! Your new clone is ready, now you can change its attributes (e.g. <code>x<\/code> and <code>y<\/code> position) to fit your needs.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"lets-dive-into-a-very-convenient-example\"><strong>Let\u2019s dive into a very convenient example<\/strong><\/h3>\n\n\n<p>I want to share this real case where I needed to animate a big cube made of little cube units. (Imagine the classic <a href=\"https:\/\/www.rubiks.com\/en-us\/\" rel=\"noopener\">Rubik\u2019s Cube<\/a>.)<\/p>\n\n\n\n<p>We\u2019ll start by drawing the cube unit in SVG using basic shapes and transforms:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"language-svg\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">&lt;svg viewBox=\"-130 -20 300 100\">\n  &lt;g id=\"cube\">\n    &lt;rect width=\"21\" height=\"24\" transform=\"skewY(30)\"\/>\n    &lt;rect width=\"21\" height=\"24\" transform=\"skewY(-30) translate(21 24.3)\"\/>\n    &lt;rect width=\"21\" height=\"21\"  transform=\"scale(1.41,.81) rotate(45) translate(0 -21)\"\/>\n  &lt;\/g>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWWQbYP\" src=\"\/\/codepen.io\/anon\/embed\/XWWQbYP?height=350&amp;theme-id=1&amp;slug-hash=XWWQbYP&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWWQbYP\" title=\"CodePen Embed XWWQbYP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"explanation\">Note that the shapes are grouped in a <code>&lt;g&gt;<\/code> element so we can add the ID to the whole figure.<\/p>\n\n\n\n<p>Next, let\u2019s build a bigger cube cloning this unit. First, we need to wrap the cube from the previous example inside the <code>&lt;defs&gt;<\/code> tag inside the SVG. In the <code>&lt;defs&gt;<\/code> element we can put whatever we want to reuse, which could be a single shape, a group, a gradient.. almost any SVG element. They won\u2019t render anywhere unless we use them outside this tag.<\/p>\n\n\n\n<p>Then we can link the unit as many times as we want using its ID and change the <code>x<\/code> and <code>y<\/code> position on every clone like this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"language-svg\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">&lt;use xlink:href=\"#cube\" x=\"142\" y=\"124\"\/>\n&lt;use xlink:href=\"#cube\" x=\"100\" y=\"124\"\/>\n&lt;!-- ... --><\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvvZXqG\" src=\"\/\/codepen.io\/anon\/embed\/wvvZXqG?height=450&amp;theme-id=1&amp;slug-hash=wvvZXqG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvvZXqG\" title=\"CodePen Embed wvvZXqG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now we have to position every cube remembering that the last element will appear at the front, after that we\u2019ll have our first big cube ready!<\/p>\n\n\n\n<p class=\"explanation\"><code>xlink:href<\/code> is deprecated since SVG2, but is better to use it for compatibility purposes. In modern browsers you can just use href but I tested it on Safari and at the time of writing is not working there. If you use <code>xlink:href<\/code> make sure you include this namespace in your SVG tag: <code>xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"<\/code> (you won\u2019t need it if you decide to use href).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"part-2-using-css-variables-to-apply-different-styles-to-your-reused-graphic\"><strong>Part 2: Using CSS variables to apply different styles to your reused graphic<\/strong><\/h3>\n\n\n<p>I chose a main color for the cube, which is a lighter and a darker shade for the sides and a stroke color. But what if we want to make a second cube a different color?<\/p>\n\n\n\n<p>We can replace the fills and strokes with CSS variables to make these attributes more flexible. That way, we\u2019ll be able to reuse the same cube unit with another palette (instead of defining a second unit with different colors for a second cube).<\/p>\n\n\n\n<p>Why not add a class to the new cube and change the fill color with CSS? We\u2019ll do that, but first, try to inspect a <code>&lt;use&gt;<\/code> element. You\u2019ll notice it renders in the Shadow DOM. which means it is not vulnerable to scripts and styles, like elements in the normal DOM. Whatever values you define in the figure inside <code>&lt;defs&gt;<\/code> will be inherited by all its instances and you won\u2019t be able to rewrite those with CSS. But if you replace those values with variables, then you\u2019ll be able to <a href=\"https:\/\/tympanus.net\/codrops\/2015\/07\/16\/styling-svg-use-content-css\/\" rel=\"noopener\">control them in CSS<\/a>.<\/p>\n\n\n\n<p>In our cube unit, we\u2019ll go through each side and replace the fill and stroke values with semantic variable names.<\/p>\n\n\n\n<p>For example, this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"language-svg\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">&lt;rect fill=\"#00affa\" stroke=\"#0079ad\" \/><\/code><\/pre>\n\n\n\n<p>\u2026can be replaced with this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"language-svg\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">&lt;rect fill=\"var(--mainColor)\" stroke=\"var(--strokeColor)\" \/><\/code><\/pre>\n\n\n\n<p>From here, we must duplicate the SVG to build a second cube. However, we don\u2019t need to duplicate <code>&lt;defs&gt;<\/code> if we are keeping both in the same document. We can add a class to each SVG and control the color palette through CSS, redefining the values of the variable.<\/p>\n\n\n\n<p>Let\u2019s create a palette for the blue cube and another one for the pink cube:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"language-css\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">.blue-cube {\n  --mainColor: #009CDE;\n  --strokeColor: #0079ad;\n  --lightColor: #00affa;\n  --darkColor: #008bc7;\n}\n\n.pink-cube {\n  --mainColor: #de0063;\n  --strokeColor: #ad004e;\n  --lightColor: #fa0070;\n  --darkColor: #c7005a;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOOJQmw\" src=\"\/\/codepen.io\/anon\/embed\/gOOJQmw?height=450&amp;theme-id=1&amp;slug-hash=gOOJQmw&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOOJQmw\" title=\"CodePen Embed gOOJQmw\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This way, we can add as many cubes as we want and change all colors from one place.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"part-3-reusing-animations\"><strong>Part 3: Reusing animations<\/strong><\/h3>\n\n\n<p>The idea for this instance is to break the cubes on hover \u2014 something like an exploded view so some pieces will move away from the center when we place the cursor over the cubes.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKKYdxE\" src=\"\/\/codepen.io\/anon\/embed\/KKKYdxE?height=450&amp;theme-id=1&amp;slug-hash=KKKYdxE&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKKYdxE\" title=\"CodePen Embed KKKYdxE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Let\u2019s start by defining two movements, one for each axis: <code>move Y<\/code> and <code>move X<\/code>. By dividing the animations in movements, we\u2019ll be able to reuse them in every cube. The animations will consist of moving the cube from its initial position to 30px or 50px away in one direction. We can use a transform translate (<code>X<\/code> or <code>Y<\/code> ) to achieve that. For example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"language-css\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">@keyframes moveX {\n  to { transform: translateX(-35px);  }\n}<\/code><\/pre>\n\n\n\n<p>But if we want to be able to reuse this animation, it\u2019s better to replace the numeric value with a variable, like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"language-css\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">@keyframes moveX {\n  to { transform: translateX(var(--translate, 35px)); }\n}<\/code><\/pre>\n\n\n\n<p>If the variable is not defined, the default value will be 35px.<\/p>\n\n\n\n<p>Now we need at least one class to bind to the animation. In this case, though, we need two classes to move cubes in the x-axis: <code>.m-left<\/code> and <code>.m-right<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"language-css\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">.m-left, .m-right { \n  animation: 2s moveX alternate infinite; \n}<\/code><\/pre>\n\n\n\n<p>For the cube to move left, we need a negative value, but we can also declare a different number. We can define our variable like this <em>inside<\/em> the <code>.m-left<\/code> class:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"language-css\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">.m-left { --translate: -50px; }<\/code><\/pre>\n\n\n\n<p>What\u2019s happening here is we\u2019re declaring that, when we add the class <code>.m-left<\/code> to one element, this will play the animation <code>moveX<\/code> (the one defined in the <code>@keyframes<\/code>) which will last two seconds to translate in the x-axis and reach a new position that is -50px left. Then, the animation alternates directions so that it moves from the last position and take two more seconds to go to its original state. And so on, because it\u2019s an infinite loop.<\/p>\n\n\n\n<p>We can declare another variable to the <code>.m-right<\/code> class but if we don\u2019t, remember that it will take the 35px we declared at the beginning.<\/p>\n\n\n\n<p>The default <code>animation-play-state<\/code> value is running but maybe we don\u2019t want the cubes to move all the time. It would be very distracting and annoying to use on a site with some nearby content. So, let\u2019s try to play the animation only on hover by adding this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"language-css\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">svg:hover .m-left {\n  animation: 2s moveX alternate infinite;\n}<\/code><\/pre>\n\n\n\n<p>You can try it by yourself and will find that the animation is jumping super fast to the initial state every time we place the cursor out of the cube. To avoid it, we can add the value <code>paused<\/code> at the end of the animation shorthand:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"language-css\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">.m-left {\n  animation: 2s moveX alternate infinite paused;\n}<\/code><\/pre>\n\n\n\n<p>Now the animation is paused but will be running on hover by adding this line of CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"language-css\" data-line=\"\" class=\"wp-block-csstricks-code-block\"><code markup=\"tt\">svg:hover * { \n  animation-play-state: running; \n}<\/code><\/pre>\n\n\n\n<p>We can apply each class to different elements in the SVG. In the first blue cube, we are moving single cubes; in the second one, we\u2019re applying those classes to groups of cubes.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"one-last-thing\">One last thing\u2026<\/h3>\n\n\n<p>It wasn\u2019t until later that I realized I could reuse a single unit to build them all. I worked on the small cube to make it isometric enough so it could align easily with the other ones next to it. At this point, my unit was a <code>&lt;path&gt;<\/code>, but I decided to replace it with SVG shapes to reduce the code and get cleaner markup.<\/p>\n\n\n\n<p>I learned that it is better to take some time to analyze what can be done with SVG before drawing every single shape and dealing with a huge amount of code. It might take more time at the beginning, but will save you a lot of time and effort in the long run.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are familiar with SVG and CSS animations and started to work with them often, here are some ideas you might want to keep in mind before jumping into the job. This article will be about learning how to build and optimize your code with &lt;use&gt; element, CSS Variables and CSS animations.<\/p>\n","protected":false},"author":274059,"featured_media":302188,"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":[469,526],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/01\/svg-cube-animation.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":350223,"url":"https:\/\/css-tricks.com\/how-i-made-a-generator-for-svg-loaders-with-sass-and-smil-options\/","url_meta":{"origin":302186,"position":0},"title":"How I Made a Generator for SVG Loaders With Sass and SMIL Options","date":"August 26, 2021","format":false,"excerpt":"While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let\u2019s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/custom-loader.gif?fit=1200%2C727&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":337636,"url":"https:\/\/css-tricks.com\/platform-news-rounded-outlines-gpu-accelerated-svg-animations-how-css-variables-are-resolved\/","url_meta":{"origin":302186,"position":1},"title":"Platform News: Rounded Outlines, GPU-Accelerated SVG Animations, How CSS Variables Are Resolved","date":"April 2, 2021","format":false,"excerpt":"In the news this week, Firefox gets rounded outlines, SVG animations are now GPU-accelerated in Chrome, there are no physical units in CSS, The New York Times crossword is accessible, and CSS variables are resolved before the value is inherited. Let's jump in the news! Rounded outlines are coming to\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/wpn-20210402.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324484,"url":"https:\/\/css-tricks.com\/libraries-for-svg-drawing-animations\/","url_meta":{"origin":302186,"position":2},"title":"Libraries for SVG Drawing Animations","date":"November 11, 2020","format":false,"excerpt":"In 2013, Jake Archibald introduced this cool trick of animating an SVG path to look like it\u2019s drawing itself. It\u2019s 2020 now, and the trick is still popular. I\u2019ve seen it on a lot of websites I\u2019ve visited recently. I, too, feature an animated SVG loader on my website using\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/castle-svg-texture.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":157102,"url":"https:\/\/css-tricks.com\/svg-line-animations\/","url_meta":{"origin":302186,"position":3},"title":"SVG Line Animations","date":"November 25, 2013","format":false,"excerpt":"Nice post by the Vox Media team detailing how the line animations work in their epic PS4 review. Little weird not to credit Jake though.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":351146,"url":"https:\/\/css-tricks.com\/fire-svg-animations-smil-when-the-svg-is-visible\/","url_meta":{"origin":302186,"position":4},"title":"Fire SVG animations (SMIL) when the SVG is visible","date":"September 7, 2021","format":false,"excerpt":"When requirements read \"when visible\" your brain should go straight to IntersectionObserver. That's exactly what Zach is doing here to kick off an animation when it scrolls into view. Except this animation is an SVG SMIL animation: an <animate> situation. SMIL animations have some kinda cool things they can do,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/zach-leatherman-smil.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":186041,"url":"https:\/\/css-tricks.com\/guide-svg-animations-smil\/","url_meta":{"origin":302186,"position":5},"title":"A Guide to SVG Animations (SMIL)","date":"October 13, 2014","format":false,"excerpt":"Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features. The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/path.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302186"}],"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\/274059"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=302186"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302186\/revisions"}],"predecessor-version":[{"id":302586,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/302186\/revisions\/302586"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/302188"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=302186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=302186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=302186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}