An overview of SVG code, drawing simple and complex shapes, animations, and more.

1. SVG
ANIMATION
B Y A D A M C H A M B E R S

2. SVG Basics
Paths & Polylines
CSS Animations
JavaScript Animations
Lottie & Bodymovin
What we’ll
cover today

3. 3
To SVG or not to SVG
• CSS was made for layout, SVG was made for drawing
• Accessibility. SVG is just DOM.
• Debugging. Again just the DOM, Canvas is it’s own world
• Performance limitations when animating hundreds of elements
• 3D and extreme immersive experiences

4. 4
SVG is like an infinite sheet of graph
paper on which you can plot things
You view pieces of this infinite graph
paper through the viewbox

5. 5

6. 6

7. 7

8. 8

9. 9
<svg width=“400px” height=“400px”>

10. 1 0
<svg width=“400px” height=“400px” viewbox=“20 20 50 80”>

11. 1 1

12. 1 2

13. 1 3

14. 1 4

15. 1 5

16. 1 6

17. 1 7

18. 1 8
Drawing basic shapes
view on codepen

19. 1 9
Drawing polygon shapes
view on codepen

20. 2 0
Groups are like divs, you can move
and style of group of elements
Elements inside a group inherit style,
allowing for specificity, just like CSS

21. 2 1
Group Style Specificity
view on codepen

22. SVG Basics
Paths & Polylines
CSS Animations
JavaScript Animations
Lottie & Bodymovin
What we’ll
cover today

23. 2 3
The path is the most powerful
element in the world of SVG shapes
Paths create complex shapes by
combining lines, curves, and arcs

24. 2 4
Complex shapes composed of only
straight lines can be created as polylines
Polylines and paths can create similar
shapes but only paths can create curves

25. 2 5
Drawing polyline shapes
view on codepen

26. 2 6
It is not recommended to draw
complex path shapes by hand
However understanding path data will
help in modifying and animating

27. 2 7
Path data <path d=“” />
• Each command specified with a letter
• Uppercase means absolute, lowercase means relative to last point
• Move To: M x y
• Line To: L x y
• Horizontal To: H x
• Vertical To: V y
• Close Path: Z

28. 2 8
Drawing paths
view on codepen

29. 2 9
There are three commands you can
use to create smooth curves
Two of those curves are Bezier curves,
and the third is an arc or part of a circle

30. 3 0
There are an infinite number
of Bezier curves
Two simple curves are available in path
elements, Cubic and Quadratic

31. 3 1
Jason Davies’ Animated Bézier Curves

32. 3 2
Drawing path curves <path d=“” />
• Cubic: C x1 y1, x2 y2, x y
• Cubic Reflection: S x2 y2, x y
• Quadratic: Q x1 y1, x y
• Quadratic Reflection: T x y

33. 3 3
Drawing quadratic curves
view on codepen

34. 3 4
Drawing quadratic curves
view on codepen

35. 3 5
Drawing quadratic curves
view on codepen

36. 3 6
Drawing quadratic curves
view on codepen

37. SVG Basics
Paths & Polylines
CSS Animations
JavaScript Animations
Lottie & Bodymovin
What we’ll
cover today

38. 3 8
view on codepen

39. 3 9
view on codepen

40. 4 0

41. 4 1
view on codepen

42. 4 2

43. 4 3
view on codepen

44. 4 4

45. 4 5

46. 4 6

47. 4 7
easings.net

48. 4 8

49. 4 9
view on codepen

50. 5 0
view on codepen

51. 5 1

52. SVG Basics
Paths & Polylines
CSS Animations
JavaScript Animations
Lottie & Bodymovin
What we’ll
cover today

53. 5 3
To JS or not to JS
• Sequencing in CSS is hard
• Real-time modification and editing animations
• Cross browser differences paved over with JS libraries
• Advanced animations made easy with JS library functionality
• User interaction and third party data

54. 5 4

55. 5 5
view on codepen

56. 5 6

57. 5 7

58. 5 8
view on codepen

59. 5 9

60. SVG Basics
Paths & Polylines
CSS Animations
JavaScript Animations
Lottie & Bodymovin
What we’ll
cover today

61. 6 1

62. 6 2
view on codepen

63. 6 3

64. 6 4
view on codepen

65. 6 5

66. Thank You
6 6