SVG gradient-radioactivity
SVG radioactive gradient- <radialGradient>
<radialGradient> elements are used to define radioactive gradients.
<radialGradient> labels must be nested in the <defs> on the inside. <defs> tag is an acronym for definitions that defines special elementssuch as gradients.
Example 1
Define a radioactive gradient from white to blue ellipse:
Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%"
fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"
/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
Code parsing:
<radialGradient>id attribute of the tag defines a unique name for the gradientOutermost circle defined by CX,CY and r attributes and innermost circle defined by Fx and Fy
The gradient color range can consist of two or more colors. Use one for eachcolor
<stop>label assignment.offsetproperty is used to define the start and end of a gradientPopulate the attribute to
ellipseelements are linked to this gradient
Example 2
Another ellipse that defines the radioactive gradient from white to blue:
Here is the SVG code:
Example
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="20%" cy="30%" r="30%" fx="50%"
fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);
stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"
/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>