Re: [csswg-drafts] [css-transforms-2] proposal: new "transform: bend();" function (#6293)

I'll note that this `bend()` function is *not* a transform function - it doesn't decompose to a matrix transform, as all transform functions do (because they're all [affine transforms](https://en.wikipedia.org/wiki/Affine_transformation)).

This is instead some variety of vertex shader, warping a box (decomposed into triangles at some resolution) into a different shape, and thus is likely part of the (abandoned) Custom Filters spec <https://drafts.fxtf.org/custom/>.

-------

More importantly, however, is establishing what the use-cases for this are. Mentioned in the comments is the idea of using this to stretch a progress element around a circle, but I don't think it's clear that such use-cases actually want to use this sort of mechanism, where an element's contents would get stretched in non-linear ways.

If you want to animate a wedge growing around a circle, a combination of `conic-gradient()` (to get the color wedge) and `clip-path` (to clip out the center, if you want an arc rather than a wedge) can accomplish this pretty easily.

If you're doing anything more complex than a simple color block, like an outlined line advancing around a circle, this sort of warping is *not* when you want, because it affects the various dimensions in different ways - the outline would get stretched at the "sides" as it extends around to be larger than the inner/outer part of the outline. You instead probably want to animate an SVG path more directly, so you have proper control over the geometry without the undesirable visual warping.

But once we've knocked out these use-cases, I don't see any other major use-cases; that is, cases where a reasonable number of authors are trying to do something but are currently blocked, such that it's worth adding new functionality to the language. It seems very unlikely that you want text warped like this, for example - what you probably want instead is to lay out text along a path (circular or otherwise) *without* warping it, which you can do with SVG already.

-- 
GitHub Notification of comment by tabatkins
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6293#issuecomment-1419958535 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 6 February 2023 23:52:17 UTC