I found an issue in the popular RoughJS library (it generates hand-drawn-like primitives) which is kinda vital for my case: when I try to fill in the SVG path with empty space inside, it fills the path without respect to the inner empty areas.

E.g. donuts will be filled twice: both outer and inner circles whereas the expected result is to have a filled donut for the space between outer and inner circles.

SVG Contour is

<path d="M200 1200 l-65 -8 -73 -34 -73 -35 -60 -59 -59 -60 -38 -78 -37 -78 0 -120 0 -120 23 -57 23 -57 44 -61 45 -60 47 -34 48 -35 65 -27 65 -26 86 -5 85 -6 60 18 59 17 58 30 58 31 57 62 58 62 21 45 22 45 15 60 16 61 0 50 0 51 -11 53 -11 53 -28 60 -29 60 -58 58 -58 57 -35 22 -35 21 -49 19 -49 19 -61 7 -61 7 -65 -8z m215 -192 l57 -29 34 -39 33 -39 22 -47 22 -46 1 -80 0 -80 -21 -47 -22 -47 -32 -41 -33 -41 -65 -32 -66 -32 -80 0 -80 0 -50 25 -50 24 -47 48 -46 48 -22 57 -22 58 4 75 5 75 22 43 22 43 36 40 37 40 40 21 41 21 25 8 25 8 76 -3 77 -3 57 -28z" />

I've created a test setup to check the issue at the runtime: https://glitch.com/edit/#!/mountainous-regal-feet?path=index.html%3A4%3A66

Does anyone have any solution or workaround for it?