title
  
blank image

Animations

Create and edit SMIL animations
This category contains 20 showcases

Play all Animations showcases continuously

Animate attributes
Animate DOM attributes and style properties of elements
Animate attributes 

Showcase steps

  1. Select rect to animate rx attribute
  2. Open Animations menu
  3. Click Animate attribute icon
  4. Set only required properties
  5. Select rx attribute
  6. Click next
  7. Enter animation id
  8. Set duration to 5 seconds
  9. Syntax 'from-to' is selectedAnd the rx 'to' value is set as the half width by default
  10. start animation: select yes
  11. Click Add
  12. Select circle to animate fill property
  13. Select fill property
  14. Set 'from' value as 'red' and 'to' value as 'green'
  15. Click Add
  16. Click Animate attribute icon to edit animate elements
  17. Edit rx_animate
  18. Set all properties
  19. Select repeat count pane
  20. Set repeat count to indefinite
  21. Click Update
  22. Edit fill_animate
  23. Change values
  24. Select values syntax to add orange between red and green
  25. Click Update
Play
Animate gradients
Animate linear and radial gradients properties (x1, y1, x2, y2, cx, cy, fx, fy, r, offset, stop-color, stop-opacity), transform translate scale.
Animate gradients 

Showcase steps

  1. Select rect to fill with a gradient and animate
  2. Apply linear gradient
  3. Copy the gradient definition
  4. Click animate gradient icon
  5. Click animate the linear gradient
  6. Select x1 attribute
  7. Set duration as 4 sec
  8. Set repeat count to indefinite
  9. Click Add
  10. Animate the first stop element of the gradient
  11. Select stop-color property
  12. Reverse from to colors
  13. Apply orangered color
  14. Click Add
  15. Change the gradient propagation method to see animation changes
  16. Click OK
  17. Select the second rect to fill and animate
  18. Apply this linear gradient
  19. Click OK
  20. Copy the gradient definition
  21. Animate the gradient with a transformation
  22. Select rotate
  23. Set values
  24. Set center to (0.5,0.5) for each rotation
  25. Click Add
  26. Select the third rectangle to fill and animate
  27. Apply this radial gradient
  28. Click OK
  29. Animate the radial gradient
  30. Select r attribute
  31. Check values
  32. Click Add
  33. Change spread method
  34. Click OK
  35. Finish
Play
Animate path
Animate a closed quadratic arc with three drawn states (c,c1,c2)
Animate path 

Showcase steps

  1. Select path C
  2. Open Animations menu
  3. Click animate icon
  4. Animate attribute d (path description)
  5. Open tab values
  6. Switch to values syntax
  7. State to, select c
  8. Click add value
  9. State v1, select c1
  10. State v2, select c2
  11. Click Add
  12. Select shape
  13. Click Add hyperlink
  14. Select the animation to start when you click on the shape
  15. Click shape to start animation
Play
Animate path with keyTimes
Animate a closed quadratic arc with three drawn states (c,c1,c2).
Use keyTimes to increase the pressure and slow down expansion and return to original state.
Animate path with keyTimes 

Showcase steps

  1. Open Animations menu
  2. Click Animate icon
  3. Click Edit
  4. Set all properties
  5. Open tab keyTimes
  6. Switch to keyTimes values
  7. Set keyTimes values to (0,5,20,100)
  8. Click Update
  9. Click shape to start animation
Play
Animate patterns
Animate the pattern properties and its content elements.
Three examples of pattern animation:
  • Pattern x origin
  • Scale the pattern
  • Rotate the content elements
Animate patterns 

