SVG filter effects

feBlend

The <feBlend> SVG filter primitive composes two objects together ruled by a certain blending mode. This is similar to what is known from image editing software when blending two layers.

-- MDN

props: in (opens in a new tab) in2 (opens in a new tab) mode (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#blend)" }}>
        <svg style={{height: 1}}>
            <filter id="blend">
                <feGaussianBlur result="blur" stdDeviation="10" />
                <feBlend in2="SourceGraphic" mode="multiply" />
            </filter>
        </svg>
        <Logo />
    </div>
}

feColorMatrix

The <feColorMatrix> SVG filter element changes colors based on a transformation matrix. Every pixel's color value [R,G,B,A] is matrix multiplied by a 5 by 5 color matrix to create new color [R',G',B',A'].

-- MDN

props: in (opens in a new tab) type (opens in a new tab) values (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#colorMatrix)" }}>
        <svg style={{height: 1}}>
            <filter id="colorMatrix">
                <feColorMatrix in="SourceGraphic"
                    type="matrix"
                    values="2 0 0 0 0 0 1 0 0 0 0 0 2 0 0 0 0 0 0.9 0" />
            </filter>
        </svg>
        <Logo />
    </div>
}

feComponentTransfer

The <feComponentTransfer> SVG filter primitive performs color-component-wise remapping of data for each pixel. It allows operations like brightness adjustment, contrast adjustment, color balance or thresholding.
The calculations are performed on non-premultiplied color values. The colors are modified by changing each channel (R, G, B, and A) to the result of what the children <feFuncR>, <feFuncB>, <feFuncG>, and <feFuncA> return.

-- MDN

props: in (opens in a new tab)

child elements: feFuncR feFuncG feFuncb feFuncA

More explanation can read the W3C doc (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#componentTransfer)" }}>
        <svg style={{height: 1}}>
            <filter id="componentTransfer">
                <feComponentTransfer>
                    {/* reverse the channel R */}
                    <feFuncR type="table" tableValues="1 0"></feFuncR>
                    <feFuncG type="table" tableValues="0 1"></feFuncG>
                    <feFuncB type="table" tableValues="0 1"></feFuncB>
                    <feFuncA type="table" tableValues="0 1"></feFuncA>
                </feComponentTransfer>
            </filter>
        </svg>
        <Logo />
    </div>
}

feComposite

The <feComposite> SVG filter primitive performs the combination of two input images pixel-wise in image space using one of the Porter-Duff compositing operations: over, in, atop, out, xor, lighter, or arithmetic.

-- MDN

props: in (opens in a new tab) in2 (opens in a new tab) operator (opens in a new tab) k1 (opens in a new tab) k2 k3 k4

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#composite)" }}>
        <div style={{display: 'block', position: 'absolute', top: 0, left: 0, opacity: 0}}>
            <svg id="composite-rect">
                <rect x="0" y="0" width="332" height="100" fill="black"/>
            </svg>
        </div>
        <svg style={{height: 1}}>
            <filter id="composite">
                <feImage xlinkHref="#composite-rect"/>
                <feComposite in="SourceGraphic" operator="in"/>
            </filter>
        </svg>
        <Logo />
    </div>
}

feDiffuseLighting

The <feDiffuseLighting> SVG filter primitive lights an image using the alpha channel as a bump map. The resulting image, which is an RGBA opaque image, depends on the light color, light position and surface geometry of the input bump map.

-- MDN

props: in (opens in a new tab) surfaceScale (opens in a new tab) diffuseConstant (opens in a new tab)

child elements: fePointLight feDistanceLight feSpotLight

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#diffuseLighting)" }}>
        <svg style={{ height: 1 }}>
            <filter id="diffuseLighting">
                <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
                    <fePointLight x="240" y="162" z="20" />
                </feDiffuseLighting>
                <feComposite in="SourceGraphic" operator="arithmetic" k1="1"/>
            </filter>
        </svg>
        <Logo />
    </div>
}

feSpecularLighting

The <feSpecularLighting> SVG filter primitive lights a source graphic using the alpha channel as a bump map. The resulting image is an RGBA image based on the light color. The lighting calculation follows the standard specular component of the Phong lighting model. The resulting image depends on the light color, light position and surface geometry of the input bump map. The result of the lighting calculation is added. The filter primitive assumes that the viewer is at infinity in the z direction.

-- MDN

props: in (opens in a new tab) surfaceScale (opens in a new tab) specularConstant (opens in a new tab) specularExponent (opens in a new tab)

child elements: fePointLight feDistanceLight feSpotLight

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#specularLighting)" }}>
        <svg style={{ height: 1 }}>
            <filter id="specularLighting">
                <feSpecularLighting in="SourceGraphic" result="light" lighting-color="white" specularExponent="20">
                    <fePointLight x="240" y="162" z="20" />
                </feSpecularLighting>
                <feComposite in="SourceGraphic" operator="arithmetic" k2="1" k3="1"/>
            </filter>
        </svg>
        <Logo />
    </div>
}

feDisplacementMap

