SVG animation with JavaScript and SMIL


Why is SVG important?

See SVG Overview for lots of good reasons that you should use SVG.

SVG in the browser

Despite SVG's status as a W3C recommendation, you'll need to make sure your browser can see it.

W3C and SVG

I've been involved in the SVG Interest Group, and have engaged in some babble about extending the spec to include new and wilder things. Here is another view of some of said babble.

A link to the W3C's An SVG Primer for Today's Browsers and several links to other informative SVG sites




Site contents
(links to the examples you'll find here, by type)



SVG with JavaScript animations
(no SMIL, so working in all modern browsers)
Effects Using HTML or JavaScript to change SVG SVG tags used
Reusing SVG objects to simplify code. using "use" for symmetry <use>
flipping an image like a coin transform=matrix transform="matrix(a b c d e f)"
evt.target.setAttribute("onclick",code)
animated oscillation and distortion of user-defined JPEG image warping an image
<clipPath>
<image>
<use>
.cloneNode
setAttribute("transform",Matrix)
Transparent gradient mask shrinks and expands over image transparency mask applied to image
<radialGradient>
<stop>
<mask>
<rect>
<image 
style="mask:url(#i)">
A collection of bezier curves are all changed in similar ways lots of bezier curves floating
same as above
changing gradient is applied to objects replicated across a pattern.  moving beziers embedded in a pattern over eyeballs to create moire effect
(best in IE and Opera)
same as above
and <radialGradient>
<pattern>
<circle>
<use>
User inserts new points at some proportion of the distance along a Bezier curve. new objects along Bezier createElementNS, setAttribute,
getPointAtLength(), getTotalLength
adjusting the position of a stop, of cx and of the radius of the gradient.Adjusting a radial gradient <radialGradient >
<stop>
evt.target.ownerDocument
.getElementById( );
adjusting the center and focal point of a radial gradient (cx,fx,fy)grouping, rotation, and dynamic gradient
 
<radialGradient >
<stop>
.setAttributeNS( )
adjusting the offset, rotate and scale of a gradientrotating a linear gradient
another
and kaleidoscopic decahedra
<radialGradient >
<stop>
.setAttributeNS( )
Effects Using HTML or JavaScript to change SVG SVG tags used



Examples: SVG with SMIL (no JavaScript)
(Working in IE/ASV and Opera. Dec. 2008: Firefox has SMIL on the way [reference])
Effects Standalone SVG w/SMIL SVG tags used
spirals of color moving ovals
only 38 lines of markup -- no script
<ellipse>
<animateTransform>
<animateColor>
<use>
<radialGradient>
Reusing SVG objects to simplify code. using and reusing
<use>
<ellipse>
pattern / dynamic gradient grid with rotating gradient 1
grid with rotating gradient 2
<pattern>
<radialGradient>
<animateColor>
<animateTransform>
<animate AttributeName>
Transparent gradient mask shrinks and expands over image mask and gradient opacity
<radialGradient>
<stop>
<mask>
<rect>
<image 
style="mask:url(#i)">
Clippaths for warping clipPaths for warping (IE and Opera)
<clipPath>
<image>
<animate>
 Intersecting clipPathsplaying with clipPaths
<clipPath>
<image>
<use>
<animate AttributeName>
Text animated along a Bezier curve as text changes its startOffsetAnimating the startOffset of text on a curve

using a negative value for startOffset (IE only)

<text>
<textPath
xlink:href="#c">
radial gradient with spread methodbullseye patterns with SMIL
<radialGradient spreadMethod="reflect">
O.setAttributeNS(null, attr, x) 
EffectsStandalone SVG w/SMIL (IE and Opera)SVG tags used


Examples using both SMIL and JavaScript.
(Working in IE/ASV and Opera. Dec. 2008: Firefox has SMIL on the way [reference])
EffectsStandalone SVG w/SMIL SVG tags used
Rotating an image and its clipping path (clipPath or feComposite)Clip or composite?
SMIL or JavaScript?
<feImage >
<feComposite>
<animateTransform>
<clipPath>
<image>
.setAttribute ( )
.getElementById( )
User determines rows and columns and nature of juxtaposition.Dynamic slices and juxtaposition of images (Notes: It works well in Opera 9.5, but seems to run out of memory in IE. Of course the SMIL doesn't work in FF, Chrome.or Safari yet)
createElementNS(xmlns,"clipPath");
<clipPath>
setAttributeNS()
pattern / dynamic gradient grid with rotating gradient 1
grid with rotating gradient 2
<pattern>
<radialGradient>
<animateColor>
<animateTransform>
<animate AttributeName>
Transparent gradient mask shrinks and expands over image mask and gradient opacity
<radialGradient>
<stop>
<mask>
<rect>
<image style="mask:url(#i)">
 Intersecting clipPathsplaying with clipPaths
<clipPath>
<image>
<use>
<animate AttributeName>
Text following Bezier curve either as curve changes shape or as text changes its startOffsetText crawling along a Bezier curve.
<text>
<textPath
xlink:href="#c">
Doc.getElementById("c")
setAttribute ("d", B);
Clock shows current time.Clock with impressionist tinge
cloneNode
stroke-dasharray
animateTransform
pattern / dynamic gradientpattern with rippling gradient
<pattern>
<radialGradient>
<animateColor>
<animateTransform>
<animate AttributeName>
Growing a triangular polygon nondeterministicallyCrawling trianglescloneNode
gradientTransform
removeChild
 
EffectsStandalone SVG w/SMIL (IE and Opera)SVG tags used
 

SVG and Filters. Filters provide ways of combining and transforming not just vector graphics but bitmapped graphics (such as JPEG images) as well.  Most of these do not work (yet) in Firefox, but Opera 9.0 now supports many of these effects.

Textures and scenes- based primarily on feTurbulence, these compound filters are meant to convey some familiar things. an older version

Filter effects (Opera, IE/ASV and Firefox)
EffectsUsing HTML or JavaScript to change SVGSVG tags used
Transparent gradient mask shrinks and expands over image transparency mask applied to image
<radialGradient>
<stop>
<mask>
<rect>
<image
style="mask:url(#i)">
A series of offsets are constructed in JavaScript and embedded into a gradient. The gradient's red channel is then used to displace the picture above it. Other pictures may be substituted by user.building custom gradients to ripple under an image<filter>
<feImage>
<feDisplacementMap>
.setAttribute( )
removeChild( )
.createElementNS( )
 
user actions animate blurring of path, text, and JPEG image.Compare SMIL w/Javascript.<feGaussianBlur>
<animate attributeName>
path filled with gradient is subjected to user-selected turbulence in a JavaScript animationturbulence1<feTurbulence>
<feDisplacementMap>
<radialGradient>
<stop>
<path>
Arithmetic operator of feCompositeCombining original image with desaturated version<feColorMatrix type="hueRotate">
<feComposite in="SourceGraphic"  operator="arithmetic">
Matrix convolutionsconvolve and composite<feBlend>
<feComponentTransfer>
<feConvolveMatrix>
Subtracting imagesImage=(A-B) and
Image=(B-A)
<feComponentTransfer> 
<feFuncR type="table">
<feComposite>
Tiling with svg contentfeTile with two
merged feFlood's
<feFlood>
<feMerge><feMergeNode>
<feTile/>
(and probably an <animate> or two
for good measure)
Slicing an image -- the slow wayusing 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 dayfilterTurbulence<feImage>
<feTurbulence>
<feMorphology>
<feComponentTransfer>
<feColorMatrix>
Complex textures (compound filters often begun with feTurbulence)Textures and scenes<tags variety="many">
Using feImage and feComposite to do something like a clipPath, only different.star-clips<feImage>
<feComposite>
<animateTransform>
Barber pole: Simulating cylindrical rotation by dragging a rectangle through a clipPathbarberpole 
EffectsUsing HTML or JavaScript to change SVGSVG tags used



Tiling
(tessellations with JavaScript or <pattern>)
EffectsUsing HTML or JavaScript to change SVGSVG tags used

Toroidal tilings with random four-regular pseudo-graphs of genus one -- change the crossing density to eliminate loops and multilines.

tiling the plane with subgraphs
<tags>
See also some links that explain how triangular knot-tiles are generated.

tiling the plane with triangular subgraphs

the same thing in HTML -- the rescale button is working on this one in IE -- HTML widgets come in handy sometimes

<tags>
Speaking of knots. They can be used for highway-construction. Traveling over and under parts of a knot. 
Measure the screen and then tile away. Lots of animation. filling the browser window with clickable hexagons<tags>
behind triangular tessellationAnimated rotating gradient
More rotating gradients
<gradientTransform>
<animateTransform>
Triangular tiling with animated gradients, using <pattern> Sunrise in Tokyo 
Rotating squares and triangles using <pattern> Recombinant Scrambled Egg: 
Using <pattern> to do non-rectilinear (but rational) things.pentagonal tile 
EffectsUsing HTML or JavaScript to change SVGSVG tags used



SVG with DOM and JavaScript
(toward building applications in SVG)
DescriptionLinksSVG tags used
Drawing programs are natural for SVG -- Inkscape is very good, but how about one that is web-based?

Here we do some very simple things.

 

 

creating and dragging (simplified code)

creating and dragging (manually or automatically)

 
<tags>
  dragging objects around<tags>
  drawing and moving rectangles around or drawing, selecting and moving paths around *<tags>
  Experiment with textarea (working in IE, FF, and Safari so far)<tags>
Dr. Whitfield and I recently published a paper on how to do this in a way that is computationally efficient. drawing random polygons (why it's hard)
drawing random polygons (an O(N^3) heuristic, that often works)
 
 

Calculating angles (SVG & HTML)

 
I think this is the current version of this program. (there are several laying around)

SVG drawing package

 
See also this project (built in VML and running only in IE) -- it was my inspiration for getting started with SVG)

SVG graph drawing package and something similar with lexical, declarative or Euclidean proximity

SVG graph drawing for mobile networks

 
  Non-affine transformations of bricks (using multiple gradients) 
  An SVG HSB picker with conserved real estate 
 

Serializing items in an SVG document using printNode() -- *

Serializing a simple SVG document including script from HTML

GetCTM -- finding the bounding box after transformations

 

 
  passing events back and forth between SVG and HTML* 
 

Exploring SVG DOM*

 
  Fancier random walk (see below for a simple one) Smiling random walk 
EffectsUsing HTML or JavaScript to change SVGSVG tags used

Simple templates

A standard template involving namespaces, script, tags, and DOM calls.

The simplest SVG document (working across browsers)

Using <object> in a way that works in IE

A simple grid

A simple random walk


The fancy stuff:

Artsy stuff -- Art from my recent exhibit: some SVG, some HTML, some both; most require MSIE.

older fancy stuff*

Bunches of examples developed for the SVG Primer

Some newer examples (waiting to be categorized)

link to SVGOpen 2007 remarks

SVGOpen 2008:

Edges of Plausibility: Outline or Paper

SVGOpen 2009 :

SVGOpen 2010:

polygons

<replicate> -- in preparation

Filter Effects Workshop

Rotating slide show (some are still IE-only)


Unsolved problems (at least for me)

SVG Questions

font play and problems


* -- Working only in Internet Explorer. Firefox 2.x does not yet support SMIL nor many filters. Opera 9.5 will run most things if I find time to rewrite them properly.

See copyright notice.

See also: 

Dailey / Javascript Tasks

Dailey/JavaScript Fun and Games

Dailey main page

Send comments to david.dailey@sru.edu .


Leftovers needing work (things that might only work in IE at present):

Text following Bezier curve either as curve changes shape or as text changes its startOffsetletting text follow a bezier curve
(IE only)
<text>
<textPath
xlink:href="#c">
Doc.getElementById("c")
setAttribute ("d", B);
User-provided image with user-provided text key scrambles image based on permutation determined by key. dynamically built animations and clip-paths with image scrambling
*(Have only got animation working in IE)
createElementNS("image");
createElement("animate");
<clipPath>
<use xlink:href="#R"/>
</clipPath>
 something similar with mouse activity  
using linear gradients along textpaths Nonlinear gradients*<font><glyph>
<gradientTransform>
<animateTransform>
Older work with filters - There are more than 30 examples here, since there are dozens of interesting filter effects that can be applied and scads (or is it zillions?) of ways of combining these effects. Work with filters * 
  Bezier drawing tool *