SVG Radial Gradient in HTML

SVG Radial Gradient in HTML

All SVG filters are defined by < defs > element. It is used for the definition of the filter which is to be used.

The < filter > element is used to define an SVG filter. The element has a required id attribute that identifies the filter.

A gradient is a smooth transition from one color to another. Moreover, we can apply several color transitions to the same element.

The < radialGradient > element is used to define a radial gradient. Like filters, it must also be nested in < defs > tag.

Code explanation of code below is as:-

• The id attribute of the < radialGradient > tag defines a unique name for the gradient.
• The cx, cy, and r attributes define the outermost circle, and the fx and fy define the innermost circle.
• Each color is specified with a < stop > tag. The offset attribute is used to define where the gradient color begins and ends.
• The fill attribute links the ellipse element to the gradient.