DEV Community

loading...
Cover image for Image To Line Art Using CSS

Image To Line Art Using CSS

codingdudecom profile image codingdudecom ・1 min read

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.

Discussion (0)

Forem Open with the Forem app