title: Leaflet polygon with fuzzy outline
body: <p>I am looking for a way to have a fuzzy/blur/gradient outline of a leaflet polygon.</p>
  
  <p>This should help make country outlines more simple (currently, when you zoom in to a svg representing a country, it gets ugly/inaccurate).</p>
  
  <p>I was thinking about attaching CSS attributes to the svg similiar to this: <a href="http://www.w3schools.com/svg/svg_fegaussianblur.asp" rel="nofollow noreferrer">http://www.w3schools.com/svg/svg_fegaussianblur.asp</a>
  But apparently the svg subelement <code>&lt;g&gt;</code> (used for the leaflet polygon) does not accept this.</p>
  
  <p>I also had a look at <code>&lt;defs&gt;</code> of svg (see here: <a href="http://geoexamples.blogspot.be/2014/01/d3-map-styling-tutorial-ii-giving-style.html" rel="nofollow noreferrer">http://geoexamples.blogspot.be/2014/01/d3-map-styling-tutorial-ii-giving-style.html</a>) but have no clue in applying this to leaflet.</p>
  
  <p><a href="http://leafletjs.com/examples/quick-start-example.html" rel="nofollow noreferrer">http://leafletjs.com/examples/quick-start-example.html</a></p>
  
  <p><img src="https://i.stack.imgur.com/4ETT6.png" alt="example illustration"></p>