D3 Examples - sketchy Asia

sketchy Asia
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.
xxxxxxxxxx
 
<!DOCTYPE html>
​
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
​
    <style>
        body {
            font-family: sans-serif;
            margin: 0;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
​
        
        path {
            fill: none
        }
      
​
    </style>
</head>
​
<body>
  
  <h2>Sketchy Asia</h2>
​
​
<svg
   width="800"
   height="500"
   viewBox="0 0 800 500"
   >
​
​
​
​
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 173.81172,214.80949 4.71968,1.75605 19.84459,-9.68241 6.06904,1.008 17.17868,-3.52088 15.91138,2.24815 0.82385,1.32805 -15.32659,2.88368 -4.46372,11.6675 -9.04814,10.96223 -9.19949,1.45896 -2.74171,6.55779 -17.57056,2.63502 -7.75473,-2.3634 -1.6003,-17.8048 z"
     id="path20050"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 129.23831,267.58964 11.23887,0.57269 9.5467,-8.94918 0.88042,1.57754 0.62843,3.65534 -5.50032,10.2576 -14.84471,-1.35519 z"
     id="path20052"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 92.22945,189.62387 6.43169,-0.72197 7.09583,11.46602 -1.67588,0.13592 -6.24609,-4.49734 z"
     id="path20054"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 115.37674,186.30677 4.78797,5.71995 -3.40459,10.42546 -5.5452,-5.49865 -5.45795,3.41439 -7.09583,-11.46602 6.62941,-2.83482 z"
     id="path20056"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 319.41633,277.79086 -1.4076,6.34192 -4.40339,-9.69159 -5.29489,4.29774 -5.74334,-1.01508 -4.38523,-11.31967 8.49821,-3.5547 9.22998,5.27276 z"
     id="path20058"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 314.89916,251.2703 -9.03436,4.87023 -4.30527,-2.68388 5.56087,-4.61468 z"
     id="path20062"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 495.12773,183.59429 -17.45155,2.67698 -12.04872,8.73788 -9.8772,3.50815 -3.49248,-2.68325 -17.7902,4.68628 10.04318,7.31798 5.18632,-3.30437 7.10167,1.92496 -14.84075,11.77647 4.98109,2.54316 7.77791,12.34811 0.85141,8.60635 -15.89822,24.45949 -12.8016,8.16603 -18.72991,5.70347 -17.55594,-0.008 -12.5926,-8.32889 -14.61861,4.10651 -4.58377,4.75832 -8.97402,-3.15509 -2.68722,-9.00116 -4.33011,-4.7222 4.38376,-3.86474 0.0501,-7.35889 -6.27343,-3.48371 -5.5972,-5.51306 -7.18122,0.81174 -13.27927,6.96826 -7.77876,-2.42833 -5.56087,4.61468 -3.21104,-2.67135 -10.6309,-1.51365 -16.17841,-8.84708 -5.62893,-0.31568 -10.97914,-6.16654 0.80234,-12.98616 -4.9742,-5.42432 -7.6113,-1.87151 -4.78901,-5.71391 -0.82385,-1.32805 -6.03772,-9.30786 0.67957,-2.14167 20.20099,-5.97614 9.59263,-5.39029 2.80559,-3.84282 -4.16558,-8.03951 11.53679,-2.8793 3.33924,-8.28566 9.18092,1.52284 2.79515,-6.73275 7.3664,-3.51358 1.81097,-0.3806 14.90004,11.14909 -0.11712,7.41422 20.18427,4.83515 4.82472,7.01461 25.3781,0.97542 14.4946,4.24597 19.80117,-4.26726 37.84816,-19.22118 2.97303,-6.45132 -11.93473,-0.31776 5.5235,-8.11364 5.55566,1.74729 13.23105,-11.35307 1.22596,-5.95735 11.8865,-0.95997 10.99083,3.08223 7.91864,14.03444 8.05454,1.47942 7.35597,7.63845 18.69254,-3.18453 -8.92829,15.43034 -9.58867,0.81508 z"
     id="path20064"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 82.841004,187.57135 -0.46579,-5.13475 -6.934855,-3.65534 25.524681,4.31425 4.32551,2.97157 -6.62941,2.83482 -6.43169,0.72197 z"
     id="path20072"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 393.23592,411.16387 18.47186,0.77917 3.93343,6.49266 -24.00517,-2.69473 -13.47783,-4.23574 3.17534,-4.42198 z"
     id="path20875"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 543.07462,391.83037 0.15554,30.16399 -10.94617,-8.31949 -3.42838,-8.91744 -12.78802,-4.30609 -14.69293,-7.60087 1.80637,-11.34326 7.42987,1.90053 2.02288,9.20493 4.78985,2.77031 3.86744,-4.90906 9.42457,-2.79683 z"
     id="path20873"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 470.13899,373.22614 -3.71837,4.59067 -19.68718,0.8823 -0.65808,3.50293 6.79101,6.40893 7.69503,12.86213 -2.51059,4.40068 -10.75095,-12.50929 0.57979,12.01699 -4.92347,-0.68647 0.61069,-8.72599 -3.3833,-3.20436 5.86778,-15.58923 3.93426,-3.43736 14.77123,1.81472 z"
     id="path20871"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 398.0481,370.51115 3.9374,5.70786 10.85617,-3.35365 8.15225,0.31046 5.75797,-13.30934 9.33249,0.78209 0.76957,8.56104 -2.43752,14.30711 -4.45016,3.16511 -2.58804,10.03985 -5.25752,2.08237 -7.44093,-4.57334 -14.03736,-0.85516 -0.70757,-6.20684 -4.53116,-5.24519 -0.10522,-8.33681 z"
     id="path20869"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 380.25081,406.88157 -5.12451,0.0968 -9.83963,-7.65014 -11.30275,-16.52143 -7.13006,-11.4489 -14.90423,-14.56558 9.73732,-1.27523 14.60838,14.56391 4.70466,0.0727 6.56636,7.04531 1.66982,5.89282 12.36107,10.87497 z"
     id="path20074"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 250.75925,215.53187 4.9742,5.42432 -0.80234,12.98616 10.97914,6.16655 -4.73368,6.42814 23.89598,9.57196 12.99743,1.44205 0.27851,-6.76574 3.21104,2.67134 4.30527,2.68388 9.03436,-4.87023 13.27927,-6.96826 7.18122,-0.81174 5.5972,5.51306 -10.19246,7.81195 -4.71134,12.60116 -6.63672,8.37439 -3.50626,-9.66862 -9.22998,-5.27276 -8.49821,3.5547 4.38523,11.31967 -9.51643,2.59242 -2.20452,6.21958 -11.83994,8.56 -16.73523,11.12029 -0.1785,13.38826 -1.98216,12.25939 -10.72819,11.06891 -4.38231,-4.32134 -7.99796,-17.78372 -1.94814,-8.67859 -4.20985,-6.35633 -3.30103,-14.89085 -0.88106,-9.93984 -9.99682,2.21537 -10.61567,-13.02602 3.08203,-3.08767 10.18452,0.0125 -4.04637,-9.88242 2.07131,-6.92942 5.37401,0.35179 12.23496,-14.19248 -0.83846,-17.44299 12.17859,0.44115 z"
     id="path20076"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 140.07736,207.64163 7.35847,-3.54133 17.23067,2.55046 9.14522,8.15873 -3.15802,9.13394 1.6003,17.8048 8.57838,7.26411 2.72499,6.95636 -6.67575,2.39054 -1.74374,5.37652 -18.97522,-3.06219 -4.18897,-6.49496 -8.22408,3.06679 -14.78313,-6.40998 -6.50581,-10.56138 -7.15971,1.02281 -5.70765,-11.76603 -8.87631,-6.9357 3.0528,-7.91195 -6.03335,-6.9098 0.0985,-11.76687 6.24609,4.49734 1.67588,-0.13592 5.45795,-3.41439 5.5452,5.49865 1.46397,3.41252 14.18205,4.08396 z"
     id="path20078"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 115.30096,241.29685 -2.74651,-0.22694 -6.50603,4.05765 -8.60426,-0.36954 -13.048785,-9.30744 -12.470047,-4.49379 -1.865662,-5.63541 10.245489,-4.81615 1.312185,-8.97569 4.905092,-4.03113 11.214018,0.27496 6.03335,6.9098 -3.0528,7.91195 8.87631,6.9357 z"
     id="path20080"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 55.840664,228.41989 -0.806519,1.45876 -0.685427,4.18792 -2.198042,9.1993 -3.041516,-7.951 3.983116,-8.66147 3.216474,-0.8633 z"
     id="path20082"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 55.034145,229.87865 0.806519,-1.45876 5.156045,1.83393 9.062957,-4.93244 1.865662,5.63541 -10.150494,3.02022 4.61259,4.62762 -8.931633,6.06737 -5.150409,-0.73616 -0.154706,-0.66997 2.198042,-9.1993 z"
     id="path20084"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 542.96437,207.90469 -3.34653,9.27424 -14.04906,2.46133 -9.89536,0.0451 -13.52606,3.2006 -3.81338,11.35976 -8.90574,-8.54185 14.85222,-9.8916 14.16097,-0.43363 17.34966,-12.44395 2.11474,-10.86348 6.87536,-3.77288 2.38636,10.17095 z"
     id="path20889"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 556.54179,175.3606 -3.36137,10.0839 -8.34558,-6.44965 2.71686,-10.00873 z"
     id="path20086"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 218.9413,184.19056 -8.75751,4.08145 -10.90336,0.99881 -2.8509,-8.46563 -5.54061,-3.38037 -13.36342,1.03472 -16.24501,-9.63689 -11.91323,2.73501 0.18164,17.06427 -8.74122,-4.69965 -7.29792,2.50286 -0.004,-4.66958 -7.4518,-5.73291 1.96985,-5.62267 7.97834,-0.0603 0.008,-7.37684 -8.56544,-0.90569 -9.67614,3.00519 -12.19341,-9.23187 5.0122,-9.53625 14.88898,-5.72978 7.22923,-0.11963 15.68067,5.0765 4.91031,-1.95231 21.10104,1.13159 -6.33983,-5.37485 8.0178,-4.71844 -1.21907,-4.74955 17.31771,-1.61032 18.00107,-4.77168 8.31698,0.99756 16.28844,7.51067 9.90539,-2.91646 16.24605,15.32909 15.49172,-0.9462 9.98849,6.3697 8.41677,2.2116 -7.3664,3.51357 -2.79515,6.73275 -9.18092,-1.52284 -3.33924,8.28566 -11.53679,2.8793 4.16558,8.03952 -2.80559,3.84282 -5.17316,-2.34211 -22.81262,-2.04668 -3.34655,3.69062 z"
     id="path20088"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 218.9413,184.19056 11.69693,-1.08628 3.34655,-3.69062 22.81262,2.04668 5.17316,2.34211 -9.59263,5.39028 -20.20099,5.97614 -0.67957,2.14168 -8.75021,0.70233 -3.56576,-4.4656 9.44669,-2.877 z"
     id="path20090"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 365.2898,323.39794 1.86734,-9.4371 10.32211,-0.21984 10.01458,0.32758 0.50295,8.63224 -14.61088,8.56481 -3.87371,-0.67582 z"
     id="path20092"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 484.52837,201.10075 5.14059,8.4602 -1.70803,7.87542 -12.05897,3.20456 -1.43911,-15.5483 z"
     id="path20094"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 112.55445,241.06991 2.04354,6.58933 -8.54957,-2.53168 z"
     id="path20096"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 377.47925,313.741 1.71346,-6.00286 -7.55535,-12.35959 -8.5289,0.61005 -9.2448,-10.68476 4.9241,-4.71468 4.58377,-4.75832 4.78274,7.85912 5.69763,0.0363 3.05258,9.68053 11.43074,16.03497 -0.84139,4.62679 z"
     id="path20098"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 56.30875,225.7901 -3.216474,0.8633 4.037191,-7.19207 z"
     id="path20100"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 269.04196,344.98063 -0.69712,4.81887 -5.96528,2.37613 -3.02293,-10.33193 5.29279,-4.94058 z"
     id="path20102"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 346.63276,333.82757 0.97646,-6.98057 -5.40303,-21.56286 -2.00179,-3.8328 -8.308,5.61996 -5.46359,-1.49737 0.62948,-10.06845 -9.05356,-11.3727 1.4076,-6.34192 6.63672,-8.37439 4.71134,-12.60116 10.19246,-7.81195 6.27343,3.48372 -0.0501,7.35888 -4.38376,3.86474 4.33011,4.7222 2.68722,9.00116 8.97402,3.1551 -4.9241,4.71468 -8.61846,3.28432 -1.82621,9.90497 4.83265,6.43337 -2.18697,7.20021 5.35209,12.63102 z"
     id="path20104"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 296.64004,151.65107 20.74924,-6.96493 23.25565,4.98026 7.41296,-10.74301 14.82656,3.64426 7.45722,5.41451 14.86622,-0.85307 7.34177,4.58983 10.12064,0.70547 17.12543,-5.17504 10.72005,1.66502 -5.5235,8.11363 11.93473,0.31777 -2.97303,6.45132 -37.84816,19.22118 -19.80117,4.26725 -14.4946,-4.24597 -25.3781,-0.97541 -4.82472,-7.01462 -20.18427,-4.83514 0.11712,-7.41422 z"
     id="path20106"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 363.23624,351.00353 5.73875,6.3248 0.64096,16.79327 -9.8534,-7.10147 -5.52538,-11.80925 -0.51339,-5.33121 z"
     id="path20849"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 436.08438,360.64857 -9.33249,-0.78209 -5.75797,13.30934 -8.15225,-0.31046 -10.85617,3.35365 -3.9374,-5.70786 15.422,-5.0719 5.5924,-6.58787 5.76965,-4.26622 5.89785,-6.83568 11.37018,7.02025 z"
     id="path20108"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 298.34849,250.78531 -0.27851,6.76574 -12.99743,-1.44205 -23.89598,-9.57196 4.73368,-6.42814 5.62893,0.31567 16.17841,8.84708 z"
     id="path20112"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 136.31472,302.73639 -5.13036,-10.87079 13.88369,-4.62783 3.08537,-9.25608 -2.12101,-3.27806 5.50032,-10.2576 10.79417,6.28972 4.98401,5.8089 -9.33667,15.0082 -11.63388,8.51198 z"
     id="path20114"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 238.35894,207.94645 4.78901,5.71391 7.6113,1.87151 -4.46936,3.88958 -12.17859,-0.44115 0.83846,17.44299 -12.23496,14.19249 -5.37401,-0.3518 -2.07131,6.92943 4.04637,9.88241 -10.18452,-0.0125 -3.08203,3.08766 -8.34809,-8.02114 -22.56333,1.60552 1.74374,-5.37652 6.67575,-2.39054 -2.72499,-6.95636 -8.57838,-7.2641 7.75473,2.36339 17.57056,-2.63501 2.74171,-6.5578 9.19949,-1.45896 9.04814,-10.96223 4.46372,-11.66749 z"
     id="path20116"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 475.39797,340.85409 0.74326,5.67069 -10.7259,4.75768 -4.27499,-5.81976 0.8867,-5.89658 12.65773,-2.74484 z"
     id="path20923"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 452.00118,294.16072 5.52747,6.52816 -3.94721,5.37986 0.30565,7.41692 -7.67498,-2.97345 1.47922,-12.16314 z"
     id="path20118"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 543.23016,421.99436 -0.15554,-30.16399 16.58552,5.83709 11.04658,13.2371 13.0112,16.99223 -8.65103,-1.21635 -8.62911,-9.54774 -6.03625,-2.02371 -6.74676,2.84797 -3.04485,5.00426 z"
     id="path20120"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 495.12773,183.59429 0.64806,0.80986 -4.9742,6.18846 -10.0509,5.21095 3.77768,5.29719 -10.06552,3.99188 -6.76888,-1.6598 -2.06651,-8.42368 12.04872,-8.73788 z"
     id="path20122"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 561.9847,30.095465 -28.37327,4.401931 -6.6814,-6.190763 z"
     id="path20933"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 156.8034,52.504932 -17.85638,-0.19542 -10.28139,-5.795124 19.32723,-14.19186 13.16717,3.574533 -14.15115,8.96796 z"
     id="path20931"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 495.77579,184.40415 -0.64806,-0.80986 1.78278,-11.90759 9.58867,-0.81508 8.92829,-15.43035 -18.69254,3.18453 -7.35597,-7.63845 -8.05454,-1.47941 -7.91864,-14.03444 -10.99083,-3.08224 -11.8865,0.95998 -1.22596,5.95734 -13.23105,11.35307 -5.55566,-1.74728 -10.72005,-1.66502 -17.12543,5.17504 -10.12064,-0.70547 -7.34177,-4.58983 -14.86622,0.85307 -7.45722,-5.41451 -14.82656,-3.64426 -7.41296,10.74301 -23.25565,-4.98026 -20.74924,6.96493 -1.81097,0.3806 -8.41677,-2.2116 -9.98849,-6.3697 -15.49172,0.9462 -16.24605,-15.32909 -9.90539,2.91646 -16.28844,-7.51067 -8.31698,-0.99756 -18.00107,4.77168 -17.31771,1.61032 1.21907,4.74955 -8.0178,4.71844 6.33983,5.37485 -21.10104,-1.13159 -4.91031,1.95231 -15.68067,-5.0765 -7.22923,0.11963 -14.88898,5.72978 -5.0122,9.53625 12.19341,9.23187 -11.19565,8.28462 8.80386,12.95985 -10.08619,-0.23969 -4.32551,-2.97157 -25.524681,-4.31425 -11.180619,-5.65649 0.623002,-9.16045 9.554635,-5.8421 1.530778,-7.87729 -21.811307,-4.51759 -7.420479,-8.13535 -9.101998,1.08002 -4.220917,-15.96315 -12.482573,-2.86092 -3.50146,-11.82638 3.007485,-8.233058 14.207936,-8.58087 -7.384151,-11.99111 -4.408194,-19.04914 16.386561,-3.89292 37.762562,9.13353 3.857848,5.27963 -12.694487,3.66557 -16.513499,0.45994 0.597739,6.87619 41.678649,-7.65807 45.20455,-12.9041 16.65881,1.81013 28.63321,-5.00344 15.85584,0.42947 -1.08962,-7.28623 15.01946,-9.307025 26.5807,3.422123 18.36621,-0.0904 3.97561,-6.146292 29.20819,-1.335987 1.59446,-5.458986 54.40508,-6.157357 25.12549,-5.789694 31.12627,4.572086 12.99575,6.396828 0.38625,8.019889 60.19874,0.135916 6.86596,7.337593 24.98018,2.747136 27.82419,-0.46934 2.76905,-6.301416 41.79913,3.005397 16.05398,6.283879 18.68753,-0.87563 18.20482,7.37768 31.91044,-0.67311 12.11512,-2.3803 24.39205,1.01717 19.78906,4.22823 v 18.43741 l -2.91395,9.24251 -26.33412,6.15527 -13.79894,6.092428 -20.37948,2.53438 -12.75316,-0.371 -7.04362,7.52236 5.43601,2.9077 -4.97252,12.77256 -24.65637,17.7904 -6.27615,-20.22415 6.37136,-11.34326 7.19165,-1.03535 8.132,-11.516538 -3.79103,-5.69115 -11.94768,1.57128 -11.5821,7.757668 -13.66323,4.52281 -26.7427,-2.57072 -15.22324,1.37168 -32.7274,19.94837 9.56717,3.48142 12.53288,-0.98274 6.68181,5.09132 -5.93939,21.48708 -8.52576,9.89808 -15.50509,13.46613 -11.99257,0.52592 z"
     id="path20128"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 88.511275,304.13939 -8.515325,-14.52528 -8.330135,-8.3554 -2.992661,-11.09105 -15.561878,-20.24692 -0.805894,-5.9849 5.150409,0.73616 8.931633,-6.06737 -4.61259,-4.62762 10.150494,-3.02022 12.470047,4.49379 13.048785,9.30744 8.60426,0.36954 8.54957,2.53168 8.03576,8.61887 3.04381,8.95481 2.68179,0.58939 0.87896,1.76733 1.94939,5.7588 14.84471,1.35519 2.12101,3.27806 -3.08537,9.25608 -13.88369,4.62783 -13.34401,1.77401 -9.79598,7.7134 -16.74942,-2.91563 z"
     id="path20130"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 70.059666,225.32138 -9.062957,4.93244 -5.156045,-1.83393 0.468086,-2.62979 0.820717,-6.32877 0.700458,-5.4452 4.243883,-3.70941 24.448624,-2.80831 -4.905092,4.03113 -1.312185,8.97569 z"
     id="path20134"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 365.2898,323.39794 -7.43467,-5.67465 -4.4416,5.11741 -4.00295,10.84762 6.04169,11.72491 7.78397,5.5903 -9.51246,-1.12386 -7.32131,-8.87568 0.23029,-7.17642 4.784,-9.06984 -5.35209,-12.63102 2.18697,-7.20021 -4.83265,-6.43337 1.82621,-9.90497 8.61846,-3.28432 9.2448,10.68476 8.5289,-0.61005 7.55535,12.35959 -1.71346,6.00286 -10.32211,0.21984 z"
     id="path20136"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 219.1814,193.54728 3.56576,4.4656 8.75021,-0.70233 6.03772,9.30785 -15.91138,-2.24815 -17.17868,3.52088 1.60135,-8.12929 5.33831,-8.45186 z"
     id="path20138"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 173.81172,214.80949 -9.14522,-8.15873 -17.23067,-2.55046 -7.35847,3.54133 -0.18811,-8.11362 -5.49322,-5.00532 9.45421,-4.24576 -10.34048,-3.85179 7.29792,-2.50286 8.74122,4.69965 12.3143,-6.67785 6.73046,6.13857 8.32742,1.57483 2.27487,4.77147 19.18004,12.45418 -19.84459,9.68241 z"
     id="path20140"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 82.841004,187.57135 9.388446,2.05252 5.60555,6.38263 -0.0985,11.76687 -11.214018,-0.27496 -24.448624,2.80831 -4.243883,3.70941 -6.642145,-4.50779 -10.206447,3.1839 -8.735589,-2.63919 -4.265387,2.46904 -9.527911,-2.38094 -6.122699,-7.17014 -0.682295,-5.81037 14.204178,-8.12846 8.820771,0.61256 10.955969,-4.31027 7.656611,-0.0983 14.716734,5.05208 z"
     id="path20144"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 198.37599,206.88313 -19.18004,-12.45418 -2.27487,-4.77147 -8.32742,-1.57483 -6.73046,-6.13857 -12.3143,6.67785 -0.18164,-17.06427 11.91323,-2.73501 16.24501,9.63689 13.36342,-1.03472 5.54061,3.38037 2.8509,8.46563 10.90336,-0.99881 8.75751,-4.08145 9.68679,6.47972 -9.44669,2.877 -7.79671,-2.2373 -5.33831,8.45186 -1.60135,8.12929 z"
     id="path20148"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 390.58274,280.05321 -6.17886,3.95953 -4.87357,7.58374 7.86748,10.92528 7.0121,6.57512 2.12017,8.56481 -0.62529,8.1414 -18.7057,14.19458 -3.81317,-8.73204 14.61088,-8.56481 -0.50295,-8.63224 0.84139,-4.62679 -11.43074,-16.03497 -3.05258,-9.68053 -5.69763,-0.0363 -4.78274,-7.85913 14.61861,-4.1065 z"
     id="path20150"
     inkscape:connector-curvature="0" />
  <path
     style="fill:#58b947;stroke:#ffffff;stroke-width:2.08780575"
     d="m 136.31472,302.73639 -4.35224,4.87628 -12.003,4.11256 -4.14367,3.26532 -24.04819,6.32376 -3.256345,-17.17492 2.783675,-5.70201 16.74942,2.91563 9.79598,-7.7134 13.34401,-1.77401 z"
     id="path20154"
     inkscape:connector-curvature="0" />
</svg>
​
​
​
​
  <script>
  
    
            //MAKE SKETCHY!
            d3.selectAll("path").each(function (d,i) {
                let thisPath = d3.select(this);
                let parent = d3.select(this.parentNode);
                let fill = thisPath.style("fill");
              
                let pathNode = thisPath.node();
        
                var fillCode = cheapSketchy(pathNode);
                var strokeCode = cheapSketchyOutline(pathNode);
                
                //remove the original shape
                d3.select(this).remove();
              
               parent.append("clipPath")
                  .attr("id", "clip" + i)
                  .append("path")
                  .attr("d", strokeCode);
              
              parent.append("path")
                  .style("stroke-width", "3px")
                  .style("stroke", fill)
                    .style("fill", "none")
                  .attr("class", "sketchy-fill")
                  .attr("d", strokeCode);
                
                //draw the sketchy path
                parent.append("path")
                  .style("stroke-width", "0.5px")
                  .style("stroke", fill)
                    .style("fill", "none")
                  .attr("class", "sketchy-fill")
                    .attr("clip-path", "url(#clip" + i + ")")
                  .attr("d", fillCode);
              
                
​
            })
​
   
​
     
        //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.375;
          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>
    