Support: Chrome/Opera/Edge (Animation is buggy since Chrome 75+)

Don’t get me wrong with the title: Houdini is JS-in-CSS (allow JS scripts to be called from CSS). Here, it is more like JS-inside-CSS. You can write the registerPaint ’s paint function, directly from CSS. You have access to:

ctx , the 2D rendering context

, the 2D rendering context geom , the geometry of the element

You can even write your own CSS custom properties, and use them from the JS code (thanks to @yuanchuan23 to come up with a solution using template strings)

JS-in-CSS.