Coursera Plus Annual is 40% Off — Ends July 13.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Frontend Masters

SVG Essentials & Animation, v2

via Frontend Masters

Go to class Write review
Scrimba Ad

Get 20% off all career paths from fullstack to AI

Learn More → OpenLearning Ad

Master AI and Machine Learning: From Neural Networks to Applications

Learn More →

Overview

Google, IBM & Meta Certificates – 40% Off
One plan covers every Professional Certificate on Coursera.
Unlock All Certificates
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!

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

Reviews

Start your review of SVG Essentials & Animation, v2

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.