<!DOCTYPE html>
<
html
>
<
title
>SVG Filter</
title
>
<
body
>
<
svg
width
=
"200"
height
=
"200"
>
<
filter
id
=
"feOffset"
x
=
"-40"
y
=
"-20"
width
=
"100"
height
=
"200"
>
<
feOffset
in
=
"SourceGraphic"
dx
=
"60"
dy
=
"60"
/>
<
feGaussianBlur
stdDeviation
=
"5"
result
=
"blur2"
/>
<
feMerge
>
<
feMergeNode
in
=
"BackgroundImage"
/>
<
feMergeNode
in
=
"SourceGraphic"
/>
</
feMerge
>
</
filter
>
<
rect
x
=
"40"
y
=
"40"
width
=
"100"
height
=
"100"
style="stroke: #000000; fill: red;
filter: url(#feOffset);" />
<
rect
x
=
"40"
y
=
"40"
width
=
"100"
height
=
"100"
style
=
"stroke: #000000; fill: red;"
/>
</
svg
>
</
body
>
</
html
>