Creating an SVG filter icon1 min read

I find it easier tot write an HTML page than create a document or powerpoint presentation. Similarly it is easier for me to write SVG icons in XML rather than create one in photoshop. So here is my simple “SVG filter icon”

Start by opening the svg tag and give it a width and height of 100

Next lets add a circle with a radius of 50 and it’s center coinciding with the svg element’s.

svg-circle

Now lets add the filter icon using a polygon. We write the co-ordinates of each point of the filter icon, magics happens and we get a filter.

 

We start from the top left corner of the icon (20, 25) and trace its path through (80,25) (55,60) (55,75) (45,85) (45,60) and is finally joined back to (20, 25)

svg-filter

Complete SVG filter icon

Good day/night 🙂