Showcase steps

  1. Select an element filled using a pattern
  2. Open the Animations menu
  3. Click the Pattern icon
  4. Select the pattern elementAnd click Animate
  5. Select x attribute to animate it
  6. Enter duration seconds
  7. Set 'to' value as 100
  8. Select indefinite repeat count
  9. Click Add
  10. Select a rectangle with a pattern to scale
  11. Click the Pattern icon in the animations menu
  12. Select the pattern elementAnd click Animate transform
  13. Select scale type
  14. Enter duration
  15. Set scale values
  16. Set values :from 1to 6Then mirror values
  17. Click Add
  18. Select a rectangle with a pattern to animate an element of its content
  19. Click the Pattern icon in the Animations menu
  20. Select the first path elementAnd click Animate transform to rotate it
  21. Select rotate type
  22. Enter duration
  23. Click Add
  24. Finish !
Play
Animate stroke-color
Animating the line color helps to highlight the shape.
Use the mirror effect by returning the line color to its initial value
Animate stroke-color 

Showcase steps

  1. Select the shape
  2. Open the Animations menu
  3. Click the Animate attribute icon
  4. Select stroke property
  5. Enter the animation ID
  6. Entre the duration seconds
  7. Set color values
  8. Set the color to lavender
  9. Select lavender color
  10. Apply the lavender color
  11. Mirror the values
  12. Set the repeat count as your needs
  13. Click Add
  14. That's all !
Play
Animate stroke-dasharray
The stroke-dasharray property controls the pattern of dashes and spaces used to form the shape of a path.
Its animation can simulate a flow on a path.
For this:
  •  the initial value of the property must be set with a zero-length dash followed by a space of the path length, 
  • and the destination value of the property with a dash of the path length followed by a zero-length space.

The values ​​of the property are predefined thus by drawsvg with the calculated length of the path.
Animate stroke-dasharray 

Showcase steps

  1. Select the shape to animate
  2. Open the Animations menu
  3. Click the Animate attribute icon
  4. Select the stroke-dasharray property
  5. Enter the animation ID
  6. Enter the duration seconds
  7. Set the repeat count as you need
  8. Check the values
  9. The proposed values ​​(from, to) simulatea flow over the full length of the path (2200).They are defined with:- a dash from zero length to the total length (2200)- completed by a space from the total length (2200) to zeroKeep the proposed values
  10. Click Add button
  11. Here is the result of the animationIt's finished!
Play
Animate stroke-dashoffset
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.
This showcase illustrates this kind of animation.
Animate stroke-dashoffset 

Showcase steps

  1. The drawing has 2 paths:- the railway track- the trainOpen the Selection menu
  2. The track
  3. Open the dialog properties
  4. The track and the train have the same path with a length of 2200
  5. Select train
  6. The path of the train is equalto the path of the railway track
  7. The train stroke width is 9pxand the dash pattern is "200,2200"a dash of 200 followed by a space of 2200
  8. Open the Animations menu
  9. Click the Animate attribute icon
  10. Select the stroke-dashoffset property
  11. Enter animation id
  12. Enter duration seconds
  13. Set repeat count to indefinite
  14. Check values
  15. The values ​​(from, to) are filled in by default to create the train animation:from: the length of the shapeto: 0No need to modify them
  16. Click Add
  17. Finish !!
Play
Animate stroke-width
Animating the stroke-width property allows the shape to be highlighted.
Use the mirror effect by increasing the thickness of the line and then returning it to its initial value
Animate stroke-width 

Showcase steps

  1. Select the shape
  2. Open the Animations menu
  3. Click the Animate attribute icon
  4. Select the stroke-width property
  5. Enter the animation ID
  6. Enter the duration seconds
  7. Set values
  8. Click on the Mirror buttonto set values to (1px,20px,1px)
  9. Set the number of repetitions according to your needs
  10. Click Add
  11. That's all
Play
Animate transform
Animate an element with translate, rotate, scale, skew transformations
Animate transform 

