Re: [css3-images] conical-gradient()?

Hi Lea,

I think it would be better to call this an angle gradient instead of
conical.
Conical gradients are just a special case of a radial gradient where the
midpoint of start and ending circle is different. (
http://www.webkit.org/blog/175/introducing-css-gradients/ uses the term
conic as well)

This seems like an edge case. Neither SVG or Illustrator implement such a
construct so it must not be that common.
There has been a discussion on adding mesh gradients to SVG which would
allow you to emulate a angle gradient.

Rik

On Mon, Mar 21, 2011 at 10:46 AM, Lea Verou <leaverou@gmail.com> wrote:

>  I've discussed this privately with Tab a while ago and since he thought
> it's a good idea, I figured I'd post it here to get wider feedback.
>
> Conical gradients (sometimes referred to as angle gradients) are gradients
> created by a line segment rotated around one of its endpoints (which forms
> the center of the gradient), while smoothly transitioning its color. There's
> not really a "gradient line" concept in those (like in linear or radial
> gradients), but an imaginary "gradient ellipse" instead, around the
> container box.
> Some visual examples of the effect can be found by googling<http://www.google.com/images?q=conical+gradient&um=1&ie=UTF-8&source=og&sa=N&hl=en&tab=wi&biw=1280&bih=636>its name.
> Those are quite common in graphic design, especially when combined with
> semi-transparent radial gradients on top. Photoshop and many other image
> editing applications offer such a gradient type out of the box. They are
> widely used in color pickers (for the hue wheel), starbursts, shiny metal
> textures and many other interesting effects. The twitter homepage also uses
> one on its header. Moreover, they can be used to make some patterns easier
> to code, like checkerboards.
>
> Its grammar could be something like:
> <conical-gradient> = conical-gradient(
>     [<bg-position>,]?
>     <color-stop>[, <color-stop>]+
> )
>
> <bg-position> having the same meaning as it does for radial gradients
> (where the center is).
>
> --
> Lea Verou (http://leaverou.me | @LeaVerou)
>
>