Hand drawn sketch effect in SVG with feDisplacementMap
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.
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/
If you enjoyed this article, sign up here to get new articles whisked straight to your inbox!