Re: [css3-images] simplifying radial gradients

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:05 UTC

On 12/10/2011 3:58 AM, Tab Atkins Jr. wrote:
> On Mon, Oct 10, 2011 at 2:32 PM, Brad Kemper<brad.kemper@gmail.com>  wrote:
>> On Oct 7, 2011, at 4:07 PM, "Tab Atkins Jr."<jackalmage@gmail.com>  wrote:

>>> Most of the patterns in Lea's gallery don't use any sizing or
>>> positioning at all, only color-stops, and so are equally doable with
>>> either the current syntax or Brad's suggested change.  They would all
>>> need their color-stop positions divided by sqrt(2), though, as Brad's
>>> suggested default sizing behavior is "contain".
>>
>> IIRC, converting them is a matter of multiplying by 1.72 (or thereabouts).
>
> 1.41, which is approximately sqrt(2).

2 squared = 1.414213562373095 / 0.02 = 70.71067811865475

The below test shows what I believe (along with Brad) should be the 
default behavior for radial-gradient which would be contain or closest-side.

<!DOCTYPE html>

<style type="text/css">
html, body {height: 100%; margin: 0;}
body {
   background: -webkit-radial-gradient(blue 70.71067811865475%, white 
70.71067811865475%);
   background: -moz-radial-gradient(blue 70.71067811865475%, white 
70.71067811865475%);
   background: -ms-radial-gradient(blue 70.71067811865475%, white 
70.71067811865475%);
}
</style>

This is also the default behavior for an SVG.

http://css-class.com/test/svg/ellipse/intrinsic.svg

-- 
Alan Gresley
http://css-3d.org/
http://css-class.com/