[css-shapes-2] Order of points and control points in `shape()`

[smfr]

In #5841 we resolved that the points and the control points could be specified in any order, e.g. these are equivalent:

curve using 10px 30px by 20px 20px
curve by 20px 20px using 10px 30px

I'm having second thoughts. The by or to affect the interpretation of the control point coordinate pairs; they are either absolute (relative to the reference box), or relative to (the current point). So it's odd to specify the control points before you've given the by or to.

I think we should revert this part of the change.

[smfr]

@noamr

[noamr]

@smfr I think I've reached a similar but slightly different conclusion.
I think it's important to have by or to before the control points, but also it makes more sense to have the control points before the final point.

What do you think of #10644 (comment)?
Basically it's ordered, but the control points come first, and you can swap from by to to at any point.

clip-path: shape(from top left,
  hline by 100px,
  curve by 100px 50px / to right bottom,
  curve by 50px 50px / 10% 20% / var(--x) var(--y),
  curve by 50px 50px / 10% 20% / to bottom 50%,
  smooth to bottom left / 0 0,
)

We can play with the exact syntax/separators.
This also allows using position in control points without losing the flexibility of by.