Showcase steps

  1. Select element to translate
  2. Open animations menu
  3. Click 'transform' icon
  4. Choose translate type
  5. Click next
  6. Customize animation id as you want
  7. Set duration to 4 secondes
  8. Set 'to' tx value to 250
  9. Click Add
  10. Select another element to rotate
  11. Choose rotate type
  12. The rotate origin must be set.It's recommended to set it with CSS.It will be set for all rotate and scale transformations on the element.Choose the element's fill-box as the referenced box of the origin.Note that if the element is scaled himself you cant use CSS origin, in such case you need to use (cx,cy) parameter of rotate.
  13. Set the origin as a related position to the selected box
  14. Choose center as x axis
  15. Set offset to 0
  16. Same for Y
  17. Set duration to 4 secondes
  18. Add a begin element to start when the first animation ends
  19. Select first animation id
  20. Set 'from' angle to 0 and 'to' angle to 360
  21. Click Add
  22. Select the next element to scale
  23. Choose scale type
  24. Set the transformation origin to center on fill-box
  25. Set 'from' x factor to 0and 'to' x factor to 2y factors will be equals
  26. Click Add
  27. Select next element to apply skewX transformation
  28. Choose skewX type
  29. Set 'from' and 'to' skew angle
  30. Click Add
  31. Choose skewY type
  32. Set skew angle to -60
  33. Click Add
  34. Click 'transform' icon to list all transform animations
  35. Select first animation
  36. Click Begin to start animations
  37. End of animation
Play
Animate using keySplines
Animate attribute values with spline interpolation 
Animate using keySplines 

Showcase steps

  1. Select rect to animate width
  2. Click Animate attribute
  3. Set all properties
  4. Select width attribute
  5. Click next
  6. Set duration to 5 secondes
  7. Set repeat count to indefinite
  8. Select begin pane
  9. Click Add event
  10. Select event target to 'go' shape
  11. Select values pane
  12. Enter 200
  13. start animation: select no
  14. Click Add
  15. Copy the rect
  16. Align x y to the base line
  17. Edit the copied animate element
  18. Select calcMode pane
  19. Set calcMode to spline
  20. Set keyTimes values to 0 100
  21. Set keySplines values to 50 0 50 100
  22. Click Update
  23. Click 'go' shape to begin animations
  24. Edit second animation to change keySplines values
  25. Change keySplines values with a sample
Play
Animate using keyTimes
Animate using keyTimes with multiple values to control the transition speed of each value
Animate using keyTimes 

Showcase steps

  1. Select circle to animate cx attribute
  2. Click Animate attribute icon
  3. Set all properties
  4. Select cx attribute
  5. Click next
  6. Set duration to 5 secondes
  7. Set repeat count to indefinite
  8. Select begin pane
  9. Click Add event
  10. Select go
  11. Select values pane
  12. Set values to 100 150 200 250 300
  13. Start animation: select no
  14. Click Add
  15. Copy the circle
  16. Set cx to 100 and cy to 280
  17. Edit the copied animate element
  18. Select keyTimes pane
  19. Set keyTimes values to 0 10 25 50 100
  20. Click Update
  21. Click go shape to begin animations
Play
Animate wave path
Animate a wave path with drawn states.
Each path structure must be the same.
Draw each wave curve state by copy and move each control point.
Move each curve to the same starting point.
Animate the wave path with each curve.
The following modifications on the curves are replicated on the animation by a constraint.
Animate wave path 

Showcase steps

  1. Click Grid icon
  2. Enable grid to move each curve to the same start point
  3. Select wave1 and move it to wave start point
  4. Move wave2
  5. Move wave3
  6. Move wave4
  7. Clear grid
  8. Select wave
  9. Open Animations menu
  10. Click Animate attribute icon
  11. Select d attribute (path description)
  12. Open values tab
  13. Select values syntaxSet values as (wave,wave1,..,wave4,wave)
  14. Set duration to 4 sec
  15. Switch to all properties
  16. Open repeatCount tab
  17. Set as number 2
  18. Click Add
  19. Set fill color as turquoise
  20. Hide curves
  21. Select shape
  22. Click Add hyperlink icon
  23. Select animation to start on click
  24. Change wave4
  25. Move wave4 control pointsChange is replicated to animation by constraint
