title: Large gaussian blur filter without revealing SVG border
body: <p>I am trying to create a kind of "spotlight" effect over a large background image where the user can use the cursor to view parts of an image.</p>
  
  <p>I'm currently applying a gaussian blur <code>filter</code> to a <code>mask</code> element which is positioned at the cursor and reveals parts of the large <code>image</code>.</p>
  
  <p>I would like to have a higher blur amount in order to get a softer edge, but when I increase the value of the <code>stdDeviation</code> attribute inside the filter, the border of the SVG is revealing – I have attached two images to illustrate, also you can see it in this pen <a href="https://codepen.io/moevbiz/pen/YbwErx" rel="nofollow noreferrer">https://codepen.io/moevbiz/pen/YbwErx</a></p>
  
  <p>Here is my code: </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"&gt;
    &lt;defs&gt;
      &lt;filter id="filter"&gt;
        &lt;feGaussianBlur stdDeviation="50"/&gt;
      &lt;/filter&gt;
      &lt;mask id="mask"&gt;
        &lt;ellipse id="ellipse" cx="50%" cy="50%" rx="100" ry="100" fill="white" filter="url(#filter)"&gt;&lt;/ellipse&gt;
      &lt;/mask&gt;
    &lt;/defs&gt;
  
    &lt;image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="100%" height="100%" mask="url(#mask)"&gt;&lt;/image&gt;
  &lt;/svg&gt;
  
  &lt;img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" /&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow:hidden;
  }
  
  img {
    width: 100vw;
    height: 100vh;
    mask: url(#mask);
  }
  </code></pre>
  
  <pre><code>document.onmousemove=function(e) {
    var mousecoords = getMousePos(e);
    var mouseX = mousecoords.x;
    var mouseY = mousecoords.y;
    var ellipse = document.getElementById('ellipse');
    ellipse.setAttribute('cx', mouseX);
    ellipse.setAttribute('cy', mouseY)
  };
  
  
  function getMousePos(e) {
    return {x:e.clientX,y:e.clientY};
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/axuR1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/axuR1.png" alt="current(i want to have a larger blur than this)"></a>
  current(i want to have a larger <strong>blur</strong> than this, not just increase the ellipse radius)</p>
  
  <p><a href="https://i.stack.imgur.com/f3EZ6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f3EZ6.png" alt="increased blur value with visible borders"></a>
  increased blur value with visible borders</p>
  
  <p>Thankful for any hints!</p>