DEV Community

Cover image for Image To Line Art Using CSS
codingdudecom
codingdudecom

Posted on

Image To Line Art Using CSS

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.

Top comments (2)

Collapse
 
aaronsmith9797 profile image
Aaron9797221

Great! I love this kind of product. And I have another online website to share with you. It's the VansPortrait from VanceAI (vanceai.com/). This AI-based converter can help you turn photos into line drawings, stencils, sketches, and anime portraits in 5 seconds. really incredible, just have a try vanceai.com/photo-to-sketch/

Collapse
 
shane_lan_4b4e784af60b780 profile image
shane lan

cool! I am going to practise and use it on viduhug, i beleive it will make the image looks more attractive!