- From: Alan Gresley <alan@css-class.com>
- Date: Sat, 25 Jan 2014 12:03:09 +1100
- To: Jasper van de Gronde <th.v.d.gronde@hccnet.nl>, "Tab Atkins Jr." <jackalmage@gmail.com>
- CC: www-svg <www-svg@w3.org>
On 25/01/2014 4:49 AM, Jasper van de Gronde wrote: > On 01/24/2014 05:48 PM, Tab Atkins Jr. wrote: >> On Fri, Jan 24, 2014 at 12:48 AM, Jasper van de Gronde >> <th.v.d.gronde@hccnet.nl> wrote: >>> I once suggested generalizing radial gradients to also allow conical >>> and/or >>> "spiral" gradients. Essentially the idea is that radial gradients >>> give you >>> the radius part of polar coordinates, while conical gradients are >>> essentially based on the angle part. A scheme that combines the two >>> would >>> allow for a kind of spiral gradient. >> >> Radial and conical gradients are "inverses" of each other in a sense, >> and you don't want to try overloading a single syntax construct to do >> both of them. >> >> (Radials position colors on a line, and color ellipses based on where >> they touch the line. Conicals position colors on an ellipse, and >> color lines based on where they touch the ellipse.) > > I wouldn't say they are each other's inverse exactly. To clarify, this > was the original idea (with some examples): > http://www.svgopen.org/2011/papers/20-Separating_gradients_from_geometry/#d4e65 > > As in that paper I used an increased separation of concerns it is not > completely comparable to the current SVG spec, but the essence is that > you can have a smooth (and useful) transition between, borrowing your > terminology, having colours positioned on a line and having them > positioned on an ellipse (line <-> spiral <-> ellipse). I have opposed the name 'conic' from the beginning [1] since it' more circular. A radial gradient transitions along the radius of a circle or ellipse where a conic gradient transitions along the circumference of a circle or ellipse. The word *circum* when entered as a search query in Wikipedia redirect to the Wikipedia entry for circle [2]. > Whether in practice you want to create a spiral gradient is another > matter of course, but since it would be relatively easy to define (and > implement) a kind of "polar" gradient that encompasses radial, spiral > /and/ conical gradients, it seems a shame not to at least consider it. I can't see how combining both a radial and conic gradient would allow for a kind of spiral gradient. A spiral gradient is more like a repeating radial gradient. What you don't cover is something like a turbine [3] which is a repeating conic gradient. What both a spiral and turbine have is what a repeating radial gradient or repeating conic gradient don't have and that is curvature that deviates from the direction of a radius or circumference. This curvature can be expressed as a golden ratio [4] so a phi function is part of what could be needed but there also needs to be a direction like clockwise or anticlockwise. Due to the nature of a spiral, a length like a pixel would be a poor choice compared to something like a percentage. The below could produce a golden spiral. repeating-radial-gradient(white 0%, black 100% / 1.618 anticlockwise) But doing the above does rule out the use of a forward slash for another operator. Also there are two parts of a gradient transition in a spiral. This can be understood by thinking of a linear curved and having an inner-side and an outer-side (depended on clockwise direction). inner | outer | x xx X XX | o oo O OO | I'm not proposing the use of ratio in the CSS gradient syntax but I'm using it for the sake of an example. ratio-radial-gradient(1.618 anticlockwise, white 50%, black 0% / red 0%, blue 50%) The forward slash makes more sense when used to distinguish inner from outer for a spiral. It is also more author friendly. 1. http://lists.w3.org/Archives/Public/www-style/2012Aug/0317.html 2. http://en.wikipedia.org/wiki/Circum 3. http://www.hydrotu.com/photo/pl430630-vertical_large_francis_hydro_power_turbine_for_frequency_50hz_60hz.jpg 4. http://en.wikipedia.org/wiki/Golden_spiral Alan -- Alan Gresley http://css-3d.org/ http://css-class.com/
Received on Saturday, 25 January 2014 01:03:43 UTC