[csswg-drafts] [css-shapes] New `<shape-command>`: `plot` do draw graphs (#12224)

Crissov has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shapes] New `<shape-command>`: `plot` do draw graphs ==
If you are somewhat like me, you never quite got the grip of Bézier curves with their control points, but you have a good understanding of plots, i.e. graphs of functions, continuous ones in particular. CSS has now gained [several ones](https://drafts.csswg.org/css-values-4/#math) for trigometry and polynomials, as well as numeric constants `e` and `pi`. Furthermore, custom functions are being specified right now.

Most [`shape()` commands](https://drafts.csswg.org/css-shapes-2/#funcdef-shape) draw from the current, start point to an absolute or relative end point. The proposed `plot` is no different. In the degenerate case without any function specified, it equals `line`. 

We need to define an interval from the graph, say [*a*, *b*], that is to be scaled to the length from start to end point. Although we can adjust any function with offsets and scale factors so *a* and *b* equal, say, `0` and `1` (or `0%` and `100%`), respectively, it seems more author-friendly to select them from the unscaled range, e.g. [−2π, +2π], although defaulting *a* to `0` seems sensible.

Within the function, there needs to be something new: a variable that runs from *a* to *b* and does not use `var()`, intuitively this would simply be called `x`. I'm pretty sure that authors would find many creative uses if all kinds of relative units were available within this formula. (Personally, I would be fine without.)

While the direction and scale of the *x* axis is given by *a* and *b*, there needs to be a convention where *up* and *down*, i.e. positive and negative *y* axis are.

## Example
~~~~ css
shape( plot to x-end with sin(x) from 0 to 2*pi )
~~~~

## Preliminary grammar
~~~~ ebnf
<shape-command> = … | <plot-command>

<plot-command> = plot <command-end-point>
        [ with <expression> [ [ from <number> ]? to <number> ]? ]?

<expression> = <math-function-name>( <calc-sum> | <expression> )

<calc-keyword> = … | x
~~~~

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12224 using your GitHub account


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

Received on Thursday, 22 May 2025 16:29:40 UTC