HTML5 Course by a Famed best HTML5 Course courses in Delhi & HTML5 Course Training Courses Institute in Delhi

Coding of this example

<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:red;stop-opacity:.7" />
<stop offset="50%" style="stop-color:blue;stop-opacity:.7" />
<stop offset="80%" style="stop-color:yellow;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="300" height="100" fill="url(#grad1)" />
</svg>

Coding of this example

<svg>
<linearGradient y2="0.7067" x2="0.5" id="g" spreadMethod="repeat"
gradientTransform="rotate(-7.79,0.4033,0.45) translate(0,0.027) scale(1,0.94)" x1="0.3133" y1="0.46">
<stop stop-color="#F00" offset="0"/>
<stop stop-color="rgb(121, 76, 255)" offset="0.3433"/>
<stop stop-color="#0F0" offset="0.57"/>
<stop stop-color="#00F" offset="0.79"/>
<stop stop-color="#F0F" offset="0.98"/>
</linearGradient>
<rect width="100%" height="100%" fill="url(#g)"/>
</svg>

Coding of this example

<svg id="svgelem" height="250">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop stop-color="#F00" offset="0"/>
<stop stop-color="rgb(121, 76, 255)" offset="0.3433"/>
<stop stop-color="#0F0" offset="0.57"/>
<stop stop-color="#00F" offset="0.79"/>
<stop stop-color="#F0F" offset="0.98"/>
</radialGradient>
</defs>
<ellipse cx="150" cy="100" rx="150" ry="1000" style="fill:url(#gradient)" />
</svg>

Coding of this example

<svg id="svgelem" height="350">
<defs>
<radialGradient id="gradient2" cx="50%" cy="50%" r="50%" fx="100%" fy="50%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="0.3433"/>
<stop stop-color="red" offset="0.57"/>
<stop stop-color="white" offset="0.79"/>
<stop stop-color="black" offset="0.98"/>
</radialGradient>
</defs>
<ellipse cx="150" cy="150" rx="150" ry="150" style="fill:url(#gradient2)" />
</svg>