Re: [css3-background][css-shapes] spread rounding

On 11/15/2013 10:18 AM, Lea Verou wrote:
> Sooo, after some discussion at TPAC after the recent F2F, some of us (fantasai, dbaron, plinss, me) decided that even though
> the edge cases about precision aren't that big of a problem, the currently defined behaviour results in abruptness when
> border-radius interpolates from 0 to any positive value. Therefore, we think the spread rounding should be changed to be
> defined as:
>
> spread rounding = border-radius + spread * ratio(x)
>
> where x = border-radius / spread and ratio() is a continuous strictly increasing function that is 0 when border-radius is 0
> and becomes 1 after a certain point. Therefore, it would still be 0 at 0 and mostly the same for small differences between the
> border-radius and the spread size, but would progressively increase when the border-radius is considerably smaller than the
> spread size.
>
> We tried many functions for what ratio() could be [1], and I made a demo of the three best ones that you can find here [2]. We
> think Cubic works best, which is 1 + (x-1)^3 in [0,1] and 1 when x > 1. Not only this makes interpolation smoother, but it
> also is more aesthetically pleasing, which reduces the need for manual ”filleting” (as demonstrated in [3]).

Given the results from
   http://dev.w3.org/csswg/css-backgrounds/spread-radius
and how much better the outer edge looks with the cubic
interpolation, I'm thinking we should do the same for
the margin box curve for Shapes.

Alan, thoughts?

~fantasai

Received on Monday, 18 November 2013 18:48:11 UTC