Re: [csswg-drafts] [css-images-4] Add ability to change radial gradient focus

@bradkemper This is unrelated to background position.  It's about creating asymmetrical gradients.

Some examples of what off-center focal points look like, using the SVG syntax, so people know what we are talking about (click on screenshot to go to code version):

[![Nine radial gradients, in a grid, each one stretched to a different side.](http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/ch09-radialGradients-files/focal-vs-center-grid.PNG)](http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/ch09-radialGradients-files/focal-vs-center-grid.svg)

A real off-center SVG gradient (left), versus faking it with multiple layered CSS gradients:
[![Two spherical shapes with a lighting effect, one of them much more smoothly lit than the other.](http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/ch09-radialGradients-files/css-faux-lighting-sphere.PNG)](http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/ch09-radialGradients-files/css-faux-lighting-sphere.html)

All the the major rendering engines already support this for SVG (except that WebKit doesn't support repeating SVG gradients).

For me, the spherical shading effect is the most practical use-case.  But the off-center repeating gradients are fun, too.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1575#issuecomment-317295764 using your GitHub account

Received on Monday, 24 July 2017 01:02:41 UTC