W3C home > Mailing lists > Public > public-css-archive@w3.org > August 2021

Re: [csswg-drafts] [css-images] Add easing functions to color stops (#1332)

From: Dan Burzo via GitHub <sysbot+gh@w3.org>
Date: Sun, 08 Aug 2021 11:57:35 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-894786614-1628423853-sysbot+gh@w3.org>
Some notes on [@Bryce-MW's comment](https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-826413982) above.

> As an aside, I saw that #4754 was closed as a duplicate of this but it's actually not!

The [comment in question](https://github.com/w3c/csswg-drafts/issues/4703#issuecomment-582695022) asks for _adding some facility for non-linear interpolation on each segment_, which the syntax for adding easing between two color stops allows, with `cubic-bezier()` being a particularly expressive one, in the absence of author-defined custom easings.

> With this proposal the line through color space will still be linear whereas I think that #4754 is proposing an arbitrary line through color space.

What makes a particular interpolation between colors straight or a curve in RGB space is whether the change happens at the same rate on all three dimensions (R, G, and B) identically. The easing function discussed in this proposal applies to each channel identically,  thus it produces straight lines between colors. 

The thing about _spline interpolation_ (the graphs you see in the first and third row in the attached image) is to produce these "easings" between adjacent colors while taking the bigger picture into account, so that the values match up at the seams. The result can still be decomposed in terms of a series of piecewise easings, but these easings are different for each channel (R, G, B) and thus produce a curve (more or less smooth) rather than a series of straight segments.

A graphical tool could users let serialize spline-interpolated gradients into a CSS syntax as long as you could have separate `cubic-bezier()` functions per channel, e.g.:

```css
linear-gradient(
  red, 
  cubic-bezier(...) / cubic-bezier(...) / cubic-bezier(...), /* red / green / blue */
  blue, 
  cubic-bezier(...) / cubic-bezier(...) / cubic-bezier(...), /* red / green / blue */ 
  green
)
```

...but this kind of syntax would be ridiculous to manage by hand.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Sunday, 8 August 2021 11:57:36 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:48 UTC