You would need to create the icon as two parts, overlay them using absolute positioning, then blur the top element using filter: blur(5px) if you wanted a 5px blur. This will not work properly in IE11 (surprise, but no biggie) or Firefox (surprised! c'mon Firefox!).
Here is a quick example I worked up using an SVG created with two simple shapes. This does not need absolute positioning as they're contained in an SVG group.
I realize now looking at your example, this isn't exactly what you were looking for, the concept would be a bit different using clipping paths perhaps. If I have time later I'll see if I can work that up as an example.
Okay, updated the codepen above, now you'll see there are two triangles but one is a clip path of the circle (roughly, zooming in will expose the top portion isn't perfectly aligned) and that is the only part being blurred now.
There are likely way easier ways to accomplish this but this is a way I suppose.
Thank you so much for solutuon))
For the first look, it's looking pretty similar I thought it could be done without SVG
but this solution also ok. First I need to learn SVG stuff
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
You would need to create the icon as two parts, overlay them using absolute positioning, then blur the top element using filter: blur(5px) if you wanted a 5px blur. This will not work properly in IE11 (surprise, but no biggie) or Firefox (surprised! c'mon Firefox!).
Here is a quick example I worked up using an SVG created with two simple shapes. This does not need absolute positioning as they're contained in an SVG group.
I realize now looking at your example, this isn't exactly what you were looking for, the concept would be a bit different using clipping paths perhaps. If I have time later I'll see if I can work that up as an example.
Okay, updated the codepen above, now you'll see there are two triangles but one is a clip path of the circle (roughly, zooming in will expose the top portion isn't perfectly aligned) and that is the only part being blurred now.
There are likely way easier ways to accomplish this but this is a way I suppose.
Thank you so much for solutuon))
For the first look, it's looking pretty similar I thought it could be done without SVG
but this solution also ok. First I need to learn SVG stuff