What is Radial Gradients in SVG?

radialGradient is an element of SVG that allows authors to define radial gradients to fill or stroke graphical elements.It produces a ring (or rings) of color instead of stripes.Here is sample code to define an ellipse with a radial gradient from blue to red:

 

<svg height="150" width="500">

<defs>

<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

<stop offset="0%" style="stop-color:rgb(0,0,255);

stop-opacity:0" />

<stop offset="100%" style="stop-color:(255,0,0);stop-opacity:1" />

</radialGradient>

</defs>

<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

</svg>