The <feDisplacementMap> SVG filter primitive uses the pixel values from the image from in2 to spatially displace the image from in.

-- MDN

props: in (opens in a new tab) in2 (opens in a new tab) scale (opens in a new tab) xChannelSelector (opens in a new tab) yChannelSelector (opens in a new tab)

child elements: fePointLight feDistanceLight feSpotLight

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#displacementMap)" }}>
        <svg style={{ height: 1 }}>
            <filter id="displacementMap">
                <feTurbulence type="turbulence" baseFrequency="0.00222"
                    numOctaves="2" result="turbulence"/>
                <feDisplacementMap in2="turbulence" in="SourceGraphic"
                    scale="50" xChannelSelector="R" yChannelSelector="G"/>
            </filter>
        </svg>
        <Logo />
    </div>
}

feDropShadow

The SVG <feDropShadow> filter primitive creates a drop shadow of the input image.

-- MDN

props: dx (opens in a new tab) dy (opens in a new tab) stdDeviation (opens in a new tab) flood-color (opens in a new tab) flood-opacity (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#dropShadow)" }}>
        <svg style={{ height: 1 }}>
            <filter id="dropShadow">
                <feDropShadow dx="16" dy="16" stdDeviation="2" flood-color="gray" flood-opacity="0.6"/>
            </filter>
        </svg>
        <Logo />
    </div>
}

feFlood

The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.

-- MDN

props: flood-color (opens in a new tab) flood-opacity (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#flood)" }}>
        <svg style={{ height: 1 }}>
            <filter id="flood">
                <feFlood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/>
                {/* <feComposite in2="SourceGraphic"/> */}
            </filter>
        </svg>
        <Logo />
    </div>
}

feGaussianBlur

The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.

-- MDN

props: in (opens in a new tab) stdDeviation (opens in a new tab) edgeMode (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#gaussianBlur)" }}>
        <svg style={{ height: 1 }}>
            <filter id="gaussianBlur">
                <feGaussianBlur stdDeviation="8" />
            </filter>
        </svg>
        <Logo />
    </div>
}

feImage

The <feFlood> SVG filter primitive fills the filter subregion with the color and opacity defined by flood-color and flood-opacity.

-- MDN

props: xlink:href (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#image)" }}>
        <svg style={{ height: 1 }}>
            <filter id="image">
                <feImage xlinkHref="#gaussianBlur-logo"/>
            </filter>
        </svg>
        <Logo id="gaussianBlur-logo"/>
    </div>
}

feMerge

The <feMerge> SVG element allows filter effects to be applied concurrently instead of sequentially. This is achieved by other filters storing their output via the result attribute and then accessing it in a <feMergeNode> child.

-- MDN

child elements: feMergeNode (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: "url(#merge)" }}>
        <svg style={{ height: 1 }}>
            <filter id="merge">
                <feOffset in="SourceGraphic" dx="16" dy="16" />
                <feGaussianBlur stdDeviation="8" result="blur" />
                <feMerge>
                    <feMergeNode in="blur" />
                    <feMergeNode in="SourceGraphic" />
                </feMerge>
            </filter>
        </svg>
        <Logo />
    </div>
}

feMorphology

The <feMorphology> SVG filter primitive is used to erode or dilate the input image. Its usefulness lies especially in fattening or thinning effects.

-- MDN

props: in (opens in a new tab) operator (opens in a new tab) radius (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div>
        <svg style={{ height: 1 }}>
            <filter id="morphology-dilate">
                <feMorphology operator="dilate" radius="3"/>
            </filter>
        </svg>
        <Logo filter="url(#morphology-dilate)"/>
    </div>
}

feOffset

The <feOffset> SVG filter primitive allows to offset the input image. The input image as a whole is offset by the values specified in the dx and dy attributes.

-- MDN

props: in (opens in a new tab) dx (opens in a new tab) dy (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: 'url(#offset)' }}>
        <svg style={{ height: 1 }}>
            <filter id="offset">
                <feOffset in="SourceGraphic" dx="-100" dy="-80" />
            </filter>
        </svg>
        <Logo />
    </div>
}

feTile

The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a <pattern>.

-- MDN

props: in (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: 'url(#tile)' }}>
        <svg style={{ height: 1 }}>
            <filter id="tile">
                <feTile x="40" y="140" width="250" height="96" />
            </filter>
        </svg>
        <Logo />
    </div>
}

The <feTile> SVG filter primitive allows to fill a target rectangle with a repeated, tiled pattern of an input image. The effect is similar to the one of a <pattern>.

-- MDN

props: baseFrequency (opens in a new tab) numOctaves (opens in a new tab) seed (opens in a new tab) stitchTiles (opens in a new tab) type (opens in a new tab)

import Logo from "./Logo"
  
export default () => {
    return <div style={{ filter: 'url(#turbulence)' }}>
        <svg style={{ height: 1 }}>
            <filter id="turbulence">
                <feTurbulence baseFrequency="0.05" numOctaves="1"/>
                <feComposite type="multiply"/>
            </filter>
        </svg>
        <Logo />
    </div>
}