Combine feTurbulence + feDisplacement with feathered transparent edge - svg-filters

Question

I used this answer from @Duklas to create this effect: blurred div with svg-filter feathering edges

I have a background image containing red and green circles. I have a spherical html div thats almost transparent using "backdrop-filter: blur".

My objectives:

1. the blurred div should blur the background-image (backdrop-filter)
2. the edges of the blurred div shouldn't be sharp/visible (svg-filter)
3. the blur should be obvious/exaggerated...

I'm stuck on the third objective: the blur on the red and green is too subtle. Increasing backdrop-filter isn't helping - it makes the div edges sharp and obvious (see image).

If I adjust the feFuncA offset or exponent values then the blurred div's edges also show.

I want to try adding feTurbulence + feDisplacement to the same filter so that it doesn't just feather the edges, but also adds noise to the blur. Does anyone know how I can achieve this?

.new-circle {
  position: absolute;
  top: 1vh;
  background-color: rgba(255, 255, 255, 0.253);
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  z-index: 50;
  backdrop-filter: blur(5rem);
  -webkit-backdrop-filter: blur(5rem);
  will-change: transform;
 }

This is the code causing transparent/blurry edges from Duklas:

    <svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="feather">
    <feGaussianBlur stdDeviation="35 35" result="blur" />
    <feComponentTransfer result="alpha-adjust">
      <feFuncA type="gamma" amplitude="1" offset="-0.1" exponent="8" />
    </feComponentTransfer>
    <feComposite operator="in" in="SourceGraphic" in2="alpha-adjust" />
  </filter>
</svg>

<div class="new-circle" style="filter: url(#feather)"></div>

Answer 1

Once you go beyond the basics with back-drop filters, you start running into issues (backdrop filters were airdropped into Safari in 2015 without any discussion and without a proper think through - so the other browsers have been trying to support them without a proper spec to follow - there are still disagreements over how they should be implemented FWIW).

In this example, you're running in to a few issues:

1. feComposite isn't supported inside a back-drop filter
2. Large blurs have edge problems - so the original backdrop is showing through incorrectly
3. You can't apply a regular filter to a wrapper div if the wrapped div already has a back-drop filter - that's the usual workaround for doing additive filters, but it doesn't work with backdrops - so you can't apply further effects that way.

I'd recommend sticking to something more basic - such as:

.new-circle {
  position: absolute;
  top: 1vh;
  background-color: rgba(255, 255, 255, 0.253);
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  z-index: 50;
  backdrop-filter: blur(1rem);
  will-change: transform;
 }

<svg height="1400px" width="1400px">
  <circle cx="300" cy="300" r="100" fill="green" />
</svg>


<div class="new-circle"></div>