Make the Web Brighter with the CSS Paint API
summary
Shows how to build real, reusable paint generators that run off the main thread: define a class with paint(context, geometry, properties, args), call registerPaint('name', Class), and load it as a worklet so rendering runs in Paint Worklet thread (Chrome 65+/Opera; polyfill available). Demonstrates concrete examples — circles, animated star ratings, QR codes (using a QR library), bar charts and a particle progress bar — and registers typed properties with CSS.registerProperty(...) so values animate smoothly.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 1:04What is CSS Paint API
- 7:52Why use CSS Paint API
- 10:44Create custom paint
- 14:37Simple paint example
- 16:24CSS variables
- 18:18Using arguments
- 20:27Performance optimization
- 21:34Background generation demo
- 22:43Rating stars
- 23:51QR code generation
- 25:16Charts and graphs
- 26:53Storing data in CSS
- 28:44Animation in CSS Paint
- 29:49Custom CSS variables
- 31:37Animating variable types
- 33:07CSS plugin for variables
- 34:19Particle demo
- 36:56Resources and conclusion
related talks
32mMake the Web Brighter with the CSS Paint API
30mMake the Web Brighter with the CSS Paint API
39mMake the Web Brighter with the CSS Paint API
33mThe Weird — Yet Practical — World of Paint Worklets
12mExtending CSS with Houdini
31mCreating magic with houdini
46mGetting extra with CSS Houdini
47mPainting With the Web