{"id":186041,"date":"2014-10-13T07:38:45","date_gmt":"2014-10-13T14:38:45","guid":{"rendered":"http:\/\/css-tricks.com\/?p=186041"},"modified":"2022-08-23T08:40:56","modified_gmt":"2022-08-23T15:40:56","slug":"guide-svg-animations-smil","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/guide-svg-animations-smil\/","title":{"rendered":"A Guide to SVG Animations (SMIL)"},"content":{"rendered":"\n<p class=\"is-style-explanation\"><strong>Update December 2015:<\/strong> At the time of this update, SMIL seems to be kinda dying. Sarah Drasner <a href=\"https:\/\/css-tricks.com\/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features\/\">has a guide<\/a> on how you can replace some of it&#8217;s features.<\/p>\n\n\n\n<p class=\"intro\"><em>The following is a guest post by <a href=\"http:\/\/sarasoueidan.com\/\" rel=\"noopener\">Sara Soueidan<\/a>. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide.<\/em><\/p>\n\n\n\n<!--more-->\n\n\n\n<details open>\n  <summary>\n          <h3>Table of contents<\/h3>\n      <\/summary>\n  \n<ul class=\"simpletoc-list\"   >\n<li>\n<a  href=\"#overview\">Overview<\/a><\/li><li>\n<a  href=\"#why-use-svg-animations\">Why use SVG animations?<\/a><\/li><li>\n<a  href=\"#browser-support-and-fallbacks\">Browser support and fallbacks<\/a><\/li><li>\n<a  href=\"#specifying-the-target-of-the-animation-with-xlinkhref\">Specifying the target of the animation with xlink:href<\/a><\/li><li>\n<a  href=\"#specifying-the-target-property-of-the-animation-with-attributename-and-attributetype\">Specifying the target property of the animation with attributeName and attributeType<\/a><\/li><li>\n<a  href=\"#animating-an-elements-attribute-from-one-value-to-another-over-a-duration-of-time-and-specifying-the-end-state-from-by-to-dur-and-fill\">Animating an element&#8217;s attribute from one value to another over a duration of time, and specifying the end state: from, by, to, dur and fill<\/a><\/li><li>\n<a  href=\"#animating-along-arbitrary-paths-the-element\">Animating along arbitrary paths: The Element<\/a><\/li><li>\n<a  href=\"#moving-text-along-an-arbitrary-path\">Moving text along an arbitrary path<\/a><\/li><li>\n<a  href=\"#animating-transformations-the-ltanimatetransformgtltanimatetransformgt-element\">Animating transformations: The &lt;animatetransform&gt;&lt;\/animatetransform&gt; Element<\/a><\/li><li>\n<a  href=\"#the-ltsetgtltsetgt-element\">The &lt;set&gt;&lt;\/set&gt; element<\/a><\/li><li>\n<a  href=\"#elements-attributes-and-properties-that-can-be-animated\">Elements, attributes and properties that can be animated<\/a><\/li><li>\n<a  href=\"#final-words\">Final words<\/a><\/li><\/ul>\n\n<\/details>\n\n<h3 class=\"wp-block-heading\" id=\"overview\">Overview<\/h3>\n\n\n<p>SVG graphics can be animated using <strong>animation elements<\/strong>. The animation elements were initially defined in the <a href=\"http:\/\/www.w3.org\/TR\/2001\/REC-smil-animation-20010904\/\" rel=\"noopener\">SMIL<\/a> Animation specification; these elements include:<\/p>\n\n\n\n<ul><li><code>&lt;animate&gt;&lt;\/animate&gt;<\/code>&#8211; which allows you to animate scalar attributes and properties over a period of time.<\/li><li><code>&lt;set&gt;&lt;\/set&gt;<\/code> &#8211; which is a convenient shorthand for animate, which is useful for assigning animation values to non-numeric attributes and properties, such as the visibility property.<\/li><li><code>&lt;animatemotion&gt;&lt;\/animatemotion&gt;<\/code> &#8211; which moves an element along a motion path.<\/li><li><code>&lt;animatecolor&gt;&lt;\/animatecolor&gt;<\/code> &#8211; which modifies the color value of particular attributes or properties over time. Note that the element has been deprecated in favor of simply using the animate element to target properties that can take color values. Even though it&#8217;s still present in the SVG 1.1 specification, it is clearly noted that it has been deprecated; and it has been completely removed from the SVG 2 specification.<\/li><\/ul>\n\n\n\n<p>In addition to the animation elements defined in the SMIL spec, SVG includes extensions compatible with the SMIL animations spec; these extensions include attributes that extend the functionality of the element and additional animation elements. The SVG extensions include:<\/p>\n\n\n\n<ul><li><code>&lt;animatetransform&gt;&lt;\/animatetransform&gt;<\/code> &#8211; allows you to animate one of SVG&#8217;s transformation attributes over time, such as the <code>transform<\/code> attribute.<\/li><li><code>path<\/code> <em>(attribute)<\/em> &#8211; allows any feature from SVG&#8217;s path data syntax to be specified in a path attribute to the <code>animateMotion<\/code> element (SMIL Animation only allows a subset of SVG&#8217;s path data syntax within a path attribute). We&#8217;ll talk more about <code>animateMotion<\/code> in an upcoming section.<\/li><li><code>&lt;mpath&gt;&lt;\/mpath&gt;<\/code> &#8211; used in conjunction with the <code>animateMotion<\/code> element to reference a motion path that is to be used as a path for the motion. The mpath element is included inside the <code>animateMotion<\/code> element, before the closing tag.<\/li><li><code>keypoints<\/code> <em>(attribute)<\/em> &#8211; used as an attribute for <code>animateMotion<\/code> to provide precise control of the velocity of motion path animations.<\/li><li><code>rotate<\/code> <em>(attribute)<\/em> &#8211; used as an attribute for <code>animateMotion<\/code> to control whether an object is automatically rotated so that its x-axis points in the same direction (or opposite direction) as the directional tangent vector of the motion path. This attribute is the key to making motion along a path work as you&#8217;d expect. More about this in the <code>animateMotion<\/code> section.<\/li><\/ul>\n\n\n\n<p>SVG animations can be similar to CSS animations and transitions via by their nature. Keyframes are created, things move, colors change, etc. However, they can do somethings that CSS animations can&#8217;t do, which we&#8217;ll cover.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"why-use-svg-animations\">Why use SVG animations?<\/h3>\n\n\n<p>SVGs can be <a href=\"http:\/\/slides.com\/sarasoueidan\/styling-animating-svgs-with-css--2#\/\" rel=\"noopener\">styled and animated with CSS (slides)<\/a>. Basically, any transformation or transition animation that can be applied to an HTML element can also be applied to an SVG element. But there are some SVG properties that cannot be animated through CSS that can through SVG. An SVG path, for example, comes with a set of <strong>data<\/strong> (a <code>d=\"\"<\/code> attribute) that defines that path&#8217;s shape. This data can be modified and animated through SMIL, but not CSS. This is because SVG elements are described by a set of attributes known as SVG <em>presentation attributes<\/em>. Some of these attributes can be set, modified, and animated using CSS, and others can&#8217;t.<\/p>\n\n\n\n<p>So, many animations and effects can simply not be achieved using CSS at this time. The CSS SVG animation gaps can be filled by using either JavaScript or the declarative SVG animations derived from SMIL.<\/p>\n\n\n\n<p>If you prefer using JavaScript, I recommend using <a href=\"http:\/\/snapsvg.io\" rel=\"noopener\">snap.svg<\/a> by Dmitry Baranovsky, which is described as being &#8220;the jQuery of SVG&#8221;. Here&#8217;s <a href=\"http:\/\/codepen.io\/collection\/edpyJ\/\" rel=\"noopener\">a collection of examples<\/a> of that.<\/p>\n\n\n\n<p>Or if you prefer a more declarative animation approach, you can use the SVG animation elements as we&#8217;ll cover in this guide!<\/p>\n\n\n\n<p>Another advantage to SMIL over JS animations is that JS animations don&#8217;t work when the SVG is embedded as an <code>img<\/code> or used as a <code>background-image<\/code> in CSS. SMIL animations do work in both cases (or should, browser support pending). That&#8217;s a big advantage, in my opinion. You may find yourself choosing SMIL over other options because of that. This article is a guide to help you get started using SMIL today.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support-and-fallbacks\">Browser support and fallbacks<\/h3>\n\n\n<p>Browser support for SMIL animations is pretty decent. They work in all browsers except in Internet Explorer and Opera Mini. For a thorough overview of browser support, you can refer to the <a href=\"http:\/\/caniuse.com\/#feat=svg-smil\" rel=\"noopener\">compatibility table on Can I Use<\/a>.<\/p>\n\n\n\n<p>If you need to provide a fallback for SMIL animations, you can test for browser support on-the-fly using <a href=\"http:\/\/modernizr.com\/\" rel=\"noopener\">Modernizr<\/a>. If SMIL is not supported, you can then provide some kind of fallback (JavaScript animations, an alternate experience, etc).<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"specifying-the-target-of-the-animation-with-xlinkhref\">Specifying the target of the animation with <code>xlink:href<\/code><\/h3>\n\n\n<p>No matter which of the four animation elements you choose, you need to specify the target of the animation defined by that element.<\/p>\n\n\n\n<p>In order to specify a target, you can use the <code>xlink:href<\/code> attribute. The attribute takes a URI reference to the element which is the target of this animation and which therefore will be modified over time. <strong>The target element must be part of the current SVG document fragment.<\/strong><\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;rect id=\"cool_shape\" ...=\"\">\n  &lt;animate xlink:href=\"#cool_shape\" ...=\"\">&lt;\/animate>\n&lt;\/rect><\/code><\/pre>\n\n\n\n<p>If you&#8217;ve come across SVG animation elements before, you&#8217;ve probably seen them nested inside the element that they&#8217;re supposed to animate. This is possible as well as per the spec:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>If the <code>xlink:href<\/code> attribute is not provided, then the target element will be the immediate parent element of the current animation element.<\/p><\/blockquote>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;rect id=\"cool_shape\" ...=\"\">\n  &lt;animate ...=\"\">&lt;\/animate>\n&lt;\/rect><\/code><\/pre>\n\n\n\n<p>So if you want to &#8220;encapsulate&#8221; the animation into the element it applies to, you can do that. And if you want to keep the animations separate somewhere else in the document, you can do that too, and specify the target of each animation using <code>xlink:href<\/code>. Both ways work just fine.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"specifying-the-target-property-of-the-animation-with-attributename-and-attributetype\">Specifying the target property of the animation with <code>attributeName<\/code> and <code>attributeType<\/code><\/h3>\n\n\n<p>All animation elements also share another attribute: <code>attributeName<\/code>. The <code>attributeName<\/code> attribute is used to specify the name of the attribute that you&#8217;re animating.<\/p>\n\n\n\n<p>For example, if you want to animate the position of the center of a on the x-axis, you do that by specifying <code>cx<\/code> as the value for the <code>attributeName<\/code> attribute.<\/p>\n\n\n\n<p><code>attributeName<\/code> takes only one value, not a list of values, so, you can only animate one attribute at a time. If you want to animate more than one attribute, you need to define more than one animation for the element. This is something that I wish were different, and that I think CSS has an advantage over SMIL for. But then again, because of the values possible for other animation attributes (which we&#8217;ll cover next), it only makes sense to define only one attribute name at a time, otherwise the other attribute values can become too complex to work with.<\/p>\n\n\n\n<p>When you specify the attribute name, you can add an XMLNS (short for XML namespace) prefix to indicate the namespace of the attribute. The namespace can also be specified using the <code>attributeType<\/code> attribute. For example, some attributes are part of the CSS namespace (which means that the attribute can be found as a CSS property as well) and others are XML-only. A table showing these attributes can be found <a href=\"http:\/\/slides.com\/sarasoueidan\/styling-animating-svgs-with-css#\/10\" rel=\"noopener\">here<\/a>. The attributes in the table are not all of the SVG attributes. They are only the ones that can be set using CSS. Some of them are already available as CSS properties.<\/p>\n\n\n\n<p>If the value for <code>attributeType<\/code> is not explicitly set or is set to <code>auto<\/code>, the browser must first search through the list of CSS properties for a matching property name, and if none is found, search the default XML namespace for the element.<\/p>\n\n\n\n<p>For example, the following snippet animates the <code>opacity<\/code> of an SVG rectangle. Since the <code>opacity<\/code> attribute is also available as a CSS property, the <code>attributeType<\/code> is set to the CSS namespace:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;rect>\n  &lt;animate\n    attributetype=\"CSS\"\n    attributename=\"opacity\" \n    from=\"1\" \n    to=\"0\" \n    dur=\"5s\" \n    repeatcount=\"indefinite\">\n  &lt;\/animate>\n&lt;\/rect><\/code><\/pre>\n\n\n\n<p>We&#8217;ll go over the other animation attributes in the upcoming examples below. Except where otherwise noted, all of the animation attributes are common to all of the animation elements.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"animating-an-elements-attribute-from-one-value-to-another-over-a-duration-of-time-and-specifying-the-end-state-from-by-to-dur-and-fill\">Animating an element&#8217;s attribute from one value to another over a duration of time, and specifying the end state: <code>from<\/code>, <code>by<\/code>, <code>to<\/code>, <code>dur<\/code> and <code>fill<\/code><\/h3>\n\n\n<p>Let&#8217;s start by moving a circle from one position to another. We&#8217;re going to do that by changing the value of its <code>cx<\/code> attribute (which specifies the x-position of its center).<\/p>\n\n\n\n<p>We&#8217;re going to use the element to do that. This element is used to animate one attribute at a time. Attributes that take numerical values and colors are usually animated with . For a list of attributes that can be animated, refer to <a href=\"http:\/\/www.w3.org\/TR\/SVG2\/animate.html#AnimationAttributesAndProperties\" rel=\"noopener\">this table<\/a>.<\/p>\n\n\n\n<p>In order to change a value to another over a period of time, the <code>from<\/code>, <code>to<\/code>, and <code>dur<\/code> attributes are used. In addition to these, you will also want to specify <em>when<\/em> the animation should start with the <code>begin<\/code> attribute.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;circle id=\"my-circle\" r=\"30\" cx=\"50\" cy=\"50\" fill=\"orange\">\n  &lt;animate xlink:href=\"#my-circle\" attributename=\"cx\" from=\"50\" to=\"450\" dur=\"1s\" begin=\"click\" fill=\"freeze\">&lt;\/animate>\n&lt;\/circle><\/code><\/pre>\n\n\n\n<p>In the above example, we&#8217;ve defined a circle, and then called an animation on that circle. The center of the circle moves from the initial position at 50 units, to 450 units along the x-axis.<\/p>\n\n\n\n<p>The <code>begin<\/code> value is set to <code>click<\/code>. This means that the circle will move when it is clicked. You can set this value to a time value as well. For example, <code>begin=\"0s\"<\/code> will start the animation as soon as the page is loaded. You can <strong>delay an animation<\/strong> by setting a positive time value. For example, <code>begin=\"2s\"<\/code> starts the animation two seconds after load.<\/p>\n\n\n\n<p>What&#8217;s even more interesting about <code>begin<\/code> is that you can define values like <code>click + 1s<\/code> to start an animation <strong>one second after the element is clicked!<\/strong> What&#8217;s more, you can use other values that allow you to sync animations without having calculate the duration and delays of other animations. More about this later.<\/p>\n\n\n\n<p>The <code>dur<\/code> attribute is similar to the <code>animation-duration<\/code> equivalent in CSS.<\/p>\n\n\n\n<p>The <code>from<\/code> and <code>to<\/code> attributes are similar to the <code>from<\/code> and <code>to<\/code> keyframes in an animation&#8217;s <code>@keyframe<\/code> block in CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes moveCircle {\n  from { \/* start value *\/ }\n  to { \/* end value *\/ }\n}<\/code><\/pre>\n\n\n\n<p>The <code>fill<\/code> attribute (which is rather unfortunately named the same as the <code>fill<\/code> attribute which defines the fill color of an element) is similar to the <code>animation-fill-mode<\/code> property, which specifies whether or not the element should return to its initial state after the animation is over. The values in SVG are similar to those in CSS, except use different names:<\/p>\n\n\n\n<ul><li><code>freeze<\/code>: The animation effect is defined to <em>freeze<\/em> the effect value at the last value of the active duration. The animation effect is &#8220;frozen&#8221; for the remainder of the document duration (or until the animation is restarted).<\/li><li><code>remove<\/code>: The animation effect is removed (no longer applied) when the active duration of the animation is over. After the active end of the animation, the animation no longer affects the target (unless the animation is restarted).<\/li><\/ul>\n\n\n\n<p>Try changing the values in the live demo to see how the animation is affected:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWYWyr\/e883265849147a0a4b712c5960c448a8\" src=\"\/\/codepen.io\/anon\/embed\/preview\/QWYWyr\/e883265849147a0a4b712c5960c448a8?height=450&amp;theme-id=1&amp;slug-hash=QWYWyr\/e883265849147a0a4b712c5960c448a8&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWYWyr\/e883265849147a0a4b712c5960c448a8\" title=\"CodePen Embed QWYWyr\/e883265849147a0a4b712c5960c448a8\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The <code>by<\/code> attribute is used to specify a relative offset for the animation. As the name suggests, you can use it to specify the amount <em>by which<\/em> you want the animation to progress. The effect of <code>by<\/code> is almost only visible when you&#8217;re progressing over the animation duration in discrete steps, similar to the way it works with the CSS <code>steps()<\/code> function. The SVG equivalent to the CSS <code>steps()<\/code> function is <code>calcMode=\"discrete\"<\/code>. We&#8217;ll get to the <code>calcMode<\/code> attribute later in the article.<\/p>\n\n\n\n<p>Another case where the effect of <code>by<\/code> is more obvious is when you only specify the <code>to<\/code> attribute. An example of that would be if you use it with the <code>set<\/code> element which we will also cover later in the article.<\/p>\n\n\n\n<p>And last but not least, <code>by<\/code> also comes in useful when you&#8217;re working with additive and accumulative animations. We will go over that later in the article.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"restarting-animations-with-restart\">Restarting Animations with <code>restart<\/code><\/h4>\n\n\n<p>It may be useful to prevent an animation from being restarted while it is active. To do that, SVG offers the <code>restart<\/code> attribute. You can set this attribute to one of three possible values:<\/p>\n\n\n\n<ul><li><code>always<\/code>: The animation can be restarted any time. This is the default value.<\/li><li><code>whenNotActive<\/code>: The animation can only be restarted when it is not active (i.e. after the active end). Attempts to restart the animation during its active duration are ignored.<\/li><li><code>never<\/code>: The element cannot be restarted for the remainder of the current simple duration of the parent time container. (In the case of SVG, since the parent time container is the SVG document fragment, then the animation cannot be restarted for the remainder of the document duration.)<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"naming-animations-and-synchronizing-them\">Naming animations and synchronizing them<\/h4>\n\n\n<p>Suppose we want to animate the position <em>and<\/em> the color of the circle, such that the change in color happens at the end of the moving animation. We can do that by setting the <code>begin<\/code> value of the color-changing animation to be equal to the <code>dur<\/code>ation of the moving animation; this is how we would normally do it in CSS.<\/p>\n\n\n\n<p>SMIL, however, has a nice event-handling feature. We mentioned before that the <code>begin<\/code> attribute accepts values like <code>click + 5s<\/code>. This value is called an &#8220;event value&#8221;, and is in this case made up of an event reference followed by a &#8220;clock value&#8221;. The interesting part here is the naming of the second part: the &#8220;clock value&#8221;. Why is it not simply a &#8220;time value&#8221;? Well the answer is that you can literally use a <a href=\"http:\/\/www.w3.org\/TR\/SVG2\/animate.html#ClockValueSyntax\" rel=\"noopener\">clock value<\/a> like &#8220;10min&#8221; or &#8220;01:33&#8221; which is equivalent to &#8220;1 minute and 33 seconds&#8221;, or even &#8220;02:30:03&#8221; (two hours, 30 minutes, and 3 seconds). At the time of this writing, clock values are <em>not fully implemented in any browser.<\/em><\/p>\n\n\n\n<p>So, if we were to go back to the previous demo and use <code>click + 01:30<\/code>, if a browser started supporting it, the animation would fire 1 minute and 30 seconds after the circle is clicked.<\/p>\n\n\n\n<p>Another kind of value it can accept is the ID of another animation followed by an event reference. If you have two (or more) animations (whether they are applied to the same element or not!) and you want to synchronize them so that one of them starts relative to the other, you can do that without having to know the duration of the other animation.<\/p>\n\n\n\n<p>For example, in the next demo, the blue rectangle starts moving 1 second after the circle animation starts. This is done by giving each animation an <code>ID<\/code>, and then using that ID with the <code>begin<\/code> event as shown in the following code:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;circle id=\"orange-circle\" r=\"30\" cx=\"50\" cy=\"50\" fill=\"orange\">\n  &lt;rect id=\"blue-rectangle\" width=\"50\" height=\"50\" x=\"25\" y=\"200\" fill=\"#0099cc\">&lt;\/rect>\n  &lt;animate \n    xlink:href=\"#orange-circle\" \n    attributename=\"cx\" \n    from=\"50\" \n    to=\"450\" \n    dur=\"5s\" \n    begin=\"click\" \n    fill=\"freeze\" \n    id=\"circ-anim\">\n  &lt;\/animate>\n  &lt;animate \n    xlink:href=\"#blue-rectangle\" \n    attributename=\"x\" \n    from=\"50\" \n    to=\"425\" \n    dur=\"5s\" \n    begin=\"circ-anim.begin + 1s\" \n    fill=\"freeze\" \n    id=\"rect-anim\">\n  &lt;\/animate>\n&lt;\/circle><\/code><\/pre>\n\n\n\n<p>The <code>begin=\"circ-anim.begin + 1s\"<\/code> is the part that tells the browser to start the rectangle&#8217;s animation 1 second after the beginning of the circle&#8217;s. You can check the live demo out:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_55195eee8647f438525b852000504c7a\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/55195eee8647f438525b852000504c7a\/?height=550&amp;theme-id=1&amp;slug-hash=55195eee8647f438525b852000504c7a\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 55195eee8647f438525b852000504c7a\/\" title=\"CodePen Embed 55195eee8647f438525b852000504c7a\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You can also start the rectangle animation after the circle animation ends using the <code>end<\/code> event:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"7\"><code markup=\"tt\">&lt;animate \n  xlink:href=\"#blue-rectangle\" \n  attributename=\"x\" \n  from=\"50\" \n  to=\"425\" \n  dur=\"5s\"\n  begin=\"circ-anim.end\" \n  fill=\"freeze\" \n  id=\"rect-anim\">\n&lt;\/animate><\/code><\/pre>\n\n\n\n<p>You could even start it <em>before<\/em> the end of the circle&#8217;s animation:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"7\"><code markup=\"tt\">&lt;animate\n  xlink:href=\"#blue-rectangle\"\n  attributename=\"x\" \n  from=\"50\" \n  to=\"425\" \n  dur=\"5s\" \n  begin=\"circ-anim.end - 3s\" \n  fill=\"freeze\" \n  id=\"rect-anim\">\n&lt;\/animate><\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"repeating-animations-with-repeatcount\">Repeating Animations with <code>repeatCount<\/code><\/h4>\n\n\n<p>If you want to run an animation more than once, you can do that using the <code>repeatCount<\/code> attribute. You can specify the number of times you want it to repeat, or use the <code>indefinite<\/code> keyword to have it repeat endlessly. So, if we were to repeat the circle&#8217;s animation for two times, the code would look like so:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"8\"><code markup=\"tt\">&lt;animate\n  xlink:href=\"#orange-circle\"\n  attributename=\"cx\" \n  from=\"50\" \n  to=\"450\" \n  dur=\"5s\" \n  begin=\"click\" \n  repeatcount=\"2\"\n  fill=\"freeze\" \n  id=\"circ-anim\">\n&lt;\/animate><\/code><\/pre>\n\n\n\n<p>You can check the live demo out here. In the demo, I&#8217;ve set the repeat count to be <code>2<\/code> on the circle, and <code>indefinite<\/code> on the square.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_d8e38406a5a90f4392a4bb85f6aadd78\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/d8e38406a5a90f4392a4bb85f6aadd78\/?height=550&amp;theme-id=1&amp;slug-hash=d8e38406a5a90f4392a4bb85f6aadd78\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed d8e38406a5a90f4392a4bb85f6aadd78\/\" title=\"CodePen Embed d8e38406a5a90f4392a4bb85f6aadd78\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Notice how the animation restarts from the initial <code>from<\/code> value instead of the value it reached at the end of the animation. Unfortunately, SMIL does not include a way to go back and forth between the start and end values like CSS animations allow us to do. In CSS, the <code>animation-direction<\/code> property specifies whether or not an animation should play in reverse on some or all cycles or iterations. <code>animation-direction: alternate<\/code> value means that the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction. This means that the first cycle will play from beginning to end, then the second cycle will play from the end back to the beginning, then the third cycle will play from the beginning to the end, and so on.<\/p>\n\n\n\n<p>In SMIL to do that you would have to use JavaScript to explicitly change the values of the <code>from<\/code> and <code>to<\/code> attributes. Jon McPartland of the Big Bite Creative <a href=\"http:\/\/bigbitecreative.com\/introduction-svg-animation\/\" rel=\"noopener\">wrote a post<\/a> a while back explaining how he did this for a menu icon animation that he worked on.<\/p>\n\n\n\n<p>Another workaround is to specify the end value as the middle value and then have the end value be the same as the initial value. For example, you can set the animation to start <code>from<\/code> a value, and end at the same value as well with <code>to<\/code>, except that you specify what you <em>would have<\/em> set to be a final value, as an intermediate value between <code>from<\/code> and <code>to<\/code>.<br>In CSS we would do that using something like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes example {\n  from, to {\n    left: 0;\n  }\n\n  50% {\n    left: 300px;\n  }\n}<\/code><\/pre>\n\n\n\n<p>The equivalent in SMIL is to use the <code>values<\/code> attribute, which we will explain shortly.<\/p>\n\n\n\n<p>That said, the above workaround may or may not work for you depending on the kind of animation you&#8217;re after, and whether or not you are chaining animations, repeating them, or doing additive animations.<\/p>\n\n\n\n<p>Here&#8217;s a nice, simple infinite animation using some delayed begin times by Miles Elam:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_kprKm\" src=\"\/\/codepen.io\/anon\/embed\/preview\/kprKm?height=450&amp;theme-id=1&amp;slug-hash=kprKm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed kprKm\" title=\"CodePen Embed kprKm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"restricting-repetition-time-with-repeatdur\">Restricting repetition time with <code>repeatDur<\/code><\/h4>\n\n\n<p>Setting an element to repeat indefinitely may get annoying or not user-friendly if the animation resumes for a long time. So, it may be a good idea to restrict the repetition time to a certain period of time, and stop the repetition after some time relative to the beginning of the document. This is known as <em>presentation time<\/em>.<\/p>\n\n\n\n<p>The presentation time indicates the <strong>position in the timeline relative to the document begin of a given document fragment<\/strong>. It is specified using the <code>repeatDur<\/code> attribute. Its syntax is similar to that of a clock value, but instead of being relative to another animation event or an interaction event, it&#8217;s relative to the beginning of the document.<\/p>\n\n\n\n<p>For example, the following snippet will stop the repetition of the animation 1 minute and 30 seconds after the document begin:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"9\"><code markup=\"tt\">&lt;animate \n  xlink:href=\"#orange-circle\" \n  attributename=\"cx\" \n  from=\"50\" \n  to=\"450\" \n  dur=\"2s\" \n  begin=\"0s\" \n  repeatcount=\"indefinite\" \n  repeatdur=\"01:30\" \n  fill=\"freeze\" \n  id=\"circ-anim\">\n&lt;\/animate><\/code><\/pre>\n\n\n\n<p>And here is the live demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNPMJj\/366b9fba478e7ac1de2188f5a2594c3c\" src=\"\/\/codepen.io\/anon\/embed\/preview\/rNPMJj\/366b9fba478e7ac1de2188f5a2594c3c?height=550&amp;theme-id=1&amp;slug-hash=rNPMJj\/366b9fba478e7ac1de2188f5a2594c3c&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNPMJj\/366b9fba478e7ac1de2188f5a2594c3c\" title=\"CodePen Embed rNPMJj\/366b9fba478e7ac1de2188f5a2594c3c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"synchronizing-animations-based-on-number-of-repetitions\">Synchronizing animations based on number of repetitions<\/h4>\n\n\n<p>Now let&#8217;s go back a step to the synchronizing between two animations topic. Indeed, in SMIL, you can synchronize animations so that one animation starts based on the number of repetitions of another. For example, you can start an animation after the nth-repetition of another, plus or minus an amount of time you may want to add.<br>The following example starts the rectangle&#8217;s animation at the second repetition of the circle&#8217;s animation:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"7\"><code markup=\"tt\">&lt;animate \n  xlink:href=\"#blue-rectangle\"\n  attributename=\"x\" \n  from=\"50\" \n  to=\"425\" \n  dur=\"5s\" \n  begin=\"circ-anim.repeat(2)\" \n  fill=\"freeze\" \n  id=\"rect-anim\">\n&lt;\/animate><\/code><\/pre>\n\n\n\n<p>The following is a live demo where the rectangle&#8217;s animation starts 2 seconds after the second repetition of the circle&#8217;s animation.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEwpaO\/d8e38406a5a90f4392a4bb85f6aadd78\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ZEwpaO\/d8e38406a5a90f4392a4bb85f6aadd78?height=550&amp;theme-id=1&amp;slug-hash=ZEwpaO\/d8e38406a5a90f4392a4bb85f6aadd78&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEwpaO\/d8e38406a5a90f4392a4bb85f6aadd78\" title=\"CodePen Embed ZEwpaO\/d8e38406a5a90f4392a4bb85f6aadd78\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And <a href=\"http:\/\/oreillymedia.github.io\/svg-essentials-examples\/ch12\/sync_repetition.html\" rel=\"noopener\">here is an example David Eisenberg put together for <em>SVG Essentials (2nd Edition)<\/em>.<\/a><\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"controlling-animation-keyframe-values-keytimes-and-values\">Controlling animation keyframe values: <code>keyTimes<\/code> and <code>values<\/code><\/h4>\n\n\n<p>In CSS, we can specify the values that we want our animated property to take in a certain frame during the animation. For example, if you&#8217;re animating the left offset of an element, instead of animating it from, say, 0 to 300 directly, you can animate it so that it takes certain values during certain frames like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes example {\n  0% {\n    left: 0;\n  }\n  50% {\n    left: 320px;\n  }\n  80% {\n    left: 270px;\n  }\n  100% {\n    left: 300px;\n  }\n}<\/code><\/pre>\n\n\n\n<p>The <code>0%<\/code>, <code>20%<\/code>, <code>80%<\/code>, and <code>100%<\/code> are the frames of the animation, and the values in each frame&#8217;s block are the values <em>for<\/em> each frame. The effect described above is one of an element bouncing off a wall, then back to the final position.<\/p>\n\n\n\n<p>In SMIL, you can control the values per frame in a similar way, but the syntax is quite different.<\/p>\n\n\n\n<p>To specify the keyframes, you use the <code>keyTimes<\/code> attribute. And then to specify the value of the animated property for each frame, you use the <code>values<\/code> attributes. The naming conventions in SMIL are quite convenient.<\/p>\n\n\n\n<p>If we were to go back to our moving circle, and use values similar to the ones in the CSS keyframes above, the code will look like the following:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"8,9\"><code markup=\"tt\">&lt;animate\n  xlink:href=\"#orange-circle\" \n  attributename=\"cx\" \n  from=\"50\" \n  to=\"450\" \n  dur=\"2s\" \n  begin=\"click\" \n  values=\"50; 490; 350; 450\" \n  keytimes=\"0; 0.5; 0.8; 1\" \n  fill=\"freeze\" \n  id=\"circ-anim\">\n&lt;\/animate><\/code><\/pre>\n\n\n\n<p>So what did we do there?<\/p>\n\n\n\n<p>The first thing to notice here is that the keyframe times and intermediate values are specified as lists. The <code>keyTimes<\/code> attribute is a semicolon-separated list of time values used to control the pacing of the animation. Each time in the list corresponds to a value in the <code>values<\/code> attribute list, and defines when the value is used in the animation function. Each time value in the <code>keyTimes<\/code> list is specified as a floating point value between 0 and 1 (inclusive), representing a proportional offset into the simple duration of the animation element. So the keytimes are similar to those in CSS, except that, instead of specifying them as percentages, you specify them as a fraction.<\/p>\n\n\n\n<p>The following is the live demo for the above code. Click on the circle to start the animation.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ab87fd834cdf0af7ec27850e81b1c08a\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ab87fd834cdf0af7ec27850e81b1c08a\/?height=550&amp;theme-id=1&amp;slug-hash=ab87fd834cdf0af7ec27850e81b1c08a\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ab87fd834cdf0af7ec27850e81b1c08a\/\" title=\"CodePen Embed ab87fd834cdf0af7ec27850e81b1c08a\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Note that if a list of values is used, the animation will apply the values in order over the course of the animation. If a list of <code>values<\/code> is specified, any <code>from<\/code>, <code>to<\/code> and <code>by<\/code> attribute values are ignored.<\/p>\n\n\n\n<p>At this point, it is also worth mentioning that you can use <code>values<\/code> attribute without the <code>keyTimes<\/code> attribute \u2014 the values are automatically spread out evenly through the time (for every <code>calcMode<\/code> value other than <code>paced<\/code> (see next section).<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"controlling-animation-pace-with-custom-easing-calcmode-and-keysplines\">Controlling animation pace with custom easing: <code>calcMode<\/code>, and <code>keySplines<\/code><\/h4>\n\n\n<p>I&#8217;m going to go for a CSS-SMIL comparison again because the SMIL syntax and concepts will be much simpler to understand if you&#8217;re already familiar with CSS animations.<\/p>\n\n\n\n<p>In CSS, you can choose to change the default uniform animation pace and specify a custom easing function that controls the animation, using the <code>animation-timing-function<\/code> property. The timing function can be one of a few predefined keywords, or a <a href=\"http:\/\/en.wikipedia.org\/wiki\/B%C3%A9zier_curve\" rel=\"noopener\">cubic bezier<\/a> function. The latter can be created using a tool such as <a href=\"http:\/\/cubic-bezier.com\/#.17,.67,.85,.06\" rel=\"noopener\">this<\/a> tool by Lea Verou.<\/p>\n\n\n\n<p>In SMIL, the animation pace is specified using the <code>calcMode<\/code> attribute. The default animation pace is <code>linear<\/code> for all animation elements except <code>animateMotion<\/code> (we&#8217;ll get to it later in the article). In addition to the <code>linear<\/code> value, you can set the value to: <code>discrete<\/code>, <code>paced<\/code>, or <code>spline<\/code>.<\/p>\n\n\n\n<ul><li><code>discrete<\/code> specifies that the animation function will jump from one value to the next without any interpolation. This is similar to the <code>steps()<\/code> function in CSS.<\/li><li><code>paced<\/code> is similar to <code>linear<\/code>, except that it will ignore any intermediate progress times defined by <code>keyTimes<\/code>. It calculates out the distance between subsequent values and divides up the time accordingly. If your values are all in a linear order, you won&#8217;t notice the difference. But if they go back and forth, or if they are colours (which are treated as three-dimensional vector values), you will definitely see the intermediary values. <a href=\"http:\/\/codepen.io\/AmeliaBR\/pen\/EzAju\/\" rel=\"noopener\">Here&#8217;s a demo courtesy of Amelia Bellamy-Royds<\/a> that shows the difference between the three <code>calcMode<\/code> values mentioned so far.<\/li><li>The fourth value accepted by <code>calcMode<\/code> is <code>spline<\/code>. It interpolates from one value in the <code>values<\/code> list to the next according to a time function defined by a cubic bezier spline. The points of the spline are defined in the <code>keyTimes<\/code> attribute, and the control points for each interval are defined in the <code>keySplines<\/code> attribute.<\/li><\/ul>\n\n\n\n<p>You&#8217;ve probably noticed the new attribute in the last sentence: the <code>keySplines<\/code> attribute. So, what does the <code>keySplines<\/code> attribute do?<\/p>\n\n\n\n<p>Again, to the CSS equivalents.<\/p>\n\n\n\n<p>In CSS, you can specify the animation pace <em>inside<\/em> every keyframe, instead of specifying one animation pace for the entire animation. This gives you better control over how each keyframe animation should proceed. An example using this feature is creating a bouncing ball effect. The keyframes for that may look like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@keyframes bounce {\n  0% {\n    top: 0;\n    animation-timing-function: ease-in;\n  }\n  15% {\n    top: 200px;\n    animation-timing-function: ease-out;\n  }\n  30% {\n    top: 70px;\n    animation-timing-function: ease-in;\n  }\n  45% {\n    top: 200px;\n    animation-timing-function: ease-out;\n  }\n  60% {\n    top: 120px;\n    animation-timing-function: ease-in;\n  }\n  75% {\n    top: 200px;\n    animation-timing-function: ease-out;\n  }\n  90% {\n    top: 170px;\n    animation-timing-function: ease-in;\n  }\n  100% {\n    top: 200px;\n    animation-timing-function: ease-out;\n  }\n}<\/code><\/pre>\n\n\n\n<p>Instead of keyword easing functions, we could have used the corresponding cubic-bezier functions:<\/p>\n\n\n\n<ul><li><code>ease-in<\/code> = <code>cubic-bezier(0.47, 0, 0.745, 0.715)<\/code><\/li><li><code>ease-out<\/code> = <code>cubic-bezier(0.39, 0.575, 0.565, 1)<\/code><\/li><\/ul>\n\n\n\n<p>Let&#8217;s start by specifying the key times and <strong>list of <code>values<\/code><\/strong> for our orange circle to undergo the same bouncing effect:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"8\"><code markup=\"tt\">&lt;animate \n  xlink:href=\"#orange-circle\" \n  attributename=\"cy\" \n  from=\"50\" \n  to=\"250\" \n  dur=\"3s\" \n  begin=\"click\" \n  values=\"50; 250; 120;250; 170; 250; 210; 250\" \n  keytimes=\"0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1\" \n  fill=\"freeze\" \n  id=\"circ-anim\">\n&lt;\/animate><\/code><\/pre>\n\n\n\n<p>The animation will be begin on click, and will freeze once it reaches the end value. Next, in order to specify the pace of each keyframe, we&#8217;re going to add the <code>keySplines<\/code> attribute.<\/p>\n\n\n\n<p>The <code>keySplines<\/code> attribute takes in set of bezier <strong>control points<\/strong> associated with the <code>keyTimes<\/code> list, defining a cubic bezier function that controls interval pacing. The attribute value is a semicolon-separated list of control point descriptions. Each control point description is a set of four values: x1 y1 x2 y2, describing the bezier control points for one time segment. The values must all be in the range 0 to 1, and the attribute is ignored unless the <code>calcMode<\/code> is set to <code>spline<\/code>.<\/p>\n\n\n\n<p>Instead of taking cubic-bezier functions as values, <code>keySplines<\/code> takes the coordinates of the two control points that are used to draw the curve. The control points can be seen in the following screenshot taken from Lea&#8217;s tool. The screenshot also shows the coordinates of each point, each colored with the same color as the point itself. For the <code>keySplines<\/code> attribute, it is these values that we are going to use to define the pace of the keyframe animations.<\/p>\n\n\n\n<p>SMIL allows these values to be separated either by commas with optional whitespace, or by whitespace alone. The <code>keyTimes<\/code> values that define the associated segment are the bezier &#8220;anchor points&#8221;, and the <code>keySplines<\/code> values are the control points. Thus, there must be <em>one fewer<\/em> set of control points than there are <code>keyTimes<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"post-186054 media-186054\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/10\/control-points.png\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>If we go back to the bouncing ball example, the control point coordinates for the <code>ease-in<\/code> and <code>ease-out<\/code> functions are shown in the following images:<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"post-186055 media-186055\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/10\/ease-in.png\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\" id=\"post-186056 media-186056\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/10\/ease-out.png\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>So, to translate that into the SVG animation element, we get the following code:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;animate \n  xlink:href=\"#orange-circle\" \n  attributename=\"cy\" \n  from=\"50\" \n  to=\"250\" \n  dur=\"3s\" \n  begin=\"click\" \n  values=\"50; 250; 120;250; 170; 250; 210; 250\" \n  keytimes=\"0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1\" \n  keysplines=\"\n    .42 0 1 1;\n    0 0 .59 1;\n    .42 0 1 1;\n    0 0 .59 1;\n    .42 0 1 1;\n    0 0 .59 1;\n    .42 0 1 1;\n    0 0 .59 1;\" \n  fill=\"freeze\" \n  id=\"circ-anim\">\n&lt;\/animate><\/code><\/pre>\n\n\n\n<p>Here&#8217;s the live demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ecd0f3197b5fc0d7950ed94cc8afb97f\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ecd0f3197b5fc0d7950ed94cc8afb97f\/?height=550&amp;theme-id=1&amp;slug-hash=ecd0f3197b5fc0d7950ed94cc8afb97f\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ecd0f3197b5fc0d7950ed94cc8afb97f\/\" title=\"CodePen Embed ecd0f3197b5fc0d7950ed94cc8afb97f\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you only want to specify an overall easing function for the entire animation without any intermediate values, you would still have to specify the keyframes using the <code>keyTimes<\/code> attribute, but you would only specify the start and ending keyframes, namely <code>0; 1<\/code>, and no intermediate <code>values<\/code>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"additive-amp-accumulative-animations-additive-and-accumulate\">Additive &amp; Accumulative Animations: <code>additive<\/code> and <code>accumulate<\/code><\/h4>\n\n\n<p>Sometimes, it&#8217;s useful to define an animation that starts from where the previous animation ended; or one that uses the accumulative sum of the previous animations as a value to proceed by. For that, SVG has two conveniently named attributes: <code>additive<\/code> and <code>accumulate<\/code>.<\/p>\n\n\n\n<p>Suppose you have an element whose width you want to &#8220;grow&#8221;, or a line whose length you want to increase, or an element that you want to move step by step from one position to the other, over separate steps. This feature is particularly useful for repeated animations.<\/p>\n\n\n\n<p>Just like any other animation, you&#8217;re going to specify <code>from<\/code> and <code>to<\/code> values. However, when you set <code>additive<\/code> to <code>sum<\/code>, each of their values is going to be <strong>relative to the original value of the animated attribute<\/strong>.<\/p>\n\n\n\n<p>So, back to our circle. For our circle, the initial position of <code>cx<\/code> is 50. When you set <code>from=\"0\"<\/code> <code>to=\"100\"<\/code>, the zero if actually the original 50, and the 100 is actually 50 + 100; in other words, it&#8217;s practically kind of like &#8220;<code>from=\"50\" to=\"150\"<\/code>&#8220;.<\/p>\n\n\n\n<p>By doing that, we get the following result:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_77b1afdefe05eff8f1d538e0f3f8727e\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/77b1afdefe05eff8f1d538e0f3f8727e\/?height=450&amp;theme-id=1&amp;slug-hash=77b1afdefe05eff8f1d538e0f3f8727e\/&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 77b1afdefe05eff8f1d538e0f3f8727e\/\" title=\"CodePen Embed 77b1afdefe05eff8f1d538e0f3f8727e\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is all the <code>additive<\/code> attribute does. It just specifies whether the <code>from<\/code> and <code>to<\/code> values should be relative to the current value or not. The attribute only takes one of two values: <code>sum<\/code> and <code>replace<\/code>. The latter is the default value, and it basically means that the <code>from<\/code> and <code>to<\/code> values are going to replace the current\/original values, which may end up causing a weird jump before the animation starts. (Try replacing <code>sum<\/code> with <code>replace<\/code> in the above example for a better comparison.)<\/p>\n\n\n\n<p>However, what if we want the values to be added such that the second repetition starts off from the ending value of the previous one? This is where the <code>accumulate<\/code> attribute comes in.<\/p>\n\n\n\n<p>The <code>accumulate<\/code> attribute controls whether or not the animation is cumulative. The default value is <code>none<\/code>, which means that, when the animation is repeated for example, it&#8217;s going to start back from the beginning. You can, however, set it to <code>sum<\/code>, which specifies that each repeat iteration after the first builds upon the last value of the previous iteration.<\/p>\n\n\n\n<p>So, if we were to go back to the previous animation and specify <code>accumulate=\"sum\"<\/code>, we&#8217;d get the following prefferable result:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_e21b7dd0af3d0a6db2828362bee24d48\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/e21b7dd0af3d0a6db2828362bee24d48\/?height=450&amp;theme-id=1&amp;slug-hash=e21b7dd0af3d0a6db2828362bee24d48\/&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed e21b7dd0af3d0a6db2828362bee24d48\/\" title=\"CodePen Embed e21b7dd0af3d0a6db2828362bee24d48\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Note that the <code>accumulate<\/code> attribute is ignored if the target attribute value does not support addition, or if the animation element does not repeat. It will also be ignored if the animation function is specified with only the <code>to<\/code> attribute.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"specifying-an-animations-end-time-with-end\">Specifying an animation&#8217;s end time with <code>end<\/code><\/h4>\n\n\n<p>In addition to specifying when an animation begins, you can also specify when it ends, using the <code>end<\/code> attribute. For example, you can set an animation to repeat indefinitely, and then have it stop when another element starts animating. The <code>end<\/code> attribute takes values similar to those that the <code>begin<\/code> value takes. You can specify absolute or relative time values\/offsets, repeat values, event values, etc.<\/p>\n\n\n\n<p>For example, in the following demo, the orange circle moves slowly over a period of 30 seconds to the other side of the canvas. The green circle will also animate, but only when it&#8217;s clicked. The orange circle&#8217;s animation will end when the green circle&#8217;s animation starts. Click on the green circle to see the orange one stop:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_1a67cdf89a865d044e2993a81a4f26be\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/1a67cdf89a865d044e2993a81a4f26be\/?height=550&amp;theme-id=1&amp;slug-hash=1a67cdf89a865d044e2993a81a4f26be\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 1a67cdf89a865d044e2993a81a4f26be\/\" title=\"CodePen Embed 1a67cdf89a865d044e2993a81a4f26be\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The same kind of animation synchronization can be achieved for two animations applied to the same element, of course. For example, suppose we set the color of the circle to animate indefinitely changing from one value to another. Then, when the element is clicked, it moves to the other side. We&#8217;ll set it now so that the color animation stops as soon as the element is clicked and the moving animation is fired.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_71fa25f8bd43d55ca04fa2259cb7d5f5\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/71fa25f8bd43d55ca04fa2259cb7d5f5\/?height=450&amp;theme-id=1&amp;slug-hash=71fa25f8bd43d55ca04fa2259cb7d5f5\/&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 71fa25f8bd43d55ca04fa2259cb7d5f5\/\" title=\"CodePen Embed 71fa25f8bd43d55ca04fa2259cb7d5f5\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"defining-animation-intervals-using-multiple-begin-and-end-values\">Defining animation intervals using multiple <code>begin<\/code> and <code>end<\/code> values<\/h4>\n\n\n<p>Indeed, both the <code>begin<\/code> and <code>end<\/code> attributes accept a <strong>list of semi-colon-separated values<\/strong>. Each value in the <code>begin<\/code> attribute will correspond to a value in the <code>end<\/code> attribute, thus forming active and inactive animation intervals.<\/p>\n\n\n\n<p>You can think of this as being similar to a moving car, where the car&#8217;s tires are active and then inactive for periods of time, depending on whether or not the car is moving. You can even create the animated car effect by applying to animations to the car: one that translates the car or moves it along a path that is also an additive and accumulative animation, and another animation that rotates the car&#8217;s tires in intervals that would be synchronized with the translation.<\/p>\n\n\n\n<p>An example specifying multiple beginning and ending times (i.e. intervals) is the following demo, where the rectangle is rotated based on the defined intervals, changing from active to inactive accordingly. (Rerun the demo if you miss the animation.)<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_cb46822d292b7a542eba729c897ed046\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/cb46822d292b7a542eba729c897ed046\/?height=450&amp;theme-id=1&amp;slug-hash=cb46822d292b7a542eba729c897ed046\/&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed cb46822d292b7a542eba729c897ed046\/\" title=\"CodePen Embed cb46822d292b7a542eba729c897ed046\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Note that in the above example I&#8217;ve used the element to rotate the rectangle about its center. We&#8217;ll talk about this element in more detail in an upcoming section below.<\/p>\n\n\n\n<p>Also note that, even if you set the <code>repeatCount<\/code> to <code>indefinite<\/code>, it will be overridden by the <code>end<\/code> values and will <em>not<\/em> repeat indefinitely.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"restricting-the-active-duration-of-an-element-using-min-and-max\">Restricting the active duration of an element using <code>min<\/code> and <code>max<\/code><\/h4>\n\n\n<p>Just like you can restrict the repetition time of an animation, you can even restrict the <strong>active duration<\/strong> of an animation. The <code>min<\/code> and <code>max<\/code> attributes specify the minimum and maximum value of the active duration, respectively. They provide us with a way to control the lower and upper bound of the element active duration. Both attributes take a clock value as a value.<\/p>\n\n\n\n<p>For <code>min<\/code>, that specifies the length of the minimum value of the active duration, measured in element active time. Value must be greater than or equal to 0, which is the default value and does not constrain the active duration at all.<\/p>\n\n\n\n<p>For <code>max<\/code>, the clock value specifies the length of the maximum value of the active duration, measured in element active time. Value must also be greater than 0. The default value for <code>max<\/code> is <code>indefinite<\/code>. This does not constrain the active duration at all.<\/p>\n\n\n\n<p>If both <code>min<\/code> and <code>max<\/code> attributes are specified then the <code>max<\/code> value must be greater than or equal to the <code>min<\/code> value. If this requirement is not fulfilled then both attributes are ignored.<\/p>\n\n\n\n<p>But what defines the <strong>active duration<\/strong> of an element? We mentioned the repeat duration before, in addition to the &#8220;simple duration&#8221;, which is the duration of the animation without any repetition (specified using <code>dur<\/code>), so how do all of these work together? Which overrides what? and then what about the <code>end<\/code> attribute which would override and simply end the animation?<\/p>\n\n\n\n<p>The way it happens is that the browser will <em>first<\/em> compute the active duration based on the <code>dur<\/code>, <code>repeatCount<\/code>, <code>repeatDur<\/code>, and <code>end<\/code> values. <em>Then<\/em>, it runs the computed duration against the specified <code>min<\/code> and <code>max<\/code> values. If the result is within the bounds, this first computed duration value is correct and will not be changed. Otherwise two situations may occur:<\/p>\n\n\n\n<ul><li>If the first computed duration is greater than the <code>max<\/code> value, the active duration of the element is defined to be equal to the <code>max<\/code> value.<\/li><li>If the first computed duration is less than the <code>min<\/code> value, the active duration of the element becomes equal to the <code>min<\/code> value and the behavior of the element is as follows:<ul><li>If the repeating duration (or the simple duration if the element doesn&#8217;t repeat) of the element is greater than <code>min<\/code> then the element is played normally for the (<code>min<\/code> constrained) active duration.<\/li><li>Otherwise the element is played normally for its repeating duration (or simple duration if the element does not repeat) and then is frozen or not shown depending on the value of the <code>fill<\/code> attribute.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>That leaves us with how the browser actually computes the active duration. For sake of brevity, I&#8217;m not going to get into the details here. But there is a very comprehensive table in the specification that shows the different combinations of the <code>dur<\/code>, <code>repeatCount<\/code>, <code>repeatDur<\/code>, and <code>end<\/code> attributes, and then shows what the active duration will be based on each combination. You can check the table out and read more about this <a href=\"http:\/\/www.w3.org\/TR\/2001\/REC-smil-animation-20010904\/#ComputingActiveDur\" rel=\"noopener\">in this section of the specification<\/a>.<\/p>\n\n\n\n<p>Lastly, if an element is defined to begin before its parent (e.g. with a simple negative offset value), the minimum duration is measured from the calculated begin time not the observed begin. This means that the <code>min<\/code> value may have no observed effect.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"example-morphing-paths\">Example: morphing paths<\/h4>\n\n\n<p>One of the attributes that can be animated in SMIL (but not in CSS) is the <code>d<\/code> attribute (short for <em>data<\/em>) of an SVG . The <code>d<\/code> attribute contains the data which defines the outline of the shape that you&#8217;re drawing. The path data consists of <strong>a set of commands and coordinates<\/strong> that tell the browser where and how to draw points, arcs, and lines that make up the final path.<\/p>\n\n\n\n<p>Animating this attribute allows us to <em>morph<\/em> SVG paths and create <a href=\"http:\/\/codepen.io\/noahblon\/blog\/an-intro-to-svg-animation-with-smil\" rel=\"noopener\">shape tweening<\/a> effects. But, in order to be able to morph shapes, the start, end, and any intermediate path shapes need to have the exact same number of vertices\/points, and they need to appear in the same order. If the number of vertices doesn&#8217;t match, the animation wouldn&#8217;t work. The reason for this is that the shape changing actually happens by moving the vertices, and interpolating their positions, so if one vertex is missing or does not match, the paths won&#8217;t be interpolated anymore.<\/p>\n\n\n\n<p>To animate an SVG path, you specify the <code>attributeName<\/code> to be <code>d<\/code>, and then set the <code>from<\/code> and <code>to<\/code> values that specify the start and end shapes, and you can use the <code>values<\/code> attribute to specify any intermediate values you want the shape to go through in between.<\/p>\n\n\n\n<p>For the sake of brevity, I won&#8217;t get into the details of how to do this here. Instead, you can read <a href=\"http:\/\/codepen.io\/noahblon\/blog\/an-intro-to-svg-animation-with-smil\" rel=\"noopener\">this excellent article by Noah Blon<\/a>, in which he explains how he created a shape-tweening kind-of-loading animation using . The live demo for Noah&#8217;s article is this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_IhLFK\" src=\"\/\/codepen.io\/anon\/embed\/preview\/IhLFK?height=450&amp;theme-id=1&amp;slug-hash=IhLFK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed IhLFK\" title=\"CodePen Embed IhLFK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And here&#8217;s another morphing example by Felix Hornoiu:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dovub\" src=\"\/\/codepen.io\/anon\/embed\/preview\/dovub?height=450&amp;theme-id=1&amp;slug-hash=dovub&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dovub\" title=\"CodePen Embed dovub\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>You can even morph the values of a path being used as a clipping mask! An example of that by Heather Buchel:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qLxAB\" src=\"\/\/codepen.io\/anon\/embed\/qLxAB?height=700&amp;theme-id=1&amp;slug-hash=qLxAB&amp;default-tab=result\" height=\"700\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qLxAB\" title=\"CodePen Embed qLxAB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"animating-along-arbitrary-paths-the-element\">Animating along arbitrary paths: The Element<\/h3>\n\n\n<p>The element is my favorite SMIL animation element. You can use it to move an element along a path. You specify the motion path using one of two ways which we&#8217;re going to cover next, and then to set the element up so that is moves along that path.<\/p>\n\n\n\n<p>The element accepts the same attributes mentioned earlier, plus three more: <code>keyPoints<\/code>, <code>rotate<\/code>, and <code>path<\/code>. Also, there is one difference regarding the <code>calcMode<\/code> attribute, where the default value is <code>paced<\/code> for , not <code>linear<\/code>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"specifying-the-motion-path-using-the-path-attribute\">Specifying the motion path using the <code>path<\/code> attribute<\/h4>\n\n\n<p>The <code>path<\/code> attribute is used to specify the motion path. It is expressed in the same format and interpreted the same way as the <code>d<\/code> attribute on the <code>path<\/code> element. The effect of a motion path animation is to add a supplemental transformation matrix onto the current transformation matrix for the referenced object which causes a translation along the x- and y-axes of the current user coordinate system by the computed X and Y values computed over time. In other words, the path specified is calculated relative to the element&#8217;s current position, by using the path data to transform the element onto the path position.<\/p>\n\n\n\n<p>For our circle, we&#8217;re going to animate it along a path that looks like the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\" id=\"post-186059 media-186059\"><img loading=\"lazy\" decoding=\"async\" width=\"785\" height=\"403\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/path.png?resize=785%2C403&#038;ssl=1\" alt=\"\" class=\"wp-image-372795\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/path.png?w=785&amp;ssl=1 785w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/path.png?resize=300%2C154&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/path.png?resize=768%2C394&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The code required for the circle to move along this path is:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;animatemotion xlink:href=\"#circle\" dur=\"1s\" begin=\"click\" fill=\"freeze\" path=\"M0,0c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3 c13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7\n c13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5\n c1.9-2.1,3.7-5.5,6.5-6.5\">&lt;\/animatemotion><\/code><\/pre>\n\n\n\n<p>There is one thing I want to focus on here: the coordinates in the path data. The path starts by moving (<strong><code>M<\/code><\/strong>) to the point with coordinates <code>(0, 0)<\/code>, before it starts to draw a curve (<strong><code>c<\/code><\/strong>) to another point. It is important to note that the <code>(0, 0)<\/code> point is actually the position of the circle, no matter where it is \u2014 <em>not<\/em> the top-left corner of the coordinate system. As we mentioned above, the coordinates in the <code>path<\/code> attribute are relative to the current position of the element!<\/p>\n\n\n\n<p>The result of the above code is:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_184082960ac3cc65d00b22f2551a330a\/\" src=\"\/\/codepen.io\/anon\/embed\/184082960ac3cc65d00b22f2551a330a\/?height=550&amp;theme-id=1&amp;slug-hash=184082960ac3cc65d00b22f2551a330a\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 184082960ac3cc65d00b22f2551a330a\/\" title=\"CodePen Embed 184082960ac3cc65d00b22f2551a330a\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you were to specify the path starting from a point other than <code>(0, 0)<\/code>, the circle would abruptly jump by the amount specified in the beginning point. For example, suppose you draw a path in Illustrator and then export that path data to use as a motion path (that&#8217;s what I did the first time I did this); the exported path may look something like this:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;path fill=\"none\" stroke=\"#000000\" stroke-miterlimit=\"10\" d=\"M100.4,102.2c3.2-3.4,18.4-0.6,23.4-0.6c5.7,0.1,10.8,0.9,16.3,2.3\nc13.5,3.5,26.1,9.6,38.5,16.2c12.3,6.5,21.3,16.8,31.9,25.4c10.8,8.7,21,18.3,31.7,26.9c9.3,7.4,20.9,11.5,31.4,16.7\nc13.7,6.8,26.8,9.7,41.8,9c21.4-1,40.8-3.7,61.3-10.4c10.9-3.5,18.9-11.3,28.5-17.8c5.4-3.7,10.4-6.7,14.8-11.5\n c1.9-2.1,3.7-5.5,6.5-6.5\">&lt;\/path><\/code><\/pre>\n\n\n\n<p>The starting point of the path in this case is <code>(100.4, 102.2)<\/code>. If we were to use this data as the motion path, the circle will jump by ~100 units to the right and ~102 units downwards, and <em>then<\/em> start the motion along the path relative to the new position. So, make sure to keep this in mind when you prepare the motion path for your animation.<\/p>\n\n\n\n<p>If used, attributes <code>from<\/code>, <code>by<\/code>, <code>to<\/code> and <code>values<\/code> specify a shape on the current canvas which represents the motion path.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"specifying-the-motion-path-using-the-element\">Specifying the motion path using the element<\/h4>\n\n\n<p>There is also another way you can specify a motion path. Instead of using the relative <code>path<\/code> attribute, you can reference an external path using the element. The , a child of the element, would then reference the external path using the <code>xlink:href<\/code> attribute.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;animatemotion xlink:href=\"#circle\" dur=\"1s\" begin=\"click\" fill=\"freeze\">\n &lt;mpath xlink:href=\"#motionPath\">&lt;\/mpath>\n&lt;\/animatemotion><\/code><\/pre>\n\n\n\n<p>The motion path can be defined anywhere in the document; it can even be literally just <em>defined<\/em> inside a element and not rendered on the canvas at all. In the next example, the path is rendered because, in most cases, you may want to show the path that the element is moving along.<\/p>\n\n\n\n<p>Note that, according to the specification:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The various (x, y) points of the shape provide a supplemental transformation matrix onto the CTM for the referenced object which causes a translation along the x- and y-axes of the current user coordinate system by the (x,y) values of the shape computed over time. Thus, the referenced object is translated over time by the offset of the motion path relative to the origin of the current user coordinate system. The supplemental transformation is applied on top of any transformations due to the target element&#8217;s <code>transform<\/code> property or any animations on that attribute due to <code>animateTransform<\/code> elements on the target element.<\/p><\/blockquote>\n\n\n\n<p>Again, the position of the circle is &#8220;multiplied&#8221; or &#8220;transformed&#8221; by the coordinates in the path data.<\/p>\n\n\n\n<p>In the next example, we have a path in the middle of the canvas. The circle is positioned at the beginning of the path. Yet, when the motion path is applied, the circle does <em>not<\/em> start its motion from its current position. See the demo for a better explanation. Click on the circle to animate it.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_0642931398bf1cf3ed1ff9b3e6b52398\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/0642931398bf1cf3ed1ff9b3e6b52398\/?height=550&amp;theme-id=1&amp;slug-hash=0642931398bf1cf3ed1ff9b3e6b52398\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 0642931398bf1cf3ed1ff9b3e6b52398\/\" title=\"CodePen Embed 0642931398bf1cf3ed1ff9b3e6b52398\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>See how the circle does follow the same shape of the path, but over a different position? This is due to the fact that the circle&#8217;s position is transformed by the values of the path data.<\/p>\n\n\n\n<p>One way around this is to start with the circle being positioned at <code>(0, 0)<\/code>, so that when the path data is used to transform it, it will start and proceed as expected.<\/p>\n\n\n\n<p>Another way is to apply a <a href=\"http:\/\/sarasoueidan.com\/blog\/svg-transformations\/\" rel=\"noopener\">transformation<\/a> that &#8220;resets&#8221; the coordinates of the circle so that they compute to zero before the path is applied.<\/p>\n\n\n\n<p>The following is a modified version of the above demo, using a closed path and repeating the motion animation indefinitely.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ef9f0e1242263cf23067b09be894cfa9\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ef9f0e1242263cf23067b09be894cfa9\/?height=550&amp;theme-id=1&amp;slug-hash=ef9f0e1242263cf23067b09be894cfa9\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ef9f0e1242263cf23067b09be894cfa9\/\" title=\"CodePen Embed ef9f0e1242263cf23067b09be894cfa9\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"override-rules-for-ltanimatemotiongtltanimatemotiongt\">Override Rules for <code>&lt;animatemotion&gt;&lt;\/animatemotion&gt;<\/code><\/h4>\n\n\n<p>Since there are more than one way to do the same thing for <code>animateMotion<\/code>, it only makes sense to have override rules to specify which values override others.<\/p>\n\n\n\n<p>The override rules for <code>animateMotion<\/code> are as follows:<\/p>\n\n\n\n<ul><li>Regarding the definition of the motion path, the <code>mpath<\/code> element overrides the the <code>path<\/code> attribute, which overrides <code>values<\/code>, which overrides <code>from<\/code>, <code>by<\/code> and <code>to<\/code>.<\/li><li>Regarding determining the points which correspond to the <code>keyTimes<\/code> attributes, the <code>keyPoints<\/code> attribute overrides <code>path<\/code>, which overrides <code>values<\/code>, which overrides <code>from<\/code>, <code>by<\/code> and <code>to<\/code>.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"setting-an-elements-orientation-along-a-motion-path-with-rotate\">Setting an element&#8217;s orientation along a motion path with <code>rotate<\/code><\/h4>\n\n\n<p>In our previous example, the element we were animating along the path happened to be a circle. But what if we&#8217;re animating an element that has a certain orientation like, say for example, a car icon? The car icon in the following example is <a href=\"http:\/\/www.freepik.com\/free-vector\/transport-icons-collection_753635.htm\" rel=\"noopener\">designed by Freepik<\/a>.<\/p>\n\n\n\n<p>In this example, I&#8217;ve replaced the circle with a group with an ID of &#8220;car&#8221;, which contains the element making up the group. Then, in order to avoid the problem with the motion along the path mentioned above, I&#8217;ve applied a transformation to the car to that translates it by a specific amount, so that the initial position ends up at (0, 0). The values inside the transformations are actually the coordinates of the point where the first path of the car starts drawing (right after the move command <strong>M<\/strong>).<\/p>\n\n\n\n<p>The car then starts moving along the motion path. But&#8230; this is how the motion looks like:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_3a300b8c4c0f9db4ff345f5d44992b74\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/3a300b8c4c0f9db4ff345f5d44992b74\/?height=550&amp;theme-id=1&amp;slug-hash=3a300b8c4c0f9db4ff345f5d44992b74\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 3a300b8c4c0f9db4ff345f5d44992b74\/\" title=\"CodePen Embed 3a300b8c4c0f9db4ff345f5d44992b74\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The car&#8217;s orientation is fixed, and does not change to match that of the motion path. In order to change that, we&#8217;re going to use the <code>rotate<\/code> attribute.<\/p>\n\n\n\n<p>The <code>rotate<\/code> attribute takes one of three values:<\/p>\n\n\n\n<ul><li><code>auto<\/code>: Indicates that the object is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path.<\/li><li><code>auto-reverse<\/code>: Indicates that the object is rotated over time by the angle of the direction (i.e., directional tangent vector) of the motion path plus 180 degrees.<\/li><li>a number: Indicates that the target element has a constant rotation transformation applied to it, where the rotation angle is the specified number of degrees.<\/li><\/ul>\n\n\n\n<p>To fix the orientation of the car in the above example, we&#8217;ll start with setting the rotation value to <code>auto<\/code>. We&#8217;ll end up with the following result:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_74af0bd0bbc7ca46d4d568ca0d473b40\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/74af0bd0bbc7ca46d4d568ca0d473b40\/?height=550&amp;theme-id=1&amp;slug-hash=74af0bd0bbc7ca46d4d568ca0d473b40\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 74af0bd0bbc7ca46d4d568ca0d473b40\/\" title=\"CodePen Embed 74af0bd0bbc7ca46d4d568ca0d473b40\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you want the car to move outside the path, the <code>auto-reverse<\/code> value fixes that.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_1027d099f0e9cca94f8f8865d169c49f\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/1027d099f0e9cca94f8f8865d169c49f\/?height=550&amp;theme-id=1&amp;slug-hash=1027d099f0e9cca94f8f8865d169c49f\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 1027d099f0e9cca94f8f8865d169c49f\/\" title=\"CodePen Embed 1027d099f0e9cca94f8f8865d169c49f\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This looks better, but we still have one problem: the car looks like it&#8217;s moving backwards along the path! In order to change that, we&#8217;d need to flip the car along its y-axis. This can be done by scaling it by a factor of &#8220;-1&#8221; along that axis. So, if we apply the transformation to the <code>g<\/code> with the <code>car<\/code> ID, the car will move forward as expected. The scaling transformation is just going to be chained with the previous translation we applied earlier.<\/p>\n\n\n\n<p>And the final demo looks like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_48caf2f5fa42a8c154fcb5dec0dbe4d5\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/48caf2f5fa42a8c154fcb5dec0dbe4d5\/?height=550&amp;theme-id=1&amp;slug-hash=48caf2f5fa42a8c154fcb5dec0dbe4d5\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 48caf2f5fa42a8c154fcb5dec0dbe4d5\/\" title=\"CodePen Embed 48caf2f5fa42a8c154fcb5dec0dbe4d5\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"controlling-the-animation-distance-along-the-motion-path-with-keypoints\">Controlling the animation distance along the motion path with <code>keyPoints<\/code><\/h4>\n\n\n<p>The <code>keyPoints<\/code> attribute provides the ability to specify the progress along the motion path for each of the <code>keyTimes<\/code> specified values. If specified, <code>keyPoints<\/code> causes <code>keyTimes<\/code> to apply to the values in <code>keyPoints<\/code> rather than the points specified in the <code>values<\/code> attribute array or the points on the <code>path<\/code> attribute.<\/p>\n\n\n\n<p><code>keyPoints<\/code> takes a semicolon-separated list of floating point values between 0 and 1 and indicates how far along the motion path the object shall move at the moment in time specified by corresponding <code>keyTimes<\/code> value. Distance calculations are determined by the browser&#8217;s algorithms. Each progress value in the list corresponds to a value in the <code>keyTimes<\/code> attribute list. If a list of <code>keyPoints<\/code> is specified, there must be exactly as many values in the <code>keyPoints<\/code> list as in the <code>keyTimes<\/code> list.<\/p>\n\n\n\n<p>One important thing to note here is to set the <code>calcMode<\/code> value to <code>linear<\/code> for <code>keyPoints<\/code> to work. It also looks like it <em>should<\/em> logically work with paced animation, if your key points move back and forth, but it doesn&#8217;t.<\/p>\n\n\n\n<p>The following is an example by Amelia Bellamy-Royds (whose <a href=\"http:\/\/codepen.io\/AmeliaBR\/\" rel=\"noopener\">CodePen profile<\/a> you should totally check out) that uses <code>keyPoints<\/code> to mimic the behavior is starting a motion along a path from a pre-defined offset, because we currently don&#8217;t have that ability by default in SMIL.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ewvrC\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ewvrC?height=750&amp;theme-id=1&amp;slug-hash=ewvrC&amp;default-tab=result\" height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ewvrC\" title=\"CodePen Embed ewvrC\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"moving-text-along-an-arbitrary-path\">Moving text along an arbitrary path<\/h3>\n\n\n<p>Moving text along an arbitrary path is different from moving other SVG elements along paths. To animate text, you&#8217;re going to have to use the element, not the element.<\/p>\n\n\n\n<p>First, let&#8217;s start by positioning the text along a path. This can be done by nesting a element inside the element. The text that is going to be positioned along a path will be defined inside the element, not as a child of the element.<\/p>\n\n\n\n<p>The <code>textPath<\/code> is then going to reference the actual path that we want to use, just like we did in the previous examples. The referenced path can also be either rendered on the canvas, or defined inside a . Check the code in the following demo out.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ebfc92e45e24b29c266f50e6f617cdf5\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/ebfc92e45e24b29c266f50e6f617cdf5\/?height=550&amp;theme-id=1&amp;slug-hash=ebfc92e45e24b29c266f50e6f617cdf5\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ebfc92e45e24b29c266f50e6f617cdf5\/\" title=\"CodePen Embed ebfc92e45e24b29c266f50e6f617cdf5\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>To animate the text along that path, we&#8217;re going to use the element to animate the <code>startOffset<\/code> attribute.<\/p>\n\n\n\n<p>The <code>startOffset<\/code> represents the offset of the text on the path. 0% is the beginning of the path; 100% represents the end of it. So if, for example, the offset is set to 50%, the text will start halfway through the path. I think you can see where we&#8217;re going from here.<\/p>\n\n\n\n<p>By animating the <code>startOffset<\/code>, we&#8217;re going to create the effect of text moving along the path. Check the code in the following demo out.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_501308e154923359ed1cdbfa29eadcc0\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/501308e154923359ed1cdbfa29eadcc0\/?height=550&amp;theme-id=1&amp;slug-hash=501308e154923359ed1cdbfa29eadcc0\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 501308e154923359ed1cdbfa29eadcc0\/\" title=\"CodePen Embed 501308e154923359ed1cdbfa29eadcc0\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"animating-transformations-the-ltanimatetransformgtltanimatetransformgt-element\">Animating transformations: The <code>&lt;animatetransform&gt;&lt;\/animatetransform&gt;<\/code> Element<\/h3>\n\n\n<p>The element animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and\/or skewing. It takes the same attributes mentioned for the element, plus an additional attribute: <code>type<\/code>.<\/p>\n\n\n\n<p>The <code>type<\/code> attribute is used to specify the type of the transformation that&#8217;s being animated. It takes one of five values: <code>translate<\/code>, <code>scale<\/code>, <code>rotate<\/code>, <code>skewX<\/code>, and <code>skewY<\/code>.<\/p>\n\n\n\n<p>The <code>from<\/code>, <code>by<\/code> and <code>to<\/code> attributes take a value expressed using the same syntax that is available for the given transformation type:<\/p>\n\n\n\n<ul><li>For a <code>type=\"translate\"<\/code>, each individual value is expressed as <code>&lt;tx&gt; [,&lt;ty&gt;]&lt;\/ty&gt;&lt;\/tx&gt;<\/code>.<\/li><li>For a <code>type=\"scale\"<\/code>, each individual value is expressed as <code>&lt;sx&gt; [,&lt;sy&gt;]&lt;\/sy&gt;&lt;\/sx&gt;<\/code>.<\/li><li>For a <code>type=\"rotate\"<\/code>, each individual value is expressed as <code>&lt;rotate-angle&gt; [&lt;cx&gt; &lt;cy&gt;]&lt;\/cy&gt;&lt;\/cx&gt;&lt;\/rotate-angle&gt;<\/code>.<\/li><li>For a <code>type=\"skewX\"<\/code> and <code>type=\"skewY\"<\/code>, each individual value is expressed as <code>&lt;skew-angle&gt;&lt;\/skew-angle&gt;<\/code>.<\/li><\/ul>\n\n\n\n<p>If you&#8217;re unfamiliar with the syntax for the SVG <code>transform<\/code> attribute functions, and for the sake of brevity of this article, and because the syntax details and how it works is outside the scope of this article, I recommend you read the article I&#8217;ve written about this a while back before you move on with this guide: <a href=\"http:\/\/sarasoueidan.com\/blog\/svg-transformations\/\" rel=\"noopener\">&#8220;Understanding SVG Coordinate Systems and Transformations (Part 2): The <code>transform<\/code> Attribute&#8221;<\/a>.<\/p>\n\n\n\n<p>Back to a previous demo, where we rotated the pink rectangle using the <code>&lt;animatetransform&gt;&lt;\/animatetransform&gt;<\/code> element. The code for the rotation looks like the following:<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;rect id=\"deepPink-rectangle\" width=\"50\" height=\"50\" x=\"50\" y=\"50\" fill=\"deepPink\">\n  &lt;animatetransform \n    xlink:href=\"#deepPink-rectangle\" \n    attributename=\"transform\" \n    attributetype=\"XML\" \n    type=\"rotate\" \n    from=\"0 75 75\" \n    to=\"360 75 75\" \n    dur=\"2s\" \n    begin=\"0s\" \n    repeatcount=\"indefinite\" \n    fill=\"freeze\"\n  >\n&lt;\/rect><\/code><\/pre>\n\n\n\n<p>The <code>from<\/code> and <code>to<\/code> attributes specify the angle of rotation (start and end) and the center of rotation. In both, the center of rotation remains the same, of course. If you don&#8217;t specify the center, it will be the top left corner of the SVG canvas. The live demo for the above code is the following:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_1bb859d4103d5e32b037f69e906319fb\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/1bb859d4103d5e32b037f69e906319fb\/?height=450&amp;theme-id=1&amp;slug-hash=1bb859d4103d5e32b037f69e906319fb\/&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 1bb859d4103d5e32b037f69e906319fb\/\" title=\"CodePen Embed 1bb859d4103d5e32b037f69e906319fb\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here&#8217;s another fun example with a single <code>animateTransform<\/code> by Gabriel:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_obhzc\" src=\"\/\/codepen.io\/anon\/embed\/preview\/obhzc?height=450&amp;theme-id=1&amp;slug-hash=obhzc&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed obhzc\" title=\"CodePen Embed obhzc\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Animating a single transformation is simple, however, things can get really messy and complicated when multiple transformations are included, especially because one <code>animateTransform<\/code> can override another, so instead of adding and chaining effects, you may end up with the complete opposite. That, in addition to the way SVG coordinate systems and transformations actually work (refer to the article mentioned earlier on the topic). The examples are vast, and outside the scope of this article. For transforming SVGs, I recommend using CSS transforms. Implementations are working on making the latter work perfectly with SVG, so you may never have to use SMIL for animating transformations in SVG at all.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"the-ltsetgtltsetgt-element\">The <code>&lt;set&gt;&lt;\/set&gt;<\/code> element<\/h3>\n\n\n<p>The <code>set<\/code> element provides a simple means of setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. The <code>set<\/code> element is non-additive. The additive and accumulate attributes are not allowed, and will be ignored if specified.<\/p>\n\n\n\n<p>Since is used to set an element <em>to<\/em> a specific value at and during a specific time, it does not accept all of the attributes mentioned for the previous animation elements. For example, it does not have a <code>from<\/code> or <code>by<\/code> attribute, because the value that changes does not change progressively over the period of time.<\/p>\n\n\n\n<p>For <code>set<\/code>, you can specify the element you&#8217;re targeting, the attribute name and type, the <code>to<\/code> value, and the animation timing can be controlled with: <code>begin<\/code>, <code>dur<\/code>, <code>end<\/code>, <code>min<\/code>, <code>max<\/code>, <code>restart<\/code>, <code>repeatCount<\/code>, <code>repeatDur<\/code>, and <code>fill<\/code>.<\/p>\n\n\n\n<p>The following is an example that sets the color of the rotating rectangle to blue when it is clicked. The color remains blue for a duration of 3 seconds, and then turns back to the original color. Every time the rectangle is clicked, the <code>set<\/code> animation is fired, and the color is changed for three seconds.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_af159baaf57bc38eb40288db722e1245\/\" src=\"\/\/codepen.io\/anon\/embed\/preview\/af159baaf57bc38eb40288db722e1245\/?height=550&amp;theme-id=1&amp;slug-hash=af159baaf57bc38eb40288db722e1245\/&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed af159baaf57bc38eb40288db722e1245\/\" title=\"CodePen Embed af159baaf57bc38eb40288db722e1245\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"elements-attributes-and-properties-that-can-be-animated\">Elements, attributes and properties that can be animated<\/h3>\n\n\n<p>Not all SVG attributes can be animated, and not all of those that can be animated, can be animated using all the animation elements. For a complete list of all animatable attributes, and a table showing which of these can be animated by which elements, please refer to <a href=\"http:\/\/www.w3.org\/TR\/SVG2\/animate.html#AnimationAttributesAndProperties\" rel=\"noopener\">this section of the SVG Animation specification<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"final-words\">Final words<\/h3>\n\n\n<p>SMIL has a lot of potential, and I barely scratched the surface and only touched on the basics and technicalities of how they work in SVG. A lot of very impressive effects can be created, especially ones involving morphing and transforming shapes. The sky&#8217;s the limit. Go crazy! and don&#8217;t forget to share what you make with the community; we&#8217;d love to see what you&#8217;ve been up to. Thank you for reading!<\/p>\n\n\n\n<p class=\"is-style-explanation\">This article has been updated based on <a href=\"https:\/\/css-tricks.com\/guide-svg-animations-smil\/#comment-1585895\">this discussion<\/a> in the comments below. Thanks for your input, Amelia. =)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s features. The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them [&hellip;]<\/p>\n","protected":false},"author":248148,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[612,1252,537,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":186857,"url":"https:\/\/css-tricks.com\/svg-shape-morphing-works\/","url_meta":{"origin":186041,"position":0},"title":"How SVG Shape Morphing Works","date":"October 24, 2014","format":false,"excerpt":"While animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren't possible to change or animate in CSS. You can animate them through SMIL though. Sara\u2026","rel":"","context":"In &quot;Article&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":186041,"position":1},"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":350223,"url":"https:\/\/css-tricks.com\/how-i-made-a-generator-for-svg-loaders-with-sass-and-smil-options\/","url_meta":{"origin":186041,"position":2},"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":235642,"url":"https:\/\/css-tricks.com\/smil-is-dead-long-live-smil-a-guide-to-alternatives-to-smil-features\/","url_meta":{"origin":186041,"position":3},"title":"SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features","date":"December 14, 2015","format":false,"excerpt":"SMIL, SVG\u2019s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft\u2019s IE or Edge browsers. Have no fear! We\u2019ve got you\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":252950,"url":"https:\/\/css-tricks.com\/many-tools-shape-morphing\/","url_meta":{"origin":186041,"position":4},"title":"The Many Tools for Shape Morphing","date":"April 24, 2017","format":false,"excerpt":"To no one's surprise, I'm sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":175074,"url":"https:\/\/css-tricks.com\/mega-list-svg-information\/","url_meta":{"origin":186041,"position":5},"title":"A Compendium of SVG Information","date":"July 22, 2014","format":false,"excerpt":"A huge pile of information about SVG. How to Use SVG These are overview articles covering lots of stuff relating to SVG. Why to use it and the basics of how to use it. Mostly: , background-image, , , and \/. Using SVG by me SVG on the Web \u2014\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/186041"}],"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\/248148"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=186041"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/186041\/revisions"}],"predecessor-version":[{"id":372830,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/186041\/revisions\/372830"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=186041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=186041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=186041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}