SVG Filter Play


I've isolated these from the other examples (SVG Animation with Javascript), since they tend to form a collection of similar things.

To my knowledge all of these require either Opera 9.0 or Internet Explorer for Windows with the Adobe plugin. Please let me know if you see obvious ways to make any of them work elsewhere. Nearly as I can tell, Firefox 1.5 does not yet support most filter effects.

* If a link only works in IE it is flagged with an asterisk. Note: I only recently discovered that many of these do in fact work in Opera, so I have only recently started to rewrite the code so that it might be cross-browser compliant.

effects Standalone SVG
w/SMIL
Using HTML or JavaScript to change SVG SVG tags used
user actions animate blurring of path, text, and JPEG image. Compare SMIL w/Javascript. blur filter*
<feGaussianBlur>
<animate attributeName>
path filled with gradient is subjected to user-selected turbulence in a JavaScript animation turbulence1 distortion filter
distortion of an image

more of the same
<feTurbulence>
<feDisplacementMap>
<radialGradient>
<stop>
<path>
Imagery is distorted (displaced) by color values of other imagery.   aking warp from color ,
warp from rotated color
 warp from color applied to image ,
vice-versa
<feDisplacementMap>
Image is deconstructed feMorphology with dilate or erode* feMorphology applied to an image
<feMorphology  
operator='dilate'>
Image rotates one direction; clipping shape goes the other. rotate image and shape* rotating an image within a shape*
<feImage>
<feComposite>
<g>
<ellipse>
Rotating the hue of various graphics hueRotate* --not needed-- <feColorMatrix>
<animate AttributeName>
Desaturating an image to greyscale type="saturate"*   <feColorMatrix type="saturate">
<animate AttributeName>
Five modes of blending Blend* --not needed-- <feBlend>
<g enable-background="new">
Arithmetic operator of  feComposite Combining original image with desaturated version   <feColorMatrix type="hueRotate">
<feComposite in="SourceGraphic"  operator="arithmetic">
Matrix convolutions convolve and composite   <feBlend>
<feComponentTransfer>
<feConvolveMatrix>
Photographic negative 
(inverting the colors)
feFuncX*   <feComponentTransfer> 
<feFuncR type="table">
<feComposite>
Subtracting images Image=(A-B) and
Image=(B-A)
  <feComponentTransfer> 
<feFuncR type="table">
<feComposite>
Image is deconstructed feMorphology with dilate or erode* feMorphology applied to an image
<feMorphology  
operator='dilate'>
Tiling with svg content feTile with two
merged feFlood's
  <feFlood>
<feMerge><feMergeNode>
<feTile/>
(an probably an <animate> or two
for good measure)
Tiling with jpg image feTile with two merged feImage's*   <feImage>
<feMerge><feMergeNode>
<feTile/>
(an probably an <animate> or two
for good measure)

dynamic insertion of stars into rotating path used to screen an image 

inserting stars into a rotating path used to screen an image* --not needed--
<g>
<rect>
<text>some</text>
<path>
<animateTransform>
<use>
<filter>
<feImage>
<feComposite>
 Carving an image with stencil provided by letters typed by user --requires HTML--
(for <input type=text>)
applying shape and dynamic text masks to an image*
<feImage />
<feComposite />
<g />
<path />
<text>Dynamic</text>
Slicing an image -- the slow way   using feOffset's and feTile's to slice an image (wait 10-20 seconds for it to render) <feImage>
<feMerge><feMergeNode>
<feTile/>
<feOffset>
Slicing images using dynamically built checkerboards with feDisplacement -- fast but unpredictable?   attempt1
attempt2
attempt3
<feImage>
<feDisplacementMap>
Quick slices but not easily separated. Using a filter, every other cell of a dynamic grid is filled with a different image.   flicker.svg <feImage>
<feComposite>
<g/><!--consisting of checkerboard squares-->
 
A cloudy day   filterTurbulence <feImage>
<feTurbulence>
<feMorphology>
<feComponentTransfer>
<feColorMatrix>