Building Better Interfaces With SVG
summary
Argues SVG beats CSS for actual UI work with concrete examples: stroke-dashoffset line-drawing powers animated checkboxes that remove a sprite HTTP request; radial menus use true sector paths (three points + radius) rather than box hacks, and a circular SVG generator eases icon placement; goo effects combine feGaussianBlur + feColorMatrix + feComposite to merge blobs; text uses defs + linearGradient or masks for selectable, scalable fills; d3.js and CodePen demos show charts and motion-along-paths that remain accessible while canvas does not.
AI-written summary · about
chapters (17)
- 0:00Start
- 4:08screen sizes
- 5:18start with a comparison between css and svg methods
- 7:04animate spg's transformations
- 8:49drawing a shape using an svg path
- 9:40creating arbitrarily shaped ui components
- 12:00create radial menus
- 12:24checkboxes in order to style a checkbox
- 12:47hide the checkbox
- 17:07add a visual elastic effect
- 18:32applying a filter text
- 19:47defining a linear gradient
- 22:15filters primitive filters
- 26:46animate the text along a path
- 27:08animate elements along arbitrary paths
- 29:14apply multiple colors to an icon
- 33:42create data visualizations
