Animate stroke style properties
This article describes animations of stroke style properties (stroke-dasharray, stroke-dashoffset, stroke-width, stroke, stroke-opacity) with examples and howto videos:
- to simulate a flow on a path
- the movement of a train on its track
- and other shape highlighting effects
Animate stroke-dasharray property
The stroke-dasharray property controls the pattern of dashes and gaps used to form the shape of a path's.
Animating this property allows you to simulate a flow on a path.
The effect is achieved by setting the stroke-dasharray property value with two animated numbers:
Animating this property allows you to simulate a flow on a path.
The effect is achieved by setting the stroke-dasharray property value with two animated numbers:
- a dash that goes from zero to the length of the element
- followed in reverse by a gap that goes from the length to zero
See this example of a stroke dasharray animation with a path of length equal to 2200:
The definition of the stroke dasharray animation:
With drawsvg, there is no need to calculate, it does it for you bysetting default values to simulate the flow:
- Select the shape
- Open the animations menu and click on the animate attribute icon
- Select the stroke-dasharray style property
- Set the animation duration
- Check the default values: (0 length) to (length 0)
- Click add button
Animate stroke-dashoffset property
The stroke-dashoffset property specifies the distance into the repeated dash pattern (defined by stroke-dasharray) to start the stroke dashing at the beginning of the path.
The animation of this property allows in particular to give the illusion of the movement of a train on its track (or a car on a road).
To do this, use the properties stroke-dasharray and stroke-dashoffset together on the same shape (the track):
The animation of this property allows in particular to give the illusion of the movement of a train on its track (or a car on a road).
To do this, use the properties stroke-dasharray and stroke-dashoffset together on the same shape (the track):
- set the property stroke-dasharray on the shape with:
a dash equal to the length of the 'train'
followed by an additional gap to cover the rest of the shape (shape length minus train length) - then animate on the shape the stroke-dashoffset property value from the length of the shape to zero
See this example of a stroke-dashoffset animation:
The definition of the stroke dashoffset animation:
Drawsvg makes it easy to define animation by calculating default values for the property to simulate the movement of a train on its track:
- Select the train shape
- Open the animations menu and click on the animate icon
- Select the stroke-dashoffset style property
- Set the animation duration
- Check the default values: length to 0
- Click add button
Animate stroke-width property
The stroke-width property specifies the width of the stroke on the current object.Animating the stroke-width property allows the shape to be highlighted.
To animate the stroke-width property on a shape, proceed as follows:
- Select the shape
- Open the animations menu and click on the animate attribute icon
- Select the stroke-width style property
- Set the animation duration
- Enter the values (from,to) then mirror them
- Click add button
Use the mirror effect by increasing the thickness of the line and then returning it to its initial value :
The definition of the stroke-width animation:
Animate stroke property
The stroke property paints along the outline of the given graphical element.It can take several syntaxes: a color, a gradient identifier or even a pattern to use to fill the outline.
Only color can be animated.
To animate the stroke color property on a shape, proceed as follows:
- Select the shape
- Open the animations menu and click on the animate attribute icon
- Select the stroke style property
- Set the animation duration
- Set color values (from, to) with the color chooser tool:
- Click add button
See this example of a stroke color animation :
The definition of the stroke color animation:
If the stroke property uses a gradient to fill the outline, the gradient can also be animated.
Check out this example of animating a stroke's fill gradient:
The definition of the gradient animation:
Animate stroke-opacity property
The stroke-opacity property specifies the opacity of the painting operation used to stroke the current object.Animating the stroke-opacity property allows the shape to be highlighted.
To animate the property, it's just as simple with drawsvg:
- Select the shape
- Open the animations menu and click on the animate attribute icon
- Select the stroke-opacity style property
- Set the animation duration
- Enter the values (1,0) then mirror them:
- Click add button
Using the mirror effect to give the illusion of a beat:
The definition of the stroke-opacity animation:
Read more
- Read drawsvg user's guide animate attribute
- View showcase animate stroke color
- View showcase animate stroke-dasharray
- View showcase animate stroke-dashoffset
- View showcase animate stroke-width
- View showcase animate gradients