I am starting to play with svg effects and animations and i found great example of how to apply blur effect to a svg path, but i have no idea how to set desired color instead of default black one.
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="4" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
As you can see in the included snippet i wanted to add lets say some green code of color to apply it as a blur color instead of black one, i was playing a little bit with svg docs but havent found working example.
Maybe someone could show how to implement color set in here ;)
var screenCorners = [
[50., 150.],
[450., 150.],
[350., 50.],
[ 150., 50.]
];
document.querySelector('#trapezoid').setAttribute('d', `
M ${screenCorners[0][0]} ${screenCorners[0][1]}
L ${screenCorners[1][0]} ${screenCorners[1][1]}
L ${screenCorners[2][0]} ${screenCorners[2][1]}
L ${screenCorners[3][0]} ${screenCorners[3][1]}
Z
`);
body {
background:#333;
}
svg {
width:500px;
height:200px;
position:absolute;
top:0;
left:0;
}
#trapezoid {
fill:none;
stroke:white;
}
<svg id="demo">
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feOffset dx="2" dy="4" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path id="trapezoid" filter="url(#dropShadow)"></path>
</svg>
In order to add color to your shadow you need to use . In this example the shadow is white.
var screenCorners = [
[50., 150.],
[450., 150.],
[350., 50.],
[ 150., 50.]
];
document.querySelector('#trapezoid').setAttribute('d', `
M ${screenCorners[0][0]} ${screenCorners[0][1]}
L ${screenCorners[1][0]} ${screenCorners[1][1]}
L ${screenCorners[2][0]} ${screenCorners[2][1]}
L ${screenCorners[3][0]} ${screenCorners[3][1]}
Z
`);
body {
background:#333;
}
svg {
width:500px;
height:200px;
position:absolute;
top:0;
left:0;
}
#trapezoid {
fill:none;
stroke:white;
}
<svg id="demo">
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur1" />
<feFlood flood-color="white" result="color"/>
<feComposite in="color" in2="blur1" operator="in" result="sombra" />
<feOffset dx="2" dy="4" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path id="trapezoid" filter="url(#dropShadow)"></path>
</svg>