sketchy NZ

Made sketchy using Elijah Meeks' "cheap sketchy" approach (https://bl.ocks.org/emeeks/8a3a12b0327f12560b1a)

This version allows you set the start position of the sketchy fill, as some positions look better where there are concave shapes, or very long narrow shapes.

Also uses clipping to hide where the sketchy fill goes outside of the concave parts of the shapes.

Built with blockbuilder.org

<!DOCTYPE html>

path {
        	fill: none
      	}

</style>
</head>

<body>
  
  <h2>Sketchy NZ</h2>

id="layer1">
    <path
       id="path10313"
       d="m 335.95714,103.37544 -6.0456,5.93985 -21.95463,0.0173 -58.63708,-95.906874 72.81313,43.820986 z"
       style="fill:#58b947;stroke:#fafafa;stroke-width:0.39999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
    <path
       id="path10315"
       d="m 364.56114,153.39577 -27.8309,14.06872 -21.05517,-45.52815 14.23647,-12.62105 6.0456,-5.93985 6.33052,36.66305 z"
       style="fill:#58b947;stroke:#fafafa;stroke-width:0.39999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
    <path
       id="path10317"
       d="m 392.27947,173.21861 10.9225,83.1814 -7.79006,12.80522 -19.07554,-35.63704 -32.36864,14.86815 -10.42887,-3.01692 c 0.9257,-26.73269 2.17986,-54.17253 3.19198,-77.95205 l 27.8309,-14.06876 22.26781,-17.38408 z"
       style="fill:#58b947;stroke:#fafafa;stroke-width:0.39999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
/>
    <path
       id="path10319"
       d="m 484.98423,186.42656 -11.34397,30.54604 -32.93389,24.22038 -37.5044,15.20703 -10.9225,-83.1814 50.48101,37.29805 z"
       style="fill:#58b947;stroke:#fafafa;stroke-width:0.39999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
    <path
       style="fill:#58b947;stroke:#fafafa;stroke-width:0.39999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
       d="M 484.98438 186.42578 L 473.64062 216.97266 L 440.70703 241.19336 L 403.20117 256.40039 L 395.41211 269.20508 L 394.13477 316.45898 L 415.3125 340.89258 L 445.24609 269.6543 L 472.77539 263.99805 L 504.67188 195.74414 L 484.98438 186.42578 z "
       id="path10321" />
    <path
       style="fill:#58b947;stroke:#fafafa;stroke-width:0.39999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
       d="m 376.3347,233.58574 -32.36697,14.8506 -10.42887,-3.01692 -36.11593,28.90107 42.32052,33.32009 13.38048,46.08663 c 0,0 34.88209,0.95789 49.57528,1.41439 l 12.61506,-14.24727 c -7.05939,-8.14486 -14.11881,-16.28967 -21.17822,-24.43454 l 1.27764,-47.25396 C 389.05402,257.33247 382.6942,245.45918 376.3347,233.58574 Z"
       id="path10325"/>
    <path
       id="path10329"
       d="M 402.69803,355.1416 364.026,401.62063 343.08614,393.6743 353.12393,353.72721 Z"
  
       style="fill:#58b947;stroke:#fafafa;stroke-width:0.39999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
    <path

style="fill:#58b947;stroke:#fafafa;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
       d="m 251.64452,341.63654 -19.405,15.20415 -58.83077,118.69172 -102.496101,77.11952 11.798424,12.34841 52.044097,-31.70666 14.98594,-20.67971 64.64437,-41.01788 29.15689,-32.86973 9.7733,-9.5158 12.73522,20.71434 41.17428,-27.85613 9.72063,-38.66038 -27.86278,-11.54172 -16.31297,15.17283 z"
       id="path10331" />
    <path
       id="path10333"
       d="m 307.22451,422.06811 -49.91853,63.31998 11.54408,30.94375 -72.80366,37.91764 -3.24136,30.58144 -29.10909,8.31499 -33.99821,-33.12399 5.05746,-26.72824 14.98666,-20.67933 64.64405,-41.01826 29.15649,-32.87054 9.77266,-9.51419 12.73589,20.71348 z"

style="fill:#58b947;stroke:#fafafa;stroke-width:0.39999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
    <path

style="fill:#58b947;stroke:#fafafa;stroke-width:0.40000001;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
       d="m 134.75517,533.29368 -52.044097,31.70666 -11.798424,-12.34841 -55.865519,89.64444 10.980148,20.66484 98.892032,16.17916 48.22766,-50.52212 19.65856,-43.78784 -29.10915,8.31478 -33.99907,-33.12382 z"
       id="path10335" />
  </g>
</svg>

})

//from https://bl.ocks.org/emeeks/8a3a12b0327f12560b1a
      function cheapSketchy(path) {

var length = path.getTotalLength();

var drawCode = "";
          var i = 0;
          var step = 2;
        
        	var halfLength = length * 0.5;
        	var startPoint = length * 0.85;
          var endPoint = startPoint - 1;
        
        	var s, e;

while (i < halfLength) {
            
            s = ((startPoint + i) >= length) ? (startPoint + i - length) : startPoint + i;
                       
            e = (endPoint - i) < 0 ? length - (i - endPoint) : endPoint - i
            
            var start = path.getPointAtLength(s)
            var end = path.getPointAtLength(e)

drawCode += " M" + (start.x + (Math.random() * step - step/2)) + " " + (start.y + (Math.random() * step - step/2)) + "L" + (end.x + (Math.random() * step - step/2)) + " " + (end.y + (Math.random() * step - step/2));

i += step + (Math.random() * step);
            
          }

return drawCode;
        }
    
    		function cheapSketchyOutline(path) {
          var j = 2;
          var i = 0;
          var length = path.getTotalLength();
          var pointsArray = [];

while (i < length) {
            newPoint = path.getPointAtLength(i);
            pointsArray.push({x: newPoint.x + (j/2 - Math.random() * j), y: newPoint.y + (j/2 - Math.random() * j)});

i += j + (Math.random() * (j));
          }
          //Make sure to get the last point
          pointsArray.push(path.getPointAtLength(length));

var line = d3.line()
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; })
          .curve(d3.curveBasis);

return line(pointsArray);
        }

</script>
</body>

https://d3js.org/d3.v4.min.js