A Tale of Four Properties
summary
Builds a They Might Be Giants fan site that actually works: lyrics angled by a shape-outside polygon, animated floats that morph only when polygons share the same point count, a big round “universe man” belly driven by an animatable ellipse, a flying “particle man” moved by offset-path with path() lifted from SVG path D data, and hover reveals using clip-path + SVG mask. Demos run in modern browsers but shape-outside won’t accept path data, offset-path only takes path, and raster URLs behave inconsistently.
AI-written summary · about
chapters (24)
- 0:00Intro
- 1:15Flood
- 3:20Fan Site Time
- 5:35Floats
- 6:50Shape Outside
- 8:25Shape Outside Animation
- 13:15Shape Outside Layout
- 14:35Person
- 15:50Browser Support
- 16:30Motion Path
- 19:00Paths
- 22:10Offset Path
- 27:00Clip Path Demo
- 35:00SVG
- 35:24SVG vs Smile
- 36:53SVG vs CSS
- 38:11SVG drawings
- 39:10Song
- 39:48Polygons
- 40:21Animations
- 40:39Path
- 41:28Rain
- 41:41Progressive Enhancement
- 42:27Outro
related talks
24mBreaking the norm with creative CSS
59mThe web design cheat code: Using SVG to bridge CSS’ gaps
26mCSS animation Today (2021 Edition)
27mCSS Variables A New Hope
39mBuilding Better Interfaces With SVG
32mStunning visuals with Maths and...no JavaScript?
31mSurprise and delight: CSS + SVG
28mCSS Animation - Beyond Transitions