Adding a hand drawn effect

Hey guys.

As I get asked so often I wanted to ask here again. Is there any easy way to add a scribble layout so that the model is shown like hand drawn instead of solid lines? Something in this direction: https://codemyui.com/hand-drawn-border-buttons-css/.

It would be totally awesome to have something (like an optional CSS style) that can be added to get such a hand drawn visualization.

Or is it already there and I missed it?

Thanks
Bernd

Why would you like to do this? I guess one of the main drivers is to let the model look more like work in progress rather than finished?

Adding hand drawn styles won’t be as easy as adding a custom CSS to a page. You could roll it via a custom renderer though. It would be similar to bpmn-js-nyan in this sense which makes service tasks look less scary / technical.

Yes, the motivation is that it looks less perfect. This has a huge impact on the perception of people. Showing them a model looking hand-drawn yields in less objections and less unnecessary detail discussions. Hand-drawn mode in e.g. EA is quite popular (https://www.youtube.com/watch?v=4Lcq6T9K9No). It might not even only be work-in-progress but also a finished model, which is not 100% perfect (which is basically true for almost all models :wink: ).

It might not even only be work-in-progress but also a finished model, which is not 100% perfect (which is basically true for almost all models :wink: ).

People won’t give good feedback if things look too done and your feature request could help us to mitigate that bias (and encourage actual feedback).

Sounds like a good side-project to give a try some day, maybe.

1 Like

For reference: Rough.js seems to provide all the tools to implement a custom renderer.