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 (1)

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/

πŸŒ™ Dark Mode?!

Β 
Turn it on in Settings