SVG Filters Bring Pencil Strokes to Vector Graphics
Vector graphics usually look too clean and precise to mimic a hand-drawn pencil mark. As Scott Turner explains on his blog about procedural map generation, a realistic stroke would require “tens of thousands of different elements,” with each tiny gray blob defined separately.
The workaround is <feTurbulence>, an SVG filter that adds the necessary noise and variation. Turner covers the technique in a dedicated post on his site.
It’s a clever fit for the so-called “Squigglevision” effect, which we’ve explored previously alongside other SVG filter tricks.
