SVG Animations
•
1 j'aime•2,118 vues
An overview of SVG code, drawing simple and complex shapes, animations, and more.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à SVG Animations
Similaire à SVG Animations (20)
Plus de Digital Surgeons
Plus de Digital Surgeons (20)
Dernier
Dernier (20)
SVG Animations
- 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
- 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