W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2017

Re: [csswg-drafts] [css-images] Add easing functions to color stops

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Tue, 09 May 2017 17:24:45 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-300240001-1494350684-sysbot+gh@w3.org>
Yes, the color hint creates a curve.  I'd really like to see better figures in the spec, but it uses the same math as a gamma correction curve like this one:

![An XY graph with a range of 0 to 1 on both axis. Three lines on the graph: a straight x=y line, a concave curve, and a convex curve.  Points at x=0.5 on each curve are connected, labelled by the y-values: 0.73, 0.5, and 0.218 for each.](http://2.bp.blogspot.com/-nnjemlYtN0c/Upb8LGtk9NI/AAAAAAAAADU/LRvgpU-CMQA/s1600/blog_graph.png)

That graph is showing paired encoding and decoding gamma curves for luminance adjustment, which isn't relevant to this discussion. 

But the shape of the curves is.  One axis would be the distance along the gradient and the other axis is the distance in color-space.  Normally, for an easing function the Y axis would be the color value, but for re-interpretting this graph as it's currently labelled, it's easier if you treat the X axis as the color value and the Y axis as the distance.  A midpoint color hint of 73% says to use the curve where 50% in color-space is positioned at 73% in the gradient distance.  A color hint of 21% says to use the curve where the mid-point color is positioned at 21% distance.

GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-300240001 using your GitHub account
Received on Tuesday, 9 May 2017 17:24:52 UTC

This archive was generated by hypermail 2.3.1 : Monday, 23 October 2017 10:12:53 UTC