Introduction to gradient animations
The SMIL SVG animation standard applies to both geometric elements and style elements such as gradients.
This document demonstrates linear and radial gradient animations with descriptions, sample illustrations, and how-to videos.
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.
This document demonstrates linear and radial gradient animations with descriptions, sample illustrations, and how-to videos.
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 is defined using the drawsvg editor.
Animate x1 attribute
The animation varies the origin of the x-coordinate of the propagation area from 0% to 100%
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 is defined using the drawsvg editor.
Animate color opacity
The animation varies the opacity of the blue color from 0 to 1.
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.
Read more
- Read drawsvg user's guide animate gradients
- View showcase animate gradients
- See WW3C specifications gradients