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


Course

Teacher

SANJAY JAIN

Category

HTML5 WORK

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 course in delhi

HTML5 Course


Course Period : 1 Months

Training Type : Classroom(Offline) | Online | Home Tuitions


To Know About Course Please Call Me: 9212189563, 9212001563


Get in Touch

Feel free to talk to our representative at any time you please using our Contact Form on our website.

Visit Us

263, First Floor Pocket H-17, Sector 7, Rohini Near Rohini West Metro Station Opposite Metro Pillar No. 425 Delhi-110085

Visit Us

25, First Floor Pocket F-2, Sector 16, Rohini Delhi-110089

Call Us

9212189563


Call Us

9212001563

Fill the Contact Form

Graphics design

whatsapp