Best HTML5 SVG Gradient Tutorials with Examples

 Courses / Web Development /HTML5 Tutorials

Welcome to the world of design in HTML5 SVG Gradient

HTML5 has a feature of gradient. There are two types of gradient in HTML5. one is linear and second is radial. we can fill any object with these gradients. So we have not to insert a image and file size can be reduced.

Some examples of SVG Linear/Radial Gradient

1.First Example of SVG Linear Gradient

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>

2.Second Example of SVG Linear Gradient

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>


3.Third Example of SVG Radial Gradient

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>

4.Forth Example of SVG Radial Gradient

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>
HTML5 Gradient Courses in Delhi