search

googlefonts / colr-gradients-spec

63 stars 8 forks source link

[COLRv2] Smoother gradients #373

Open underware opened 1 year ago

underware commented 1 year ago

In COLRv1, linear, radial, and sweep gradients are interpolated linearly. This can produce sharp 'bands' (see top row). How could this challenge be solved the most easily in COLRv2? In the bottom row, for example, you can see an ‘HOI’ style solution using two layers blended with PaintComposite. But obviously, that's not always practical. It would be much better if there were an additional PaintLinearGradient, with the option to choose between different interpolations (linear, spline interpolation...).

Screenshot 2023-08-17 at 11 58 12

In addition, I am wondering if it would make sense to add color-interpolation-methods to COLRv2. https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method

rsheeter commented 1 year ago

Vigorously agree we need better interpolation options. Do you think it would be fair to call this a duplicate of https://github.com/googlefonts/colr-gradients-spec/issues/356?

underware commented 1 year ago

I'm not sure. I think there are two challenges: color spaces and the interpolation algorithms. With the options provided by the CSS color-interpolation-method (offering access to different color spaces), it is still challenging to achieve a smooth gradient (see examples below). Ideally, you would have better control of the interpolation. See also here: http://tavmjong.free.fr/SVG/MESH/Mesh_Boundaries.html

Screenshot 2023-08-18 at 10 25 03
behdad commented 1 year ago

Vigorously agree we need better interpolation options. Do you think it would be fair to call this a duplicate of #356?

I'm not sure it is either.

behdad commented 1 year ago

This seems more like https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function but for the color-line.