Creating a Pencil Effect in SVG

Using the feTurbulence and feDisplacementMap filters, Scott Turner make his SVG line-drawings look like they’re pencil-on-paper-like drawings:

See the Pen SVG Pencil Filter #1 by Scott Turner (@srt19170) on CodePen.

Creating a Pencil Effect in SVG →

💡 If you constantly randomize the turbulence you can create squiggles using SVG or even recreate a heat shimmer effect with SVG

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.