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

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