Yes, I'm aware of this API, but that's exactly the problem (IMHO): it's an API, not built right into CSS itself, thus forcing you to use JavaScript.

What I really want is something along the lines of...

    @declare-some-shape MYSHAPE (ARGS) {
        /* tree of draw commands */
        /* can reference css animations, timelines, variables, etc. */
    }
    
    #my-div { content: draw-some-shape(MYSHAPE ARGS, TRANSFORM); }

    /* or, as some kind of pseudo-element: */
    #my-div::draw-some-shape(MYSHAPE) { ??? }

And yeah, fully aware that this looks abominable, but I'd rather this than stringly/DOMly generating SVGs or drawing in a canvas.