Inspired by the Line Art Photoshop action by PhotoshopSupply.com I decided to give it a try and create a similar line art effect from a photo by using SVG filters and CSS.

I also used some JS, but that's not necessary for the effect, I only added it for allowing live changes to the settings of the line art SVG filter. This photo effect looks very similar to the find edges or contour algorithms.

Basically, I am combining an inverted, blurred version of the photo with the original photo and applying the dodge color blending mode. The higher the blur applied, the wider the lines become. Also, at the end I'm applying a sharpening effect to get more definition on the line art.

Click on the image to toggle between the original image and the line art effect.