JS-in-CSS

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
• 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 that come up with a solution using template strings: the backtick trick!)

.el {
  --color: cyan;
  --multiplier: 0.24;
  --pad: 30;
  --slant: 20;
  --background-canvas: (ctx, geom) => {
    let multiplier = var(--multiplier);
    let c = `var(--color)`;
    let pad = var(--pad);
    let slant = var(--slant);

    ctx.moveTo(0, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
    ctx.lineTo(0, geom.height);
    ctx.fillStyle = c;
    ctx.fill();
  };
  background: paint(background-canvas);
  transition: --multiplier .4s;
}
.el:hover {
  --multiplier: 1;
}