W3C home > Mailing lists > Public > www-style@w3.org > March 2011

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

From: Rik Cabanier <cabanier@gmail.com>
Date: Mon, 21 Mar 2011 14:49:22 -0700
Message-ID: <AANLkTimikeX34ecmVwuc-_ivn7OZBLWLdasU=cmCXqTk@mail.gmail.com>
To: Lea Verou <leaverou@gmail.com>
Cc: www-style@w3.org
Hi Lea,

I think it would be better to call this an angle gradient instead of
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.


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)
Received on Monday, 21 March 2011 21:49:59 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:57 UTC