Hand drawn sketch effect in SVG with feDisplacementMap

Hand

This week I got a request from my mate Stuart in work. He wanted to see the Car Seat Headrest - Twin Fantasy cover done in SVG.

Clearly the challenge here is the hand drawn effect. Vector tools arent famed for their spontaneity, so how can we get this done?

Luckily, as we've been learning, SVG on the web is often just as good or better than your design tool of choice.

Here are the links you need.

CodePen: https://codepen.io/loficodes/pen/XOvzbw

MDN feDisplacementMap: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap

Sara Soueidan feDisplacementMap: https://tympanus.net/codrops/2019/02/12/svg-filter-effects-conforming-text-to-surface-texture-with-fedisplacementmap/

CSS Tricks - How SVG Line Animation Works: https://css-tricks.com/svg-line-animation-works/