hand drawing (crayon) style for SVG path?

Question

The SVG path usually looks like a solid line:

Is it possible to implement a hand-drawing (crayon) style for SVG path?

Answer 1

You can try something like this using svg's filter

<svg width="1000" height="500">
    <defs>
    <filter id="filter" height="2" width="2">
      <feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
      <feDisplacementMap  scale="80"  xChannelSelector="R" in="SourceGraphic" />
     
    </filter>
    </defs>
    <path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>

Answer 2

If you don't want the edges clipped and want a more solid stroke, then you can tweak Akshay's settings by setting filterUnits in userSpace and reducing the displacement scale like so:

<svg width="1000" height="500">
    <defs>
    <filter id="filter" filterUnits="userSpaceOnUse" x="-5" y="-5" height="200" width="2000">
      <feTurbulence baseFrequency="0.2" numOctaves="3" type="fractalNoise" />
      <feDisplacementMap  scale="8"  xChannelSelector="R" in="SourceGraphic" />
     
    </filter>
    </defs>
    <path d="m 100 100 l 200 10" stroke="black" stroke-width="20" style="filter:url(#filter)"/>