The web design cheat code: Using SVG to bridge CSS’ gaps
summary
Shows concrete techniques: embed SVG data URIs in CSS to paint characters and emojis, include internal <style> to run CSS animations, and use stroke-dasharray with animating stroke-dashoffset to make marching ants. Uses gradients via URL IDs (remember to escape # as %23), feTurbulence plus feDisplacementMap to produce scribble effects, and SMIL animate seed for Squigglevision. Notes gotchas: viewBox and units, var() and url() limitations so whole-URL vars or preprocessors help, browser quirks in Firefox and Chrome, and the squiggle animation is relatively heavy on CPU.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 10:30What can we use it for
- 15:00Preprocessors
- 19:20List bullets
- 23:03Rectangle
- 28:36Gradient
- 35:31Filters
- 42:53Squiggle Vision
- 49:04SVG to HTML
- 51:41Recap
