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



Some more current experiments:

 SVGOpen 2007 remarks

SVGOpen 2008:

Edges of Plausibility: Outline or Paper

SVGOpen 2009 :

SVGOpen 2010:

polygons

<replicate> -- in preparation

Filter Effects Workshop

Paper

Exercises

Solutions:

SVGOpen 2011

Accessibility & Text

Omni-Opticon

SMIL workshop

SVG extensions for online mapping

2012 Kurukshetra, Chennai, India

SVG for Kurukshetra 2012

2012 Guangzhou, China

HTML5 and such (the best part, of course, is SVG)

2012 Euler Diagrams

Aesthetic and Practical Concerns in the Drawing of Euler and Venn Diagrams

The presentation and examples

SVGOpen 2012

SVG & SVG Open: a retrospective

Flavoring metric spaces with gravity

Declarative randomness: a proposal to bring power to the people

The future of The Graphical Web

The Graphical Web (SVG Open) 2013

Layout Parisien ( aménagement  ) -- Non Rectangular Layout for the Web

Some new-ish examples (waiting to be categorized)

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 gradient rotating 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 clipPaths playing with clipPaths
<clipPath>
<image>
<use>
<animate AttributeName>
Text animated along a Bezier curve as text changes its startOffset Animating the startOffset of text on a curve

using a negative value for startOffset (IE only)

<text>
<textPath
xlink:href="#c">
radial gradient with spread method bullseye patterns with SMIL
<radialGradient spreadMethod="reflect">
O.setAttributeNS(null, attr, x)
Effects Standalone 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])
Effects Standalone 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 clipPaths playing with clipPaths
<clipPath>
<image>
<use>
<animate AttributeName>
Text following Bezier curve either as curve changes shape or as text changes its startOffset Text 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 gradient pattern with rippling gradient
<pattern>
<radialGradient>
<animateColor>
<animateTransform>
<animate AttributeName>
Growing a triangular polygon nondeterministically Crawling triangles cloneNode
gradientTransform
removeChild
 
Effects Standalone 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)
Effects Using HTML or JavaScript to change SVG SVG 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 animation turbulence1 <feTurbulence>
<feDisplacementMap>
<radialGradient>
<stop>
<path>
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>
Subtracting images Image=(A-B) and
Image=(B-A)
<feComponentTransfer> 
<feFuncR type="table">
<feComposite>
Tiling with svg content feTile with two
merged feFlood's
<feFlood>
<feMerge><feMergeNode>
<feTile/>
(and probably an <animate> or two
for good measure)
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>
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 clipPath barberpole  
Effects Using HTML or JavaScript to change SVG SVG tags used



Tiling
(tessellations with JavaScript or <pattern>)
Effects Using HTML or JavaScript to change SVG SVG 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 tessellation Animated 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  
Effects Using HTML or JavaScript to change SVG SVG tags used



SVG with DOM and JavaScript
(toward building applications in SVG)
Description Links SVG 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  <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 a simple SVG document including script from HTML

GetCTM -- finding the bounding box after transformations

 

 
  Fancier random walk (see below for a simple one) Smiling random walk  
Effects Using HTML or JavaScript to change SVG SVG 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


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 (4 or higher and Opera 9 or higher) will support most of these if I ever find the time to rewrite them.

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):

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  drawing, selecting and moving paths around *
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 *  passing events back and forth between SVG and HTML*
 

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

Bezier drawing tool *

Exploring SVG DOM*