W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: [css4-images] repeating-conic-gradient was (First draft of css4-images, feedback requested)

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 9 Aug 2012 09:21:17 -0700
Message-ID: <CAAWBYDCVoxsKF6zkb9P+WJVyOmcuoKrYcqS6FbO-gw4jMGBfFw@mail.gmail.com>
To: Alan Gresley <alan@css-class.com>
Cc: www-style list <www-style@w3.org>
On Thu, Aug 9, 2012 at 5:40 AM, Alan Gresley <alan@css-class.com> wrote:
> On 7/08/2012 10:02 AM, Tab Atkins Jr. wrote:
>> * Added conic-gradient() function
> Liking very much. About repeating conic gradients. What happens with the
> interpolation of color when angles similar to below are given?
> repeating-conic-gradient(white 0deg, red 100deg)
> Once it makes it way around and back to 360 degrees you will have one uneven
> span between two color stops (the last possible one and the first one). Like
> so.
> white    0deg
> red    100deg
> white  200deg
> red    300deg
> white  400deg  <-- outside of possible range
> The same would apply to values like 0% being followed by 30%.
> white     0%
> red      30%
> white    60%
> red      90%
> white    120%  <-- outside of possible range

You just follow the spec.  Only colors between 0deg and 360deg (or 0%
and 100%) are painted, but color-stops can be placed anywhere on the
gradient line, and they can affect interpolation.

(Note that your expansion is incorrect - the next "virtual" white stop
is at 100px, not 200px.  I'll assume you meant to write out "white
0deg, red 100deg, white 200deg" in the original function.)

So, repeating-conic-gradient(white 0deg, red 100deg, white 200deg) is
exactly equivalent to conic-gradient(white 0deg, red 100deg, white
200deg, red 300deg, #f99 360deg);

As Sebastian says, this is exactly the same behavior as
repeating-radial-gradient(), which doesn't paint any color below 0%.

Received on Thursday, 9 August 2012 16:22:09 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:50:26 UTC