Introduction to gradient animations

The SMIL SVG animation standard applies to both geometric elements and style elements such as gradients.
This document illustrates the animation of gradients with some simple examples and a short guide to creating it with drawsvg.
A gradient defines the filling of a geometric shape with a gradient between two or more colors either along a straight line for linear gradients or by a circular propagation for radial gradients.

Linear gradients

Example of a gradient with three colors (blue, white, red) :

  • The gradient is defined in the "objectBoundingBox" coordinate system,
    i.e. as a percentage of the element's bounding box, (0%,0%) top left corner and (100%,100%) bottom right corner.
  • The propagation direction and its area are defined by the attributes (x1,y1,x2,y2),
    the area is horizontal from 0% to 100%
  • Each color and its propagation interval are defined by a stop element (blue 0%, white 50%, red 100%),
    the offset attribute indicates where the gradient breakpoint is placed.
    For linear gradients, the offset attribute represents a location along the gradient vector.
  • The spread method indicates what happens if the gradient starts or ends inside the bounds of the target rectangle,
    the attribute is set to 'pad',
    the gradient use its terminal color to fill the remainder of the target region.

Rendering the gradient on a rectangle

The gradient definition

linear gradient definition

The gradient is defined using the drawsvg editor.

How to set the gradient with drawsvg editor

Animate x1 attribute

The animation varies the origin of the x-coordinate of the propagation area from 0% to 100%

Rendering the gradient animation

The definition of animation

linear gradient x1 animation definition

How to set the animation with drawsvg editor

Gradient rotation animation

The animation varies the rotation angle of the gradient from 0 to 360 degrees at the center of the element.

Rendering the gradient animation

The definition of animation

linear gradient rotation animation definition

How to set the animation with drawsvg editor

Radial gradients

Example of a radial gradient with two colors (white, blue) :

  • The gradient is defined in the "objectBoundingBox" coordinate system,
    i.e. as a percentage of the element's bounding box, (0%,0%) top left corner and (100%,100%) bottom right corner.
  • The propagation circle is defined by its center (cx,cy) and its radius (r),
    The center is coincident with the center of the element's extent (50%,50%) and the radius at its half width (50%)
  • Each color and its propagation interval are defined by a stop element (white 0%, blue 100%).
    For radial gradients, the offset attribute represents a fractional distance from the edge of the innermost/smallest circle to the edge of the outermost/largest circle.

Rendering the gradient on a circle

The gradient definition

radial gradient definition

The gradient is defined using the drawsvg editor.

How to set the gradient with drawsvg editor

Animate color opacity

The animation varies the opacity of the blue color from 0 to 1.

Rendering the gradient animation

The definition of animation

radial gradient color opacity animation definition

How to set the animation with drawsvg editor

Animate radius

The animation varies the radius of the radial gradient from 0 to 1.
The spread method is set to 'reflect', the gradient reflects its pattern from start to finish, from end to start, from start to finish, etc. continuously until the target rectangle is filled.

Rendering the gradient animation

The definition of animation

radial gradient r animation definition

How to set the animation with drawsvg editor

Read more