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


best-html5-courses-training-institute-delhi

Teacher

SANJAY JAIN

Category

HTML5 WORK

Some examples of SVG Shadow

1.First Example of SVG Shadow

Coding of this example

<svg height="250">
<defs>
<filter id="f1" x="0" y="0"> <feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="150" height="150" stroke="black" stroke-width="3"
fill="red" filter="url(#f1)" />
</svg>


2.Second Example of SVG Offset with Shadow

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 Offset with Shadow Color

Coding of this example

<svg height="250">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
<feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"/>
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="150" height="150" stroke="black" stroke-width="3" fill="red" filter="url(#f1)" />
</svg>


4.Forth Example of SVG Offset with Blur

Coding of this example

<svg height="250">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="30" dy="30" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="20" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect width="150" height="150" stroke="black" stroke-width="3" fill="red" filter="url(#f1)" />
</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