I’ve been seriously enjoying (d3.sketchy)[https://github.com/sebastian-meier/d3.sketchy] lately, which gives you great functions for making sketchy looking shapes. But sometimes you want some simple sketchiness and you don’t want to rely on clipping or maybe you just want to better understand native SVG path functions.
So here are a couple “cheap” sketchy functions. One is a sketchy outline that uses jitter to make the line less sure, the other a sketchy fill that draws a line from one part of the path outline to another. Notice the sketchy fill doesn’t do such a good job with more irregular polygons.
What I do like about these cheap functions is that because they rely on the actual DOM node, you just point it at the existing path and it handles the rest.
You can drag the shapes if you want to see cheap animated sketchiness.