Incompatibility issues with SVG gooey effect on the most recent FireFox update

Question

Incompatibility issues with SVG gooey effect on the most recent FireFox update

My Gaussian blur is not functioning correctly with colors other than black. It works fine on Chrome, but I have yet to test it on Safari.

https://i.sstatic.net/iJFUj.png

I've provided an example on jsFiddle:

HTML:

<div>
<div class="bigLogo">
    <div class="blobs">
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="connect12">
        <div class="part1"></div>
        <div class="part2"></div>
        <div class="part3"></div>
    </div>
    <div class="connect23">
        <div class="part3"></div>
    </div>
    <div class="connect31">
        <div class="part3"></div>
    </div>
</div>
<svg xmlns="http://www,w3.org" version='1.1'>
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0                                                                                       0 1 0 0 0                                                                                   0 0 1 0 0                                                                                   0 0 0 18 -7" result="goo"/>
            <feBlend in="SourceGraphic" in2="goo" />
        </filter>
    </defs>
</svg>
</div>
</div>

<div class="break">
<div class="smallLogo">
        <div class="blobs">
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="connect12">
                <div class="part1"></div>
                <div class="part2"></div>
                <div class="part3"></div>
            </div>
            <div class="connect23">
                <div class="part3"></div>
            </div>
            <div class="connect31">
                <div class="part3"></div>
            </div>
        </div>

        <svg xmlns="http://www,w3.org" version='1.1'>
            <defs>
                <filter id="goo2">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
                    <feColorMatrix in="blur" mode="matrix" values="0 0 0 0 0
                                                                   0 0 0 0 0
                                                                   0 0 0 0 0
                                                                   0 0 0 18 -7" result="goo"/>
                    <feBlend in="SourceGraphic" in2="goo" />
                </filter>
            </defs>
        </svg>
    </div>
</div>

SCSS:

https://jsfiddle.net/lastgiven/kqmabvxs/2/

If you could take a look and assist me with this issue, it would be greatly appreciated.

Thank you!

html css firefox svg

Answer 1

Answer №1

The concept of the "gooey effect" gained popularity after being featured in a post on css-tricks. While the post explains how it works, there is room for exploration of the various options SVG filters provide for creating this effect. Differences in rendering across browsers stem from variations in the implementations of filter primitives and their application on SVG or HTML elements.

Before delving into cross-browser comparisons, let's explore the potential possibilities.

Blurring the input graphics

The groundwork for the filter involves using:

<feGaussianBlur stdDeviation="20" />

This step creates a blurred image, emphasizing a wide band of pixels with varying alpha color values along the graphic borders. The intent is not merely to blend colors but to enhance partial transparency as you move outward.

Enhancing the contrast of the alpha channel

The initial method employs the feColorMatrix primitive:

<feColorMatrix mode="matrix"
               values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
               result="cutoff" />

Although these numbers may seem cryptic, an alternative utilizing the feComponentTransfer primitive offers the same functionality:

<feComponentTransfer result="cutoff">
    <feFuncA type="linear" slope="19" intercept="-9" />
</feComponentTransfer>

In both scenarios, the alpha value of an RGBA color undergoes transformation according to the equation:

(alpha) => slope * alpha + intercept

The output restricts alpha values within the [0, 1] range, resulting in only subtle partial transparency. This refinement sharpens blurry edges into a thin line, creating a soft transition between adjacent objects for that characteristic "gooey" appearance.

To eliminate residual transparency, a hard distinction between full opacity and full transparency can be established:

<feComponentTransfer result="cutoff">
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>

This setting reduces the range of inputs to two categories:

alpha < 0.5 => 0
alpha ≥ 0.5 => 1

While this approach may introduce some antialiasing artifacts, minimal blurring can be applied for a slightly refined outcome:

<feComponentTransfer>
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="1" result="cutoff" />

Overlaying the original graphics

To prevent color blending within objects, the original graphics can be layered over the "goo." Various filter primitives with customizable parameters offer this capability. A basic superimposition setup looks like:

<feBlend in="SourceGraphic" in2="cutoff" />
// or
<feMerge>
    <feMergeNode in="cutoff" />
    <feMergeNode in="SourceGraphic" />
</feMerge>
// or
<feComposite operator="over" in="SourceGraphic" in2="cutoff" />

If limiting overlay to the "goo" area is required, this configuration achieves that:

<feComposite operator="atop" in="SourceGraphic" in2="cutoff" />

