Surprise and delight: CSS + SVG
summary
Shows concrete techniques: use inline SVG with <defs> templating to reuse vectors, animate outlines with stroke-dasharray and animated dashoffset to “draw” shapes, and combine SVG clipping/masking for growing reveals. Warns of accessibility gaps (screen readers ignore SVG titles) and cross‑browser quirks — Firefox ignores percent transform origins, IE only reliably animates opacity — so use a Modernizr fallback or small referenced SVGs layered and animated with plain CSS as a workaround. Performance cautions: avoid huge asset bloat.
AI-written summary · about
chapters (24)
- 0:00Introduction
- 0:47Overview
- 2:18Agenda
- 3:19Enhance storytelling
- 3:47Web of storytelling
- 6:05The past
- 7:37Performance impact
- 8:58SVG CSS implementation
- 9:31SVG mental model
- 11:39SVG accessibility
- 13:47SVG responsiveness
- 16:18Browser friendly
- 17:02Inline SVG
- 17:31Issues with SVG
- 18:40SVG to animate
- 20:14Recap
- 21:29Complex shapes
- 21:45Infographics
- 22:12Clipping and masking
- 23:46Filters
- 25:48Paths
- 26:05Curves
- 28:11Lion animation
- 29:47Conclusion
related talks
52mCSS and SVG — The Dynamic Duo!
59mThe web design cheat code: Using SVG to bridge CSS’ gaps
31mAnimating SVGs
24mBreaking the norm with creative CSS
39mStyling and Animating Scalable Vector Graphics with CSS
45mUnlocking SVG’s Superpowers
29mStyling and Animating Scalable Vector Graphics with CSS
38mAdvanced animation with CSS in HTML and SVG to improve UX