SVG RadialGradients

If you are interested into how radial gradients are drawn in SVG, you might want to have a look at the following file.

It shows a radial gradient, overlaid with the different features of the gradient (center, focal point and radius). It shows an animation of a circle used to compute the gradient, all points belonging to that circle, at the same instant, have the same color (see a formal definition here). In short, there are three interpolations going on: one determines the center of that construction circle, one the radius of that circle and one the color of circle stroke. If you dig in the file and uncomment the color animation, you should see that when the circle’s stroke color is animated, the stroke perfectly matches the gradient behind and is therefore not visible (inside the gradient circle).

I’ve put here another example of an edge case, when the focal point is located on the edge of the center defined by the gradient element.


Leave a Reply

Your email address will not be published. Required fields are marked *