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

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>

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 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>

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>