Search code examples
csssvgsvg-filters

hand drawing (crayon) style for SVG path?

The SVG path usually looks like a solid line:

enter image description here

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

enter image description here

Solution

  • 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)"/>