Evaluating results

In theory, except for minor discrepancies, the outcomes should be consistent across platforms. I've prepared a test case for experimenting with different filters and settings, applicable to both SVG shapes and HTML divs. By observing the effects on multi-colored versus monochrome objects, you can identify a filter solution that ensures optimal consistency across browsers.

Answer 2

The concept of the "gooey effect" gained popularity after being featured in a post on css-tricks. While the post explains how it works, there is room for exploration of the various options SVG filters provide for creating this effect. Differences in rendering across browsers stem from variations in the implementations of filter primitives and their application on SVG or HTML elements.

Before delving into cross-browser comparisons, let's explore the potential possibilities.

Blurring the input graphics

The groundwork for the filter involves using:

<feGaussianBlur stdDeviation="20" />

This step creates a blurred image, emphasizing a wide band of pixels with varying alpha color values along the graphic borders. The intent is not merely to blend colors but to enhance partial transparency as you move outward.

Enhancing the contrast of the alpha channel

The initial method employs the feColorMatrix primitive:

<feColorMatrix mode="matrix"
               values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
               result="cutoff" />

Although these numbers may seem cryptic, an alternative utilizing the feComponentTransfer primitive offers the same functionality:

<feComponentTransfer result="cutoff">
    <feFuncA type="linear" slope="19" intercept="-9" />
</feComponentTransfer>

In both scenarios, the alpha value of an RGBA color undergoes transformation according to the equation:

(alpha) => slope * alpha + intercept

The output restricts alpha values within the [0, 1] range, resulting in only subtle partial transparency. This refinement sharpens blurry edges into a thin line, creating a soft transition between adjacent objects for that characteristic "gooey" appearance.

To eliminate residual transparency, a hard distinction between full opacity and full transparency can be established:

<feComponentTransfer result="cutoff">
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>

This setting reduces the range of inputs to two categories:

alpha < 0.5 => 0
alpha ≥ 0.5 => 1

While this approach may introduce some antialiasing artifacts, minimal blurring can be applied for a slightly refined outcome:

<feComponentTransfer>
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="1" result="cutoff" />

Overlaying the original graphics

To prevent color blending within objects, the original graphics can be layered over the "goo." Various filter primitives with customizable parameters offer this capability. A basic superimposition setup looks like:

<feBlend in="SourceGraphic" in2="cutoff" />
// or
<feMerge>
    <feMergeNode in="cutoff" />
    <feMergeNode in="SourceGraphic" />
</feMerge>
// or
<feComposite operator="over" in="SourceGraphic" in2="cutoff" />

If limiting overlay to the "goo" area is required, this configuration achieves that:

<feComposite operator="atop" in="SourceGraphic" in2="cutoff" />

Evaluating results

In theory, except for minor discrepancies, the outcomes should be consistent across platforms. I've prepared a test case for experimenting with different filters and settings, applicable to both SVG shapes and HTML divs. By observing the effects on multi-colored versus monochrome objects, you can identify a filter solution that ensures optimal consistency across browsers.

Incompatibility issues with SVG gooey effect on the most recent FireFox update

Answer №1

Similar questions

Set the first link in a menu to be highlighted as active using jquery

Using a .NET Web-API controller variable as a parameter in a JavaScript function

unable to modify the content within a div by clicking on a link

Ensuring elements are correctly positioned

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

A guide to retrieving nested values from a JSON object using JavaScript

What are the steps to integrate mp3 music into my web application?

What is the best approach to customize classes in material-ui with makeStyles and useStyles?

PyScript <script type="py-editor"> Issue: SharedArrayBuffer cannot be used in an insecure environment

Leveraging the Angular (2) routerLinkActive directive to handle dynamic routes

Design: A stationary text box positioned on the left side alongside a selection of scrollable MDL cards on the right

What is the best way to preserve code in a blog post without any alterations to the code itself?

having trouble transferring the password field in PHP to phpMyAdmin

Implementing validation for multiple email addresses in JavaScript: A step-by-step guide

Issue with the Bootstrap carousel jQuery plugin

Adjusting the height of content in Angular Material 2 md-tab

What is the most effective way to implement a single modal throughout my web application without having to duplicate HTML code on each page?

Is it necessary to mark all checkboxes in the initial column of the gridview?

Safari is displaying the HTML5 range element improperly

EaselJS - Utilizing multiple canvases with varying frame rates