One effect found in Codepen is this:

Effect of link

As you can see from the code, it uses filters in SVG to achieve this effect, mainly using gaussian blur and color matrix and blending the three filter combinations.

Let’s take a look at SVG filters and see how to use SVG filters to achieve this effect.

SVG filter

Every effect in an SVG filter contains at least one primitive. A primitive usually contains one or two inputs (in, in2) and one output (result). Primitive inputs include blur, move, fill, combine, or distort, and so on. The result attribute can take the result of one filter operation as input to another filter operation (specified by in).

When using a filter, you can use the result of one operation as input to another filter to achieve an endless range of possible effects. This is where filters are really powerful.

Consider a common example of an SVG filter:

The < SVG XMLNS = "http://www.w3.org/2000/svg" version = "1.1" width = "600" height = "400" > < defs > < filter id = "dropshadow x =" 0 "" y="0" width="200%" height="200%"> <feOffset result="offsetResult" in="SourceAlpha" dx="20" dy="20" /> <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="5" /> <feBlend in="SourceGraphic" in2="blurResult" mode="normal" /> </filter> </defs> <rect width="300" height="100" x="200" y="100" fill="green" filter="url(#dropshadow)" /> </svg>Copy the code

The effect is as follows:

This is an example of SVG filters.

Use feOffset to move the filter;

The filter feGaussianBlur is used to produce the effect of Gaussian blur, where stdDeviation specifies the degree of blur, the larger the value, the stronger the effect of blur. We can use attributes that reference the previous result.

In the Gaussian blur filter effect, feOffset is called through in to move the effect of the input source.

FeBlend was then used to place the original elements on top of the blurred results. Use in=”SourceAlpha” to make the blur black. If we were using in=”SourceGraphic”, the “shadow” would be the color of the original element.

Once the filter is defined, place the SVG filter object in HTML so that it can be used within elements.

SVG ColorMatrix (feColorMatrix)

Color matrix filter, is a matrix calculation, the image of the color of each channel (based on RGBA) recalculated output, can achieve a variety of different color change effects.

We know that each color is composed of four color channels R (red), G (green), B (blue), and A (transparent/Alpha), and each channel has color levels from 0 to 255. By converting the color matrix, the color of each pixel in the picture can be changed. The formula is as follows:

The last column does not represent any channel, and the offset used to represent the color is used to add or subtract, that is, the value that a number will add to its channel multiplied by 255.

The example analysis

Take a look at the SVG filter defined in the original effect:

<svg>
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5"/>
      <feColorMatrix in="blur" result="colormatrix"
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 18 -8" />
      <feBlend in="SourceGraphic" in2="colormatrix"/>
    </filter>
  </defs>
</svg>
Copy the code

As you can see from the above code, the RGB channel is normal without adjustment. This is mainly for the alpha channel. Multiply the alpha channel by 18 and subtract 7 * 255 from this value to increase the contrast of the transparent channel.

To break it down, the first filter is blurred. Then use the feColorMatrix filter to increase the contrast of alpha, which is mixed with blur and feBlend to produce a sticky effect.

What exactly is the mechanism of bonding here?

When a blur filter is applied to an element, it causes the element to appear blurred. With contrast filters, when you increase the contrast of the colors enough, the elements become sharp.

When the two filters are applied to both elements, they stick together, as shown below:

Source code address

For a detailed explanation, check out this article.

Once the filter is defined, we can use it in our CSS. Apply the filter to the container of elements we want to stick together. For example, in the example above, we apply the filter to the head to produce a sticky effect.

header {
  -webkit-filter: url("#goo");
          filter: url("#goo");
}
Copy the code

An elegant rolling stick effect is done.

References:

SVG Research Path (11) – Filter :feColorMatrix

Rounding feColorMatrix

Easy to open SVG filters

Did this article help you? Welcome to join the front End learning Group wechat group: