How can I turn crisp/clean diagrams I create on my computer, into diagrams that look like these:

enter image description here

enter image description here

Notice how the lines are "coarse", they look like ink which has been soaked into grainy paper, they are quite imperfect lots of variability.

How do I apply such an effect to the lines over an entire diagram I may have created using straight-line, "perfect" rectangles, arrows etc.?

I don't know what the vocabulary for this is so it's been hard for me to research (and I am also lost now as to what tags to add to this question haha).

The only image processing program I have installed right now is ImageMagick, and I should have access to Affinity Photo. A solution using these would be the best for me.


If I were tasked with creating hand-drawn-looking diagrams, I'd use a library like Rough.js or roughVis.js to do so.

In your case this would require recreating the diagram using either tool but given your simple shapes it should be pretty straightforward.

For future readers, a similar hand drawn pencil look can be created using SVG filters. For more about that check out this article.

Post-processing-only avenues of manipulating the image you have into something hand drawn has a limit to how hand-drawn it can look. Creating them in a hand drawn way will give you finer control much more easily than doing post-processing effects.

Side note: For some basic input elements you could look into Wired.js

  • This is perfect for me, much more experience coding than designing. Thanks for the resources! Mar 31 '20 at 15:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.