{"id":4966,"date":"2020-06-05T09:32:00","date_gmt":"2020-06-05T09:32:00","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=4966"},"modified":"2020-08-19T09:54:55","modified_gmt":"2020-08-19T09:54:55","slug":"tutorial-animating-svg-gradients","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/tutorial-animating-svg-gradients\/","title":{"rendered":"Tutorial: Animating SVG Gradients"},"content":{"rendered":"\n

SVG gradients<\/strong> are so handy. We can fill complex shapes and create depth and character for our artwork all while having access to it in the\u00a0DOM.<\/p>\n\n\n\n

Within SVG linear and radial gradient elements there are several attribute options available for thorough customization. Animating these gradients takes this customization even further and presents a unique opportunity that can be used to further communicate something to our users.<\/p>\n\n\n\n

This article will cover the\u00a0basics of SVG gradients<\/strong>\u00a0and getting started with\u00a0<animate><\/code>, and then dive into some demos <\/strong>for further\u00a0understanding.<\/p>\n\n\n\n

Browser Support<\/h3>\n\n\n\n

Basic SVG support is present across desktop and mobile browsers, going at least two versions back across the board for desktop.<\/p>\n\n\n\n

Concerning SVG SMIL animation (animating within the SVG element itself) specifically there is no<\/strong> support in IE, IE mobile, or Opera Mini, but strong support in current and at least one version back in Chrome, Firefox, Safari, Opera, and on mobile.<\/p>\n\n\n\n

SVG Gradients<\/h2>\n\n\n\n

Before we get started with animation, it\u2019s important to have a basic understanding of how SVG gradients\u00a0work.<\/p>\n\n\n\n

Gradients are one of many paint server options we have available to use when we wish to add color to the fills and strokes of SVG. The idea here is that we can define gradients within our SVG but they have no visual output until we call on them with the use of the \u201cfill\u201d and\/or \u201cstroke\u201d attributes.<\/p>\n\n\n\n

The basic structure of a very simple linear SVG gradient looks something like this:<\/p>\n\n\n\n

<svg version=<\/code>\"1.1\"<\/code> xmlns=<\/code>\"http:\/\/www.w3.org\/2000\/svg\"<\/code> xmlns:xlink=<\/code>\"http:\/\/www.w3.org\/1999\/xlink\"<\/code> x=<\/code>\"0px\"<\/code> y=<\/code>\"0px\"<\/code>width=<\/code>\"180px\"<\/code> height=<\/code>\"337px\"<\/code> viewBox=<\/code>\"0 0 180.36 336.86\"<\/code> enable-background=<\/code>\"new 0 0 180.36 336.86\"<\/code> xml:space=<\/code>\"preserve\"<\/code>><\/code><path fill=<\/code>\"#7A5034\"<\/code> stroke=<\/code>\"7A5034\"<\/code> stroke-width=<\/code>\"2.5448\"<\/code> stroke-linecap=<\/code>\"round\"<\/code> stroke-linejoin=<\/code>\"round\"<\/code> stroke-miterlimit=<\/code>\"10\"<\/code> d=\"<\/code>M<\/code>159.337<\/code>,<\/code>292.35<\/code>c<\/code>0.863<\/code>,<\/code>0.605<\/code>,<\/code>1.073<\/code>,<\/code>1.795<\/code>,<\/code>0.469<\/code>,<\/code>2.658<\/code>l<\/code>-20.974<\/code>,<\/code>29.954<\/code>c<\/code>-0.605<\/code>,<\/code>0.863<\/code>-1.795<\/code>,<\/code>1.073<\/code>-2.658<\/code>,<\/code>0.469<\/code>l<\/code>-115.15<\/code>-80.629<\/code>c<\/code>-0.863<\/code>-0.605<\/code>-1.073<\/code>-1.795<\/code>-0.469<\/code>-2.658<\/code>l<\/code>20.974<\/code>-29.954<\/code>c<\/code>0.605<\/code>-0.863<\/code>,<\/code>1.795<\/code>-1.073<\/code>,<\/code>2.658<\/code>-0.469<\/code>L<\/code>159.337<\/code>,<\/code>292.35<\/code>z M<\/code>100.669<\/code>,<\/code>289.765<\/code>L<\/code>25.16<\/code>,<\/code>236.893<\/code> M<\/code>149.278<\/code>,<\/code>309.079<\/code>l<\/code>-77.039<\/code>-53.943<\/code> M<\/code>73.154<\/code>,<\/code>244.329<\/code>L<\/code>38.237<\/code>,<\/code>219.88<\/code> M<\/code>154.817<\/code>,<\/code>300.734<\/code>l<\/code>-25.015<\/code>-17.516<\/code>\"\/><\/code><path fill=<\/code>\"#7A5034\"<\/code> stroke=<\/code>\"#7A5034\"<\/code> stroke-width=<\/code>\"2.5448\"<\/code> stroke-linecap=<\/code>\"round\"<\/code> stroke-linejoin=<\/code>\"round\"<\/code> stroke-miterlimit=<\/code>\"10\"<\/code> d=\"<\/code>M<\/code>44.187<\/code>,<\/code>325.431<\/code>c<\/code>-0.863<\/code>,<\/code>0.605<\/code>-2.054<\/code>,<\/code>0.395<\/code>-2.658<\/code>-0.469<\/code>l<\/code>-20.974<\/code>-29.954<\/code>c<\/code>-0.605<\/code>-0.863<\/code>-0.395<\/code>-2.054<\/code>,<\/code>0.469<\/code>-2.658<\/code>l<\/code>115.15<\/code>-80.629<\/code>c<\/code>0.863<\/code>-0.605<\/code>,<\/code>2.054<\/code>-0.395<\/code>,<\/code>2.658<\/code>,<\/code>0.469<\/code>l<\/code>20.974<\/code>,<\/code>29.954<\/code>c<\/code>0.605<\/code>,<\/code>0.863<\/code>,<\/code>0.395<\/code>,<\/code>2.054<\/code>-0.469<\/code>,<\/code>2.658<\/code>L<\/code>44.187<\/code>,<\/code>325.431<\/code>z M<\/code>66.681<\/code>,<\/code>271.185<\/code>l<\/code>75.509<\/code>-52.872<\/code> M<\/code>31.907<\/code>,<\/code>310.257<\/code>l<\/code>77.039<\/code>-53.943<\/code> M<\/code>118.788<\/code>,<\/code>260.87<\/code>l<\/code>34.917<\/code>-24.449<\/code> M<\/code>37.855<\/code>,<\/code>318.317<\/code>l<\/code>25.015<\/code>-17.516<\/code>\"\/><\/code><path class=<\/code>\"outer-flame\"<\/code> fill=<\/code>\"url(#largeGradient)\"<\/code> stroke=<\/code>\"url(#largeGradient)\"<\/code> stroke-width=<\/code>\"2\"<\/code> stroke-linecap=<\/code>\"round\"<\/code> stroke-linejoin=<\/code>\"round\"<\/code> stroke-miterlimit=<\/code>\"10\"<\/code> d=\"<\/code>M<\/code>82.579<\/code>,<\/code>210.049<\/code>c<\/code>-4.315<\/code>-0.393<\/code>-8.678<\/code>-1.158<\/code>-12.676<\/code>-2.352<\/code>c<\/code>-19.553<\/code>-5.839<\/code>-36.385<\/code>-22.93<\/code>-40.572<\/code>-43.069<\/code>c<\/code>-1.102<\/code>-5.301<\/code>-1.471<\/code>-11.261<\/code>-0.887<\/code>-16.656<\/code>c<\/code>1.646<\/code>-15.209<\/code>,<\/code>8.889<\/code>-31.008<\/code>,<\/code>16.749<\/code>-43.975<\/code>C<\/code>55.992<\/code>,<\/code>86.183<\/code>,<\/code>67.031<\/code>,<\/code>68.265<\/code>,<\/code>74.26<\/code>,<\/code>48.634<\/code>c<\/code>2.079<\/code>-5.647<\/code>,<\/code>3.825<\/code>-11.421<\/code>,<\/code>5.117<\/code>-17.299<\/code>c<\/code>2.019<\/code>-9.181<\/code>,<\/code>3.897<\/code>-21.151<\/code>-3.384<\/code>-28.647<\/code>c<\/code>14.729<\/code>,<\/code>15.163<\/code>,<\/code>27.537<\/code>,<\/code>32.13<\/code>,<\/code>38.675<\/code>,<\/code>50.078<\/code>c<\/code>4.029<\/code>,<\/code>6.492<\/code>,<\/code>7.841<\/code>,<\/code>13.117<\/code>,<\/code>11.454<\/code>,<\/code>19.849<\/code>c<\/code>3.744<\/code>,<\/code>6.976<\/code>,<\/code>7.259<\/code>,<\/code>14.075<\/code>,<\/code>10.524<\/code>,<\/code>21.288<\/code>c<\/code>4.38<\/code>,<\/code>9.678<\/code>,<\/code>7.966<\/code>,<\/code>19.728<\/code>,<\/code>10.488<\/code>,<\/code>30.052<\/code>c<\/code>4.66<\/code>,<\/code>19.078<\/code>,<\/code>9.751<\/code>,<\/code>43.266<\/code>-2.968<\/code>,<\/code>60.391<\/code>c<\/code>-5.683<\/code>,<\/code>7.652<\/code>-12.951<\/code>,<\/code>13.902<\/code>-21.589<\/code>,<\/code>17.991<\/code>c<\/code>-10.308<\/code>,<\/code>4.879<\/code>-22.085<\/code>,<\/code>8.124<\/code>-33.541<\/code>,<\/code>8.032<\/code>C<\/code>86.931<\/code>,<\/code>210.352<\/code>,<\/code>84.761<\/code>,<\/code>210.248<\/code>,<\/code>82.579<\/code>,<\/code>210.049<\/code>z\"><\/code><\/path><\/code><path class=<\/code>\"inner-flame\"<\/code> fill=<\/code>\"url(#smallGradient)\"<\/code> stroke=<\/code>\"url(#smallGradient)\"<\/code> stroke-width=<\/code>\"2\"<\/code> stroke-linecap=<\/code>\"round\"<\/code> stroke-linejoin=<\/code>\"round\"<\/code> stroke-miterlimit=<\/code>\"10\"<\/code> d=\"<\/code>M<\/code>90.043<\/code>,<\/code>116.799<\/code>c<\/code>-4.024<\/code>,<\/code>9.712<\/code>-12.607<\/code>,<\/code>17.546<\/code>-17.863<\/code>,<\/code>26.662<\/code>c<\/code>-5.921<\/code>,<\/code>10.268<\/code>-11.892<\/code>,<\/code>23.039<\/code>-9.362<\/code>,<\/code>35.209<\/code>1.865<\/code>,<\/code>8.974<\/code>,<\/code>9.366<\/code>,<\/code>16.589<\/code>,<\/code>18.078<\/code>,<\/code>19.191<\/code>c<\/code>1.782<\/code>,<\/code>0.532<\/code>,<\/code>3.726<\/code>,<\/code>0.873<\/code>,<\/code>5.648<\/code>,<\/code>1.048<\/code>c<\/code>0.972<\/code>,<\/code>0.089<\/code>,<\/code>1.939<\/code>,<\/code>0.135<\/code>,<\/code>2.877<\/code>,<\/code>0.143<\/code>c<\/code>5.104<\/code>,<\/code>0.041<\/code>,<\/code>10.352<\/code>-1.405<\/code>,<\/code>14.945<\/code>-3.579<\/code>c<\/code>3.849<\/code>-1.822<\/code>,<\/code>7.087<\/code>-4.607<\/code>,<\/code>9.62<\/code>-8.017<\/code>c<\/code>7.656<\/code>-10.307<\/code>,<\/code>3.202<\/code>-24.177<\/code>-1.21<\/code>-34.838<\/code>c<\/code>-6.142<\/code>-14.841<\/code>-15.085<\/code>-28.459<\/code>-22.297<\/code>-42.793<\/code>C<\/code>91.464<\/code>,<\/code>111.781<\/code>,<\/code>91.118<\/code>,<\/code>114.204<\/code>,<\/code>90.043<\/code>,<\/code>116.799<\/code>z\"><\/code><\/path><\/code><\/svg><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The gradient details are written within the <defs><\/code> element, but would have no output within our work until we call on it using its unique ID. At this point we would also add the shape within the same <svg><\/code> element, but outside of the <defs><\/code> element.<\/p>\n\n\n\n

The <stop><\/code> nodes represent the color selections and their locations on our mapped gradient, which we will discuss further in the following section.<\/p>\n\n\n\n

Gradient Attributes<\/h3>\n\n\n\n

The attribute values for <linearGradient><\/code> and <radialGradient><\/code> allow us to specify the colors and coordinates of our gradients.<\/p>\n\n\n\n

Here is a quick look at the attributes that will be used in the demos to follow:<\/p>\n\n\n\n

ID<\/h4>\n\n\n\n

A gradient requires a unique ID in order for it to be called on through \u201cfill\u201d and \u201cstroke\u201d\u00a0attributes.<\/p>\n\n\n\n

x1, x2, y1, y2<\/h4>\n\n\n\n

The values within the x1, x2, y1, y2 attributes specify the start and end coordinates for linear gradients along the appropriate axis. These values default to \u201c0\u201d if left unspecified, except for x2 which defaults to \u201c100%\u201d.<\/p>\n\n\n\n

cx, cy, r, fx, fy<\/h4>\n\n\n\n

Radial gradient attributes are similar to those of linear, except our coordinates will be handled much differently. Instead of being based on a straight line, these gradients will be mapped circularly.<\/p>\n\n\n\n

cx, cy, and r (radius) define the outermost circle for the gradient, with this outer perimeter being the 100% stop point. fx and fy define the focal point of the gradient, with the 0% stop mapping to these values.<\/p>\n\n\n\n

<stop><\/h2>\n\n\n\n

Within the gradient element itself we include the <stop><\/code> nodes. The attribute values within <stop><\/code> nodes define the colors for our gradient, where they should be placed, and any opacity that we want applied.<\/p>\n\n\n\n

The offset property indicates where the gradient stop is located. For linear gradients this location will be a distance along the gradient line, for radial gradients it will be a distance from the focal point to the edge of the mapped circle.<\/p>\n\n\n\n

stop-color<\/strong> indicates what color will be used at the correlating stop point, and stop-opacity<\/strong> sets an opacity at this same point. Depending on how many stops we wish to use we can choose between creating subtle, gradual color changes with only a few stops, or create stripes with several closely mapped stops.<\/p>\n\n\n\n

<animate><\/h2>\n\n\n\n

<animate><\/code> element will allow us to select gradient attributes and properties and then assign different values to them over a specified duration of time. In short, we can move them! The <animate><\/code> element will reside within the element we wish to animate. Here is the structure for a basic animation on a rectangle:<\/p>\n\n\n\n

<defs><\/code><radialGradient id=<\/code>\"smallGradient\"<\/code> fy=<\/code>\"90%\"<\/code>><\/code><stop offset=<\/code>\"0%\"<\/code> stop-color=<\/code>\"#f4c708\"<\/code>><\/stop><\/code><stop offset=<\/code>\"100%\"<\/code> stop-color=<\/code>\"#f7e69a\"<\/code>><\/stop><\/code><animate attributeName=<\/code>\"fy\"<\/code> dur=<\/code>\"700ms\"<\/code> from=<\/code>\"90%\"<\/code> to=<\/code>\"0%\"<\/code> repeatCount=<\/code>\"indefinite\"<\/code> \/><\/code><\/radialGradient><\/code><radialGradient id=<\/code>\"largeGradient\"<\/code> fy=<\/code>\"90%\"<\/code>><\/code><stop offset=<\/code>\"0%\"<\/code> stop-color=<\/code>\"#ff8806\"<\/code>><\/stop><\/code><stop offset=<\/code>\"100%\"<\/code> stop-color=<\/code>\"#d9574a\"<\/code>><\/stop><\/code><animate attributeName=<\/code>\"fy\"<\/code> dur=<\/code>\"700ms\"<\/code> from=<\/code>\"90%\"<\/code> to=<\/code>\"0%\"<\/code> repeatCount=<\/code>\"indefinite\"<\/code> \/><\/code><\/radialGradient><\/code><\/defs><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

The animation will move the rectangle along the x axis 400px pixels from its starting point. The animation will complete within 5 seconds, and repeat indefinitely.<\/p>\n\n\n\n

Attributes<\/h3>\n\n\n\n

Within the <animate><\/code> element we will use attributes to select our target and specify the details of the animation. Here is a look at the specific attributes we will focus on in the demos:<\/p>\n\n\n\n

attributeName<\/h4>\n\n\n\n

attributeName defines the name of the target attribute to be animated. In taking another look at the animation code above, the attributeName<\/strong> value is \u201cx\u201d so that we can target and animate our shape on the x axis.<\/p>\n\n\n\n

to, from<\/h4>\n\n\n\n

The \u201cto\u201d and \u201cfrom\u201d attributes indicate the initial and final value of the targeted attribute.<\/p>\n\n\n\n

values<\/h4>\n\n\n\n

Within the <values><\/code> attribute we can create a list of values separated by semicolons, and the animation will apply these values in order over the duration of the action.<\/p>\n\n\n\n

By including this attribute any \u201cfrom\u201d or \u201cto\u201d values within the same <animate><\/code> element will be ignored, meaning that it takes the place of these values once included so there is no need for them.<\/p>\n\n\n\n

dur<\/h4>\n\n\n\n

The duration defines within what time span the animation should complete.<\/p>\n\n\n\n

fill<\/h4>\n\n\n\n

While \u201cfill\u201d often refers to the interior color of SVG, it has a different meaning in the context of an <animate><\/code> attribute. We can set a value of \u201cfreeze\u201d within this attribute so that the animation freezes once it is complete and does not restart.<\/p>\n\n\n\n

repeatCount<\/h4>\n\n\n\n

The repeatCount attribute specifies the number of times an animation should take place. This value can be either a number, or \u201cindefinite\u201d.<\/p>\n\n\n\n

Animating Gradients<\/h3>\n\n\n\n

To target gradients specifically we need to have an idea of what properties we would like to animate, like the stop-color<\/strong>, offset<\/strong>, and\/or the specific coordinates.<\/p>\n\n\n\n

When we reviewed the code for the moving rectangle animation above the <animate><\/code> element resided within the shape\u2019s element, the <rect><\/code>. In order to animate gradient stops we place the <animate><\/code> element within the specific <stop><\/code> we intend to animate. To animate an attribute directly within the a <linearGradient><\/code> or <radialGradient><\/code> element, like coordinates for example, we position <animate><\/code> within the gradient element, but outside of the <stop><\/code> elements.<\/p>\n\n\n\n

Here\u2019s a look at the structure for an animation on the stop-color<\/strong> of a <stop><\/code> node.<\/p>\n\n\n\n

<stop offset=<\/code>\"0%\"<\/code> stop-color=<\/code>\"#f4c708\"<\/code>><\/stop><\/code><stop offset=<\/code>\"100%\"<\/code> stop-color=<\/code>\"#f7e69a\"<\/code>><\/stop><\/code><animate attributeName=<\/code>\"fy\"<\/code> dur=<\/code>\"700ms\"<\/code> from=<\/code>\"90%\"<\/code> to=<\/code>\"0%\"<\/code> repeatCount=<\/code>\"indefinite\"<\/code> \/><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Demos<\/h2>\n\n\n\n

To demonstrate the possibilities of animating SVG gradients we will look at some potential effects for a fictional camping site. The demos consist of animated gradients on fire, trees, and a skyline.<\/p>\n\n\n\n

Demo 01:\u00a0Fire<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Within the fire SVG we are targeting two flames to fill and animate, and as mentioned all the details are listed within a <defs><\/code> element in the <svg><\/code>.<\/p>\n\n\n\n

<defs><\/code><radialGradient id=<\/code>\"smallGradient\"<\/code> fy=<\/code>\"90%\"<\/code>><\/code><stop offset=<\/code>\"0%\"<\/code> stop-color=<\/code>\"#f4c708\"<\/code>><\/stop><\/code><stop offset=<\/code>\"100%\"<\/code> stop-color=<\/code>\"#f7e69a\"<\/code>><\/stop><\/code><animate attributeName=<\/code>\"fy\"<\/code> dur=<\/code>\"700ms\"<\/code> from=<\/code>\"90%\"<\/code> to=<\/code>\"0%\"<\/code> repeatCount=<\/code>\"indefinite\"<\/code> \/><\/code><\/radialGradient><\/code><radialGradient id=<\/code>\"largeGradient\"<\/code> fy=<\/code>\"90%\"<\/code>><\/code><stop offset=<\/code>\"0%\"<\/code> stop-color=<\/code>\"#ff8806\"<\/code>><\/stop><\/code><stop offset=<\/code>\"100%\"<\/code> stop-color=<\/code>\"#d9574a\"<\/code>><\/stop><\/code><animate attributeName=<\/code>\"fy\"<\/code> dur=<\/code>\"700ms\"<\/code> from=<\/code>\"90%\"<\/code> to=<\/code>\"0%\"<\/code> repeatCount=<\/code>\"indefinite\"<\/code> \/><\/code><\/radialGradient><\/code><\/defs><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

There are two radial gradients, \u201csmallGradient\u201d and \u201clargeGradient\u201d. The same animation is applied to each gradient targeting the fy coordinate point and moving it from 90% to 0% within 700ms. The animation is set to take place indefinitely.<\/p>\n\n\n\n

The assignment of these gradients is done by adding the gradient ID to the \u201cfill\u201d of the shape via a URL, for example:<\/p>\n\n\n\n

fill=&quot;<\/code>url<\/code>(#largeGradient)&quot;<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Demo 02:\u00a0Trees<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

For the trees demo we will be adding the animation to the gradient stop-color<\/strong>. There are two gradients to represent different colors for the trees, one with dark shades of green and one with light. Each animation is essentially the same, the only difference being the colors used.<\/p>\n\n\n\n

<defs><\/code><linearGradient id=<\/code>\"darkGradient\"<\/code> x<\/code>1<\/code>=<\/code>\"30%\"<\/code> y<\/code>1<\/code>=<\/code>\"70%\"<\/code>><\/code><stop offset=<\/code>\"0%\"<\/code> stop-color=<\/code>\"#0b2d13\"<\/code>><\/code><animate attributeName=<\/code>\"stop-color\"<\/code> values=<\/code>\"#0b2d13; #79c98c\"<\/code> dur=<\/code>\"3s\"<\/code> fill=<\/code>\"freeze\"<\/code> \/><\/code><\/stop><\/code><stop offset=<\/code>\"100%\"<\/code> stop-color=<\/code>\"#79c98c\"<\/code>><\/code><animate attributeName=<\/code>\"stop-color\"<\/code> values=<\/code>\"#79c98c; #0b2d13\"<\/code> dur=<\/code>\"3s\"<\/code> fill=<\/code>\"freeze\"<\/code> \/><\/code><\/stop><\/code><\/linearGradient><\/code> <linearGradient id=<\/code>\"lightGradient\"<\/code> x<\/code>1<\/code>=<\/code>\"30%\"<\/code> y<\/code>1<\/code>=<\/code>\"70%\"<\/code>><\/code><stop offset=<\/code>\"0%\"<\/code> stop-color=<\/code>\"#054f16\"<\/code>><\/code><animate attributeName=<\/code>\"stop-color\"<\/code> values=<\/code>\"#054f16; #91bc9c\"<\/code> dur=<\/code>\"3s\"<\/code> fill=<\/code>\"freeze\"<\/code> \/><\/code><\/stop><\/code><stop offset=<\/code>\"100%\"<\/code> stop-color=<\/code>\"#91bc9c\"<\/code>><\/code><animate attributeName=<\/code>\"stop-color\"<\/code> values=<\/code>\"#91bc9c; #054f16\"<\/code> dur=<\/code>\"3s\"<\/code> fill=<\/code>\"freeze\"<\/code> \/><\/code><\/stop><\/code><\/linearGradient><\/code><\/defs><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

The <animate><\/code> element resides within the 100% stop point for each gradient and targets the stop-color<\/strong>. The color values are animated through the values<\/strong> attribute, over a period of 3 seconds, and the animation is set to stop, or \u201cfreeze\u201d once it completes one cycle.<\/p>\n\n\n\n

Demo 03:\u00a0Sky<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The concept of a sunset is an ideal example of when animating a stop\u2019s offset would be needed. There are two gradients here, each having a series of animated color changes. With an additional animation on the offset<\/strong> of the 100% stop point the point moves down (to 0) and then back up again.<\/p>\n\n\n\n

<defs><\/code><linearGradient id=<\/code>\"skyGradient\"<\/code> x<\/code>1<\/code>=<\/code>\"100%\"<\/code> y<\/code>1<\/code>=<\/code>\"100%\"<\/code>><\/code><stop offset=<\/code>\"0%\"<\/code> stop-color=<\/code>\"lightblue\"<\/code> stop-opacity=<\/code>\".5\"<\/code>><\/code><animate attributeName=<\/code>\"stop-color\"<\/code> values=<\/code>\"lightblue;blue;red;red;black;red;red;purple;lightblue\"<\/code> dur=<\/code>\"14s\"<\/code> repeatCount=<\/code>\"indefinite\"<\/code> \/><\/code><\/stop><\/code><stop offset=<\/code>\"100%\"<\/code> stop-color=<\/code>\"lightblue\"<\/code> stop-opacity=<\/code>\".5\"<\/code>><\/code><animate attributeName=<\/code>\"stop-color\"<\/code> values=<\/code>\"lightblue;orange;purple;purple;black;purple;purple;blue;lightblue\"<\/code> dur=<\/code>\"14s\"<\/code> repeatCount=<\/code>\"indefinite\"<\/code> \/><\/code><animate attributeName=<\/code>\"offset\"<\/code> values=<\/code>\".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95\"<\/code> dur=<\/code>\"14s\"<\/code> repeatCount=<\/code>\"indefinite\"<\/code> \/>    <\/code><\/stop><\/code><\/linearGradient><\/code><\/defs><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

For the stop-color<\/strong> animations there\u2019s a list of color values the gradient will cycle through within 14s. The additional offset<\/strong> animation changes the location of the 100% stop point through a series of numerical values, also within 14s.<\/p>\n\n\n\n

It is important to mention here that while you should technically be able to use percentages when animating offset<\/strong>, and can do so without problems in Firefox, Chrome and Safari will not render the animation on the offset<\/strong> when percentage values are used within <animate><\/code>. The work around here is to simply avoid using percentages, as shown in the code above.<\/p>\n\n\n\n

Conclusion<\/h3>\n\n\n\n

For this article<\/strong>, we discussed the basic structure <\/strong>of SVG gradients<\/strong>, how to utilize SVG SMIL animation once they are created, and reviewed some demos regarding how this can be handy in communicating to\u00a0users.<\/p>\n\n\n\n

Hopefully, all this inspires you to take a look at writing gradients within SVG code and get them moving all within the same SVG element.<\/p>\n","protected":false},"excerpt":{"rendered":"

SVG gradients are so handy. We can fill complex shapes and create depth and character for our artwork all while having access to it in the\u00a0DOM. Within SVG linear and radial gradient elements there are several attribute options available for thorough customization. Animating these gradients takes this customization even further and presents a unique opportunity […]<\/p>\n","protected":false},"author":2,"featured_media":4971,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,145,62],"tags":[93,25,146,96,110,101],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2020\/08\/Animating-SVG-Gradients.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-1i6","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4966"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=4966"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4966\/revisions"}],"predecessor-version":[{"id":4972,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/4966\/revisions\/4972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/4971"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=4966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=4966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=4966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}