Slide 1
Slide 1 text
Make the Web Brighter
with
the CSS Paint API
Slide 2
Slide 2 text
Vitalii Bobrov
• 5+ years in front-end
• Angular Wroclaw co-org
• CSS experimenter
• mentor
• open-source contributor
@bobrov1989
https://vitaliy-bobrov.github.io/
Slide 3
Slide 3 text
Agenda
• What is the Houdini Project?
• Introduction to the CSS Paint API
• Practice & Experiments
Slide 4
Slide 4 text
Project Houdini
Slide 5
Slide 5 text
Houdini
Paint API
Slide 6
Slide 6 text
We want to use the
feature after browser
implementation....
We will implement the
feature when more
developers will use it...
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
CSS Engine Internals
Parser CSSOM Cascade
Layout Paint Composite
Slide 9
Slide 9 text
• Too Slow
• Too Big
• Too Incorrect
Polyfill with JS
Slide 10
Slide 10 text
Compile-time Polyfill
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Performance
Slide 13
Slide 13 text
Worklet
https://www.w3.org/TR/worklets-1/
Slide 14
Slide 14 text
CSS Paint API
Slide 15
Slide 15 text
ANY Property that expects an Image
• background-image
• border-image
• list-style-image
• custom ![]()
property
Slide 16
Slide 16 text
Use in CSS
Slide 17
Slide 17 text
https://ishoudinireadyyet.com/
Slide 18
Slide 18 text
CSS Fallback
Slide 19
Slide 19 text
Polyfill
https://github.com/GoogleChromeLabs/css-paint-polyfill
Slide 20
Slide 20 text
How to create Custom Paint?
1. Declare a custom paint class
2. Register paint
3. Load worklet
Slide 21
Slide 21 text
1. Declare a custom paint class
Slide 22
Slide 22 text
2. Register paint
Slide 23
Slide 23 text
3. Load worklet
Slide 24
Slide 24 text
Practice
Slide 25
Slide 25 text
☢
Don't Try this at Home
Slide 26
Slide 26 text
Paint Hello World
https://vitaliy-bobrov.github.io/css-paint-demos/hello-world/
Slide 27
Slide 27 text
Paint Hello World
https://vitaliy-bobrov.github.io/css-paint-demos/hello-world/
Slide 28
Slide 28 text
Paint Hello World
https://vitaliy-bobrov.github.io/css-paint-demos/hello-world/
Slide 29
Slide 29 text
CSS Paint + variables
https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-params/
Slide 30
Slide 30 text
CSS Paint + variables
https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-params/
Slide 31
Slide 31 text
CSS Paint + arguments
https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-args/
Slide 32
Slide 32 text
CSS Paint + arguments
https://vitaliy-bobrov.github.io/css-paint-demos/circles-with-args/
Slide 33
Slide 33 text
CSS Paint + alpha
Slide 34
Slide 34 text
Experiments
Slide 35
Slide 35 text
chrome://flags/#enable-experimental-web-platform-features
Slide 36
Slide 36 text
Generative Backgrounds
https://vitaliy-bobrov.github.io/css-paint-demos/pattern-bg/
https://vitaliy-bobrov.github.io/css-paint-demos/md-bg/
https://vitaliy-bobrov.github.io/css-paint-demos/responsive/
Slide 37
Slide 37 text
Star Rating
https://vitaliy-bobrov.github.io/css-paint-demos/star-rating/
Slide 38
Slide 38 text
QR Code
https://vitaliy-bobrov.github.io/css-paint-demos/qr-code/
Slide 39
Slide 39 text
Circle Chart
https://vitaliy-bobrov.github.io/css-paint-demos/circle-chart/
Slide 40
Slide 40 text
Bar Chart
https://vitaliy-bobrov.github.io/css-paint-demos/bar/
Slide 41
Slide 41 text
JS-in-CSS
https://vitaliy-bobrov.github.io/css-paint-demos/bar-js-in-css/
Slide 42
Slide 42 text
Animations
Slide 43
Slide 43 text
Request Animation Frame
https://vitaliy-bobrov.github.io/css-paint-demos/bar-animate/
Slide 44
Slide 44 text
Custom Properties
https://vitaliy-bobrov.github.io/css-paint-demos/circles-animation-with-custom-property/
Slide 45
Slide 45 text
Custom Properties Level 2
https://github.com/vitaliy-bobrov/postcss-register-custom-props
Slide 46
Slide 46 text
Resources
• https://developers.google.com/web/updates/2018/01/paintapi
• https://www.w3.org/TR/css-paint-api-1/
• https://www.w3.org/TR/worklets-1/
• https://www.w3.org/TR/css-properties-values-api-1/
• https://vitaliy-bobrov.github.io/blog/exploring-the-css-paint-api/
• https://css-tricks.com/the-css-paint-api/
• https://houdini.glitch.me/
Slide 47
Slide 47 text
Demos
• https://vitaliy-bobrov.github.io/css-paint-demos/
• https://blog.pervade.tech/houdini-css-paint-demo/
• https://css-houdini.rocks/
Slide 48
Slide 48 text
@bobrov1989
https://vitaliy-bobrov.github.io/
Thank YOU!