Play
Animations schedule
Describes the schedule of animations with their sequences.
Animations schedule 

Showcase steps

  1. Open a sample with animations
  2. Load drawsvg anim-stroke-circle sample
  3. Load the sample
  4. Open animations menu
  5. Click scheduler icon
  6. The dialog shows the animations plan, start times and chainings.This sample has 3 animations
  7. The first animation #animr1 begins at 0s.It grows the radius circle from 0 to 7
  8. The second animation #animr2 begins when animr1 ends and decrease radius circle from 7 to 0
  9. The third animation starts when animr1 starts and varies the circle's stroke-dashoffset property from 44 to 0 indefinitely.
  10. Click close
  11. Pause animations
  12. Unpause animations
Play
Motion origin
Shows how to define the origin of a motion animation. 
Define the motion origin point on the target.
Select the moving method (transform or animate).
Motion origin 

Showcase steps

  1. Select the moving target
  2. Add the motion path to the selection (CTRL+click)
  3. Open Animations menu
  4. Click motion icon
  5. Select origin pane
  6. Select target center point
  7. Choose the Transform method
  8. Set duration to 5 sec
  9. Click Add
  10. Select the other moving target
  11. Select the ellipse as the motion path
  12. Click motion icon
  13. Select target center point
  14. Choose the animate method
  15. Set duration to 5 seconds
  16. Click Add
  17. Click the circle to launch its animation
  18. Edit animations
  19. Select the second animation
  20. Click Edit
  21. Open constraint pane
  22. The animation sequence (translate, motion, translate back) is managed by the motionTranslate constraint
Play
Motion path
Shows how to define the motion path of a target using the three methods (refers, copy, describe).
The motion path can be defined with a geometric element of any type (rectangle, circle, ellipse. path).
Animations are updated by constraints when motion path changes.
Animations properties can be edited.
Motion path 

Showcase steps

  1. Select motion target rectangle
  2. Select the rectangle as motion path.Add to selection (CTRL+click)
  3. Open animations menu
  4. Click motion icon
  5. Click path pane
  6. Select copy
  7. Set duration to 5 seconds
  8. Click Add
  9. Select the motion target circle
  10. Click motion icon
  11. Select motion_path_ellipse from the copy list
  12. Click Add
  13. Select motion target shape
  14. Select the path as the motion path
  15. Select refers the path
  16. Click Add
  17. Edit animations to change paths
  18. Select second animation (circle motion on ellipse)
  19. Click Edit
  20. Open path pane
  21. Change copy move_path_ellipse to move_path_rectangle
  22. Click Update
  23. The circle is moving around the rectangle.Click Undo to move back to ellipse
  24. Select the ellipse to transform it
  25. Click transform icon
  26. Turn it 45 dg
  27. Resize it -50%
  28. Animation is updated on motion path changes
  29. Select the path
  30. Transform it
  31. The motion path is updated by the motionRefPath constraint
  32. The motion path is updated by the motionCopyPath constraint
Play
Motion target group
When the motion target is transformed, the animation should be
applied to an enclosing group of the target.
Motion target group 

Showcase steps

  1. Open shapes menu
  2. Open emoji catalog to draw a cyclist
  3. Select bicyclist
  4. Draw emoji box
  5. Transform the symbol
  6. Flip the symbol to left to right
  7. Open animations menu
  8. Click motion icon
  9. Open group anchor
  10. Click create
  11. Open path pane
  12. Select refers path
  13. Open origin pane
  14. Set motion origin point to target bottom center
  15. Click animate
  16. Open rotate pane
  17. Click auto
  18. Set duration to 5 seconds
  19. Click Add
  20. Click symbol to restart animation
Play
Motion using keyTimes
Animate motion using keyTimes/keySplines to set speed along the path with spline interpolation to accelerate and decelerate.
A demonstration with ski jumping
Motion using keyTimes 

Showcase steps

  1. Drawing of a skier at the top of the toboggan ready to jump
  2. Open fontawesome shapes catalog
  3. Search skier
  4. Select Skiing shape
  5. Draw skier bounding box
  6. Rotate it
  7. Resize it
  8. Change id to skier
  9. Click animate motion icon
  10. The skier shape is transformedSelect create the group
  11. Select motion_path
  12. Select target bottom center point as motion origin
  13. Select animate
  14. Select rotate auto
  15. Set duration
  16. Click Add
  17. Move the skier
  18. Open selection menu
  19. Select motion_path element to view its length
  20. The motion path length is 488
  21. Quit
  22. Select toboggan to view its length and to compute its ratio with motion path
  23. The toboggan length is 303The ratio is (1-488/303)*100=61%Toboggan length is equals around 60% motion path length
  24. Edit skier animation to set speeds and accelerations
  25. Select all properties
  26. Open keyTimes pane
  27. Select keyTimes values
  28. Add an intermediate value to set the speed on the toboggan to twice the speed of the jump.Since the length of the toboggan is 60% of the motion path, so the keyTime value is 30%
  29. Open keyPoints pane
  30. Select keyPoints values
  31. Set the value to the extremity of the toboggan : 60%
  32. Click Update
  33. Edit animation to set accelerations
  34. Open calcMode pane
  35. Select spline
  36. Open keySplines pane
  37. Select keySplines coordinates
  38. Select the accelerate spline for the toboggan part
  39. Click next time interval to set its spline
  40. Select the decelerate spline for the jump part
  41. Click Update
  42. Select 'go' shape
  43. Click add hyperlink
  44. Select animation
  45. Click OK
  46. Select motion path to set it transparent
  47. Click transparent
  48. Click go
Play
Synchronization by events
Synchronize animations by events (begin, end, click, hyperlink, ..)
Synchronization by events 

Showcase steps

  1. Select the cloud shape to animate fill attribute
  2. Click Animate attribute icon
  3. Set only required properties
  4. Select the fill property
  5. Set duration to 9 secondes
  6. Add click event
  7. Select cloud click event
  8. Set fill 'to' value
  9. Apply darkslategray
  10. Start animation: select no
  11. Click Add
  12. Select the first drop to animate its fill attributewhen the first animation begins
  13. Set duration to 3 secondes
  14. Add event
  15. Select e1_animate begin event
  16. Click Add
  17. Select second drop to animate its fill attributewhen the second animation ends
  18. Select e2_animate end event
  19. Click Add
  20. Select third drop to animate its fill attributewhen the third animation ends
  21. Select e3_animate end event
  22. Click Add
  23. Select text to add a hyperlink that begins the animation
  24. Click Add hyperlink icon
  25. Select animation e1_animate
  26. Click OK
  27. Click the text to begins the animation
  28. Click the cloud to begins the animation
  29. Check the animations planning
  30. Click Close
Play
Using set command
Using the set command to fix elements state during animations
Using set command 

Showcase steps

  1. Select C1
  2. Open animations menu
  3. Click set icon
  4. Select fill style property
  5. Set id to C1_set
  6. Set duration to 4 sec
  7. begin on C1 click event
  8. Select gold color
  9. Check start no
  10. Click Add
  11. Select line
  12. Set stroke color to gold when C1_set begins
  13. select stroke style property
  14. Set duration to 4 sec
  15. Select begin
  16. Animate y2 from 150 to 350 when C1_set begins
  17. select y2 attribute
  18. Set duration to 4 sec
  19. Click Add
  20. Select C2
  21. Set fill color to gold when line_animate ends
  22. Select fill style property
  23. Select line_animate end
  24. Click Add
  25. Click C1 to start animation
  26. finish
Play