SVG Radial Gradient

SVG radial gradient is used to represent the circular transition of one color to another.

The <radialGradient> element defines the radial gradient. We can use the <radialGradient> element within <defs> element.

Example

Explanation

• The id attribute defines a unique name for the gradient.
• The fx and fy define the innermost circle and cx, cy and r attributes define the outermost circle.
• A gradients color range may be composed of two or more colors and each color contains a tag. The offset attribute define that where the gradient color start and end.
• The fill attribute is used to link the element of eclipse to the gradient.