Following is a list of available filter effects along with examples where applicable. More detailed information along with implementation issues can be found in the SVG Specification.
feBlend example: <feBlend result="Blend" mode="screen"< in2="OffsetAlpha" in="SourceGraphic" /> attributes: mode, One of the image blending modes. Default is: normal. in2, The second image for the compositing operation. This filter composites two objects together using commonly used high-end imaging software blending modes. Performs the combination of the two input images pixel-wise in image space. feColorMatrix example: <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 " result="ColorMatrix"/> attributes: type, string (one of: matrix, saturate, hue-rotate, luminance-to-alpha) values feComponentTransfer example: <feComponentTransfer in="SourceAlpha" result="FilterExample"><feFuncR type="table" tableValues=".5 0"/> <feFuncG type="table" tableValues=".5 0"/> </feComponentTransfer> attributes: none. This filter allows operations like brightness adjustment, contrast adjustment, color balance, or thresholding. feComposite example: <feComposite in="BluredAlpha" in2="SourceGraphic" operator="out" result="CompBlurOut"/> attributes: operator, one of (over, in, out, atop, xor, arithmetic). Default is: over. arithmetic -- constants, k1,k2,k3,k4 in2, The second image for the compositing operation. arithmetic is useful for combining the output from the feDiffuseLighting and feSpecularLighting filters with texture data. arithmetic is also useful for implementing dissolve. feDiffuseLighting example: <feDiffuseLighting in="SourceAlpha" resultScale="3" surfaceScale="20" diffuseConstant="1" lightColor="white" result="DiffuseLighting"> <feDistantLight azimuth="40" elevation="100"/> attributes: resultScale (Multiplicative scale for the result. This allows the result of the feDiffuseLighting node to represent values greater than 1) surfaceScale height of surface when Ain= 1. diffuseConstant kd in Phong lighting model. Range 0.0 to 1.0 lightColor RGB This filter produces a light map, which can be combined with a texture image using the multiply term of the arithmetic <Composite> compositing method. Multiple light sources can be simulated by creating additional light nodes as children to the feDiffuseLighting node. feDisplacementMap example: <feTurbulence baseFrequency="0.08" numOctaves="3" result="turb"/> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G"/> attributes: scale xChannelSelector one of R,G,B or A. yChannelSelector one of R,G,B or A in2, The image whose color values determine the corresponding displacements. The channel selectors determine which color channels from the second image are used to offset the pixels in the first input image. For example, if xChannelSelector is R, yChannelSelector is G, and the second imput image has a red value of 15 and the green value of 12 at the pixel (4.4), then the filter effect will move the source pixel at (4,4) 15 user units along the X axis and 12 user units along the Y axis. feFlood example: <feFlood style="flood-color:blue; flood-opacity:.5" result="Flood"/> attributes: style, to specify the 'flood-color' and 'flood-opacity' properties (both non-inheritable) to specify an RGBA color. Creates an image with infinite extent filled with color. feGaussianBlur example: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> attributes: stdDeviation. Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary. feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
example:
<feBlend result="Blend" mode="screen"< in2="OffsetAlpha" in="SourceGraphic" />
attributes: mode, One of the image blending modes. Default is: normal. in2, The second image for the compositing operation.
This filter composites two objects together using commonly used high-end imaging software blending modes. Performs the combination of the two input images pixel-wise in image space.
feColorMatrix example: <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 " result="ColorMatrix"/> attributes: type, string (one of: matrix, saturate, hue-rotate, luminance-to-alpha) values feComponentTransfer example: <feComponentTransfer in="SourceAlpha" result="FilterExample"><feFuncR type="table" tableValues=".5 0"/> <feFuncG type="table" tableValues=".5 0"/> </feComponentTransfer> attributes: none. This filter allows operations like brightness adjustment, contrast adjustment, color balance, or thresholding. feComposite example: <feComposite in="BluredAlpha" in2="SourceGraphic" operator="out" result="CompBlurOut"/> attributes: operator, one of (over, in, out, atop, xor, arithmetic). Default is: over. arithmetic -- constants, k1,k2,k3,k4 in2, The second image for the compositing operation. arithmetic is useful for combining the output from the feDiffuseLighting and feSpecularLighting filters with texture data. arithmetic is also useful for implementing dissolve. feDiffuseLighting example: <feDiffuseLighting in="SourceAlpha" resultScale="3" surfaceScale="20" diffuseConstant="1" lightColor="white" result="DiffuseLighting"> <feDistantLight azimuth="40" elevation="100"/> attributes: resultScale (Multiplicative scale for the result. This allows the result of the feDiffuseLighting node to represent values greater than 1) surfaceScale height of surface when Ain= 1. diffuseConstant kd in Phong lighting model. Range 0.0 to 1.0 lightColor RGB This filter produces a light map, which can be combined with a texture image using the multiply term of the arithmetic <Composite> compositing method. Multiple light sources can be simulated by creating additional light nodes as children to the feDiffuseLighting node. feDisplacementMap example: <feTurbulence baseFrequency="0.08" numOctaves="3" result="turb"/> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G"/> attributes: scale xChannelSelector one of R,G,B or A. yChannelSelector one of R,G,B or A in2, The image whose color values determine the corresponding displacements. The channel selectors determine which color channels from the second image are used to offset the pixels in the first input image. For example, if xChannelSelector is R, yChannelSelector is G, and the second imput image has a red value of 15 and the green value of 12 at the pixel (4.4), then the filter effect will move the source pixel at (4,4) 15 user units along the X axis and 12 user units along the Y axis. feFlood example: <feFlood style="flood-color:blue; flood-opacity:.5" result="Flood"/> attributes: style, to specify the 'flood-color' and 'flood-opacity' properties (both non-inheritable) to specify an RGBA color. Creates an image with infinite extent filled with color. feGaussianBlur example: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> attributes: stdDeviation. Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary. feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
example: <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 " result="ColorMatrix"/>
attributes: type, string (one of: matrix, saturate, hue-rotate, luminance-to-alpha) values
feComponentTransfer example: <feComponentTransfer in="SourceAlpha" result="FilterExample"><feFuncR type="table" tableValues=".5 0"/> <feFuncG type="table" tableValues=".5 0"/> </feComponentTransfer> attributes: none. This filter allows operations like brightness adjustment, contrast adjustment, color balance, or thresholding. feComposite example: <feComposite in="BluredAlpha" in2="SourceGraphic" operator="out" result="CompBlurOut"/> attributes: operator, one of (over, in, out, atop, xor, arithmetic). Default is: over. arithmetic -- constants, k1,k2,k3,k4 in2, The second image for the compositing operation. arithmetic is useful for combining the output from the feDiffuseLighting and feSpecularLighting filters with texture data. arithmetic is also useful for implementing dissolve. feDiffuseLighting example: <feDiffuseLighting in="SourceAlpha" resultScale="3" surfaceScale="20" diffuseConstant="1" lightColor="white" result="DiffuseLighting"> <feDistantLight azimuth="40" elevation="100"/> attributes: resultScale (Multiplicative scale for the result. This allows the result of the feDiffuseLighting node to represent values greater than 1) surfaceScale height of surface when Ain= 1. diffuseConstant kd in Phong lighting model. Range 0.0 to 1.0 lightColor RGB This filter produces a light map, which can be combined with a texture image using the multiply term of the arithmetic <Composite> compositing method. Multiple light sources can be simulated by creating additional light nodes as children to the feDiffuseLighting node. feDisplacementMap example: <feTurbulence baseFrequency="0.08" numOctaves="3" result="turb"/> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G"/> attributes: scale xChannelSelector one of R,G,B or A. yChannelSelector one of R,G,B or A in2, The image whose color values determine the corresponding displacements. The channel selectors determine which color channels from the second image are used to offset the pixels in the first input image. For example, if xChannelSelector is R, yChannelSelector is G, and the second imput image has a red value of 15 and the green value of 12 at the pixel (4.4), then the filter effect will move the source pixel at (4,4) 15 user units along the X axis and 12 user units along the Y axis. feFlood example: <feFlood style="flood-color:blue; flood-opacity:.5" result="Flood"/> attributes: style, to specify the 'flood-color' and 'flood-opacity' properties (both non-inheritable) to specify an RGBA color. Creates an image with infinite extent filled with color. feGaussianBlur example: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> attributes: stdDeviation. Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary. feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feComponentTransfer in="SourceAlpha" result="FilterExample"><feFuncR type="table" tableValues=".5 0"/> <feFuncG type="table" tableValues=".5 0"/> </feComponentTransfer>
attributes: none.
This filter allows operations like brightness adjustment, contrast adjustment, color balance, or thresholding.
feComposite example: <feComposite in="BluredAlpha" in2="SourceGraphic" operator="out" result="CompBlurOut"/> attributes: operator, one of (over, in, out, atop, xor, arithmetic). Default is: over. arithmetic -- constants, k1,k2,k3,k4 in2, The second image for the compositing operation. arithmetic is useful for combining the output from the feDiffuseLighting and feSpecularLighting filters with texture data. arithmetic is also useful for implementing dissolve. feDiffuseLighting example: <feDiffuseLighting in="SourceAlpha" resultScale="3" surfaceScale="20" diffuseConstant="1" lightColor="white" result="DiffuseLighting"> <feDistantLight azimuth="40" elevation="100"/> attributes: resultScale (Multiplicative scale for the result. This allows the result of the feDiffuseLighting node to represent values greater than 1) surfaceScale height of surface when Ain= 1. diffuseConstant kd in Phong lighting model. Range 0.0 to 1.0 lightColor RGB This filter produces a light map, which can be combined with a texture image using the multiply term of the arithmetic <Composite> compositing method. Multiple light sources can be simulated by creating additional light nodes as children to the feDiffuseLighting node. feDisplacementMap example: <feTurbulence baseFrequency="0.08" numOctaves="3" result="turb"/> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G"/> attributes: scale xChannelSelector one of R,G,B or A. yChannelSelector one of R,G,B or A in2, The image whose color values determine the corresponding displacements. The channel selectors determine which color channels from the second image are used to offset the pixels in the first input image. For example, if xChannelSelector is R, yChannelSelector is G, and the second imput image has a red value of 15 and the green value of 12 at the pixel (4.4), then the filter effect will move the source pixel at (4,4) 15 user units along the X axis and 12 user units along the Y axis. feFlood example: <feFlood style="flood-color:blue; flood-opacity:.5" result="Flood"/> attributes: style, to specify the 'flood-color' and 'flood-opacity' properties (both non-inheritable) to specify an RGBA color. Creates an image with infinite extent filled with color. feGaussianBlur example: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> attributes: stdDeviation. Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary. feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feComposite in="BluredAlpha" in2="SourceGraphic" operator="out" result="CompBlurOut"/>
attributes: operator, one of (over, in, out, atop, xor, arithmetic). Default is: over. arithmetic -- constants, k1,k2,k3,k4 in2, The second image for the compositing operation.
arithmetic is useful for combining the output from the feDiffuseLighting and feSpecularLighting filters with texture data. arithmetic is also useful for implementing dissolve.
feDiffuseLighting example: <feDiffuseLighting in="SourceAlpha" resultScale="3" surfaceScale="20" diffuseConstant="1" lightColor="white" result="DiffuseLighting"> <feDistantLight azimuth="40" elevation="100"/> attributes: resultScale (Multiplicative scale for the result. This allows the result of the feDiffuseLighting node to represent values greater than 1) surfaceScale height of surface when Ain= 1. diffuseConstant kd in Phong lighting model. Range 0.0 to 1.0 lightColor RGB This filter produces a light map, which can be combined with a texture image using the multiply term of the arithmetic <Composite> compositing method. Multiple light sources can be simulated by creating additional light nodes as children to the feDiffuseLighting node. feDisplacementMap example: <feTurbulence baseFrequency="0.08" numOctaves="3" result="turb"/> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G"/> attributes: scale xChannelSelector one of R,G,B or A. yChannelSelector one of R,G,B or A in2, The image whose color values determine the corresponding displacements. The channel selectors determine which color channels from the second image are used to offset the pixels in the first input image. For example, if xChannelSelector is R, yChannelSelector is G, and the second imput image has a red value of 15 and the green value of 12 at the pixel (4.4), then the filter effect will move the source pixel at (4,4) 15 user units along the X axis and 12 user units along the Y axis. feFlood example: <feFlood style="flood-color:blue; flood-opacity:.5" result="Flood"/> attributes: style, to specify the 'flood-color' and 'flood-opacity' properties (both non-inheritable) to specify an RGBA color. Creates an image with infinite extent filled with color. feGaussianBlur example: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> attributes: stdDeviation. Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary. feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feDiffuseLighting in="SourceAlpha" resultScale="3" surfaceScale="20" diffuseConstant="1" lightColor="white" result="DiffuseLighting"> <feDistantLight azimuth="40" elevation="100"/>
attributes: resultScale (Multiplicative scale for the result. This allows the result of the feDiffuseLighting node to represent values greater than 1) surfaceScale height of surface when Ain= 1. diffuseConstant kd in Phong lighting model. Range 0.0 to 1.0 lightColor RGB
This filter produces a light map, which can be combined with a texture image using the multiply term of the arithmetic <Composite> compositing method. Multiple light sources can be simulated by creating additional light nodes as children to the feDiffuseLighting node.
feDisplacementMap example: <feTurbulence baseFrequency="0.08" numOctaves="3" result="turb"/> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G"/> attributes: scale xChannelSelector one of R,G,B or A. yChannelSelector one of R,G,B or A in2, The image whose color values determine the corresponding displacements. The channel selectors determine which color channels from the second image are used to offset the pixels in the first input image. For example, if xChannelSelector is R, yChannelSelector is G, and the second imput image has a red value of 15 and the green value of 12 at the pixel (4.4), then the filter effect will move the source pixel at (4,4) 15 user units along the X axis and 12 user units along the Y axis. feFlood example: <feFlood style="flood-color:blue; flood-opacity:.5" result="Flood"/> attributes: style, to specify the 'flood-color' and 'flood-opacity' properties (both non-inheritable) to specify an RGBA color. Creates an image with infinite extent filled with color. feGaussianBlur example: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> attributes: stdDeviation. Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary. feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feTurbulence baseFrequency="0.08" numOctaves="3" result="turb"/> <feDisplacementMap in="SourceGraphic" in2="turb" scale="10" xChannelSelector="R" yChannelSelector="G"/>
attributes: scale xChannelSelector one of R,G,B or A. yChannelSelector one of R,G,B or A in2, The image whose color values determine the corresponding displacements.
The channel selectors determine which color channels from the second image are used to offset the pixels in the first input image. For example, if xChannelSelector is R, yChannelSelector is G, and the second imput image has a red value of 15 and the green value of 12 at the pixel (4.4), then the filter effect will move the source pixel at (4,4) 15 user units along the X axis and 12 user units along the Y axis.
feFlood example: <feFlood style="flood-color:blue; flood-opacity:.5" result="Flood"/> attributes: style, to specify the 'flood-color' and 'flood-opacity' properties (both non-inheritable) to specify an RGBA color. Creates an image with infinite extent filled with color. feGaussianBlur example: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> attributes: stdDeviation. Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary. feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feFlood style="flood-color:blue; flood-opacity:.5" result="Flood"/>
attributes: style, to specify the 'flood-color' and 'flood-opacity' properties (both non-inheritable) to specify an RGBA color.
Creates an image with infinite extent filled with color.
feGaussianBlur example: <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/> attributes: stdDeviation. Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary. feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
attributes: stdDeviation.
Frequently this operation will take place on alpha-only images, such as that produced by the built-in input, SourceAlpha. The implementation may notice this and optimize the single channel case. If the input has infinite extent and is constant, this operation has no effect. If the input has infinite extent and is a tile, the filter is evaluated with periodic boundary.
feImage example: <feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/> attributes: xlink:href, reference to external image data. transform, supplemental transformation specification. The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source. feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feImage transform="translate(0 10)" xlink:href="image.jpg" result="BackgroundImage"/>
attributes: xlink:href, reference to external image data. transform, supplemental transformation specification.
The xlink:href could refer to an external image, or just be a reference to another piece of SVG. This node produces an image similar to the built-in image source SourceGraphic, except from an external source.
feMerge example: <feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge> attributes: none. Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form. feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feMerge> <feMergeNode in="offsetBlurredAlpha"/> <feMergeNode in="litPaint"/> </feMerge>
Many effects produce a number of intermediate layers in order to create the final output image. This filter allows you to collapse those into a single image. Although this could be done by using n-1 feComposite nodes, it is more convenient to have this common operation available in this form.
feMorphology example: <feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" /> example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feMorphology result="DilateEx" radius="1" operator="dilate" in="SourceGraphic" />
example: <feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/> attributes: operator,one of erode or dilate. radius, extent of operation. This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel. feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feMorphology in="SourceGraphic" operator="erode" radius="1" result="ErodeEx"/>
attributes: operator,one of erode or dilate. radius, extent of operation.
This filter is intended to have a similar effect as the min/max filter in Photoshop and the width layer attribute in ImageStyler. It is useful for "fattening" or "thinning" an alpha channel.
feOffset example: <feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" /> attributes: dx, dy. Offsets an image relative to its current position in the image space by the specified amount. feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feOffset result="OffsetSource" dx="10" dy="10" in="SourceGraphic" />
attributes: dx, dy.
Offsets an image relative to its current position in the image space by the specified amount.
feSpecularLighting example: <feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting> attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB. This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node. feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feSpecularLighting in="BlurAlpha" surfaceScale="5" specularConstant="1" specularExponent="10" lightColor="white" result="SpecularLightingExample"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting>
attributes: surfaceScale height of surface when Ain = 1. specularConstant ks in Phong lighting model. Range 0.0 to 1.0. specularExponent exponent for specular term, larger is more "shiny". Range 1.0 to 128.0. lightColor RGB.
This filter produces an image that contains the specular reflection part of the lighting calculation. Such a map is intended to be combined with a texture using the add term of the arithmetic Composite method. Multiple light sources can be simulated by creating additional light nodes as children to the feSpecularLighting node.
feTile example: <feTile in="SourceGraphic" result="TileEx"/> attributes: none. Creates an image with infinite extent by replicating source image in image space. feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feTile in="SourceGraphic" result="TileEx"/>
Creates an image with infinite extent by replicating source image in image space.
feTurbulence example: <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/> attributes: baseFrequency numOctaves type, one offractalNoise or turbulence. This filter allows the synthesis of complex textures like clouds or marble. A selection of our favorite recipes: Crazy Lava Filter 3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2" result="TurbulenceExample"/>
attributes: baseFrequency numOctaves type, one offractalNoise or turbulence.
This filter allows the synthesis of complex textures like clouds or marble.
A selection of our favorite recipes:
Crazy Lava Filter
3d Splat Filter Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
3d Splat Filter
Soft Focus Filter ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
Soft Focus Filter
ilvery Outline Filter Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
ilvery Outline Filter
Also see the demos and examples area for additional filter recipes. Next lesson: JPEGs, GIFs and PNGs
Also see the demos and examples area for additional filter recipes.
Next lesson: JPEGs, GIFs and PNGs