Introduction to gradient animations
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
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
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
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
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
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
How to set the animation with drawsvg editor
Read more
- Read drawsvg user's guide animate gradients
- View showcase animate gradients
- See WW3C specifications gradients