Learn to build and optimize SVG – the scalable graphics format for the web that can achieve impressively small filesizes for fast-loading websites. In this course, you'll learn to create immersive graphics and make them alive with animations!
Overview
Syllabus
- Introduction & Setup
- What is SVG?
- SVG Support & Performance
- The Antidote to Positioning in CSS
- Platonic Shapes
- viewBox & Responsive
- preserveAspectRatio
- Paths, Groups, & Polylines
- Animated Bézier Curves & Template Literals
- Accessibility
- Optimizing & Building
- Constructing an SVG
- Starting an SVG
- Prototyping
- Planning an Animation Exercise
- Planning an Animation Review
- Animation Support Breakdown
- Differences in Functionality
- Why SVG?
- Transform-Origin
- Animate an SVG Exercise
- SVG Tools and Ideas Q&A
- Sprites
- Atmospheric & Elemental Motion
- Tools Overview
- Performance & GSAP
- TweenMax Syntax
- Stagger
- GSAP Monster Demo
- Cycle Stagger
- Setting CSS Properties
- Comments on D3
- Timeline
- GSAP Demo
- GSAP Exercise
- UI vs Standalone Animation
- Social Engineering with Animation
- Context Switching
- Improving an Existing UI Demo
- Interaction, JS Detection, & Scaling
- Interaction & GSAP Timeline Functions
- Interaction Demo
- Draggable
- Interactive Exercise
- DrawSVG
- Motion Along a Path
- Curviness & Rotation
- Animating Text
- Relative Color Values
- Creating a Story Exercise
- MorphSVG
- Bonus Demos
- Shape Morph Exercise
- Clipping & Masking
- viewBox
- svgOrigin
- Thanks!
Taught by
Sarah Drasner
