<div>Lines thickness (blur): <input id="gaussianBlurSlider" type="range" min="1" max="50" step="any">
<br/>
Details (sharpen): <input id="sharpenSlider" type="range" min="8.5" max="20" step="any">  
  <br/>
  <a class="changeImage" href="#" data="https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056_1280.jpg">Girl 1</a>
  <a class="changeImage" href="#" data="https://cdn.pixabay.com/photo/2016/11/16/10/27/girl-1828538_960_720.jpg">Girl 2</a>
  
  <a class="changeImage" href="#" data="https://cdn.pixabay.com/photo/2014/09/07/22/34/car-race-438467_1280.jpg">Car</a>
</div>
<div class="imgWrap">
<img src="https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056_1280.jpg" alt="Line Art CSS" class="img line-art">
</div>

<svg >
  <defs>
    <filter width="100" height="100" id="line-art" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 
                                                              0 -1 0 0 1 
                                                              0 0 -1 0 1
                                                              0 0 0 1 0" result="inverted"/>
      <feGaussianBlur id="gaussianBlur" in="inverted" stdDeviation="10" result="inverted-blurred"/>
      <feBlend in="SourceGraphic" in2="inverted-blurred" mode="color-dodge" result="colorDodge"/>
      
<feColorMatrix type="saturate" values="0"/>      
    </filter>
<filter id="sharpen-filter">
          <feConvolveMatrix id="sharpen" order="3" kernelMatrix="-1 -1 -1 -1 8.5 -1 -1 -1 -1"/>
  
      </filter>
  </defs>
</svg>
<div>Inspired by the <a href="https://www.photoshopsupply.com/actions/line-art-photoshop-action-free">Line Art Photoshop</a> action by PhotoshopSupply.com </div>

.imgWrap{
  overflow:hidden;
  display:inline-block;
}
.img{
  max-width:100%;
  max-height:80vh;
  
}

.line-art{
  filter:url(#line-art) url(#sharpen-filter);
}

var blurSlider = document.querySelector("#gaussianBlurSlider");
var blur = document.querySelector("#gaussianBlur");
var sharpenSlider = document.querySelector("#sharpenSlider");
var sharpen = document.querySelector("#sharpen");
sharpenSlider.value = 28.5 - 10;
blurSlider.value = blur.getAttribute("stdDeviation");

blurSlider.oninput = blurSlider.onchange = function(){
  blur.setAttribute("stdDeviation",this.value);
}

sharpenSlider.oninput = sharpenSlider.onchange = function(){
  sharpen.setAttribute("kernelMatrix",`-1 -1 -1 -1 ${28.5 - this.value} -1 -1 -1 -1`);
}

var img = document.querySelector(".img");

img.onclick = function() {  this.classList.toggle("line-art");
}


var lnks = document.querySelectorAll(".changeImage");

for (var i=0;i<lnks.length;i++){
  lnks[i].onclick = function(){
    img.src = this.getAttribute("data"); 
  }
}