Below are some examples and scripts for clip arts in SVG
This next example is little different from the previous one, here I have tried to make out drop shadow effect in clip art.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>SVG Blur Art</title>
<style>
ellipse{
stroke:yellow;
fill: blue;
stroke-opacity: 1;
filter: url(#blurEffects2);
stroke-width: 8;
}
rect{
stroke:red;
stroke-width:3;
fill:green;
filter:url(#blurEffects1);
}
</style>
</head>
<body>
<h2>Example of SVG Blur Art</h2>
<svg height="150" width="150">
<defs>
<filter id="blurEffects1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="35" />
</filter>
</defs>
<rect x="20" y="20" width="120" height="100" />
</svg>
<svg height="400" width="500">
<defs>
<filter id="blurEffects2" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
</defs>
<ellipse rx="100" ry="50" cx="100" cy="90" />
</svg>
</body>
</html>This next example is little different from the previous one, here I have tried to make out drop shadow effect in clip art.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SVG Dropping shadow</title>
</head>
<body>
<h2>Example of Drop Shadow art</h2>
<svg height="130" width="130">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur stdDeviation="5" />
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="110" height="110" fill="lightgray" filter="url(#filter)" />
<rect width="100" height="100" fill="blue" stroke="green" stroke-width="4" />
Syour browser does not support inline SVG.
</svg>
</body>
</html> 
No comments:
Post a Comment