W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2019

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

From: Eric A. Meyer via GitHub <sysbot+gh@w3.org>
Date: Thu, 18 Apr 2019 15:43:36 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-484567064-1555602215-sysbot+gh@w3.org>
On the subject of mathing out midpoints versus easings, I created (with a _huge_ assist from Tab, who quickly wrote the JS it’d have taken me forever to puzzle out) a couple of demonstrations of how midpoints compare to cubic-bezier easing.

The first compares simple one-way easings to closely-equivalent midpoint gradients:

https://codepen.io/meyerweb/pen/GLQOqB

To be clear, the midpoint gradients are **not** mathematically equivalent to the eased gradients.  They’re visually very close, and probably quite close in terms of the raw color values, but they’re not in 1:1 correspondence.

The second compares symmetric gradients with midpoints versus easing:

https://codepen.io/meyerweb/pen/oOqqmE 

Again, the two approaches yield very similar results because of all the color-stop and midpoint fiddling I did, but they are **not** 1:1 equivalent.  And I’m not about to claim my color-stop/midpoint versions are the most efficient or mathematically best approaches.  I did what any author would do, if they were sufficiently motivated to do this at all: I set some stops and manually tweaked midpoints until I got a close match.

-- 
GitHub Notification of comment by meyerweb
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1332#issuecomment-484567064 using your GitHub account
Received on Thursday, 18 April 2019 15:43:41 UTC

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