The Edges of Plausibility
Exploring the boundaries of filters, animation, gradients, patterns and script in SVG

David Dailey
Slippery Rock University

Discussion of the Paper, The Edges of Plausibility (best in Opera -- suitable in FF, Safari, Chrome -- crashes IE)
        presented at SVG Open 2008.

Use Opera 9.5, unless as indicated (*)

simulated cylindrical rotation

  1. sliding stops
  2. juggling stop colors
  3. swapping stop colors with script
  4. carousel -- two copies of rects and animate visibility
  5. dragging gradient through clipPath
  6. dragging through clipPath/improved with texture and sheen

linear motion that appears nonlinear

  1. simple bouncing
  2. deformation by feDisplacement
  3. experiment with egg cloning

circular motion with SMIL but without rotation

  1. Using keySplines to warp time and space
  2. Comparison of warped and normal time

nondeterministic landscapes

  1. Bézier flotation device (*)

text animated along a curvilinear path

  1. Animating the startOffset of text on a curve
  2. using a negative value for startOffset (*)

animated posterization of a bitmap

  1. feComponentTransfer (type="discrete")
  2. blur first; then discretize

natural textures

  1. raw feTurbulence
  2. animating baseFrequency
  3. animated turbulence with varying chromatic dampening
  4. a fire-like gradient oscillating through a fire-like shape
  5. same with a bit of turbulence
  6. animating the turbulence
  7. wild fire (*)
  8. water themes
  9. rippling
  10. more on this subject

recycled animations

  1. Restarting a complex object at the end of its animation
  2. Metamorphosizing a complex object at the end of its animation
  3. starflake expressway

non-rectangular tilings

  1. squares with triangles using <pattern>

  2. a cute pentagonal tile using <pattern>

  3. Sunrise in Tokyo: Triangular tiling with animated gradients, using <pattern>

  4. Kissing triangles: Triangular tiling with animated gradients, using <pattern>

  5. Recombinant Scrambled Egg: Rotating squares and triangles using <pattern>

laying out with <script> rather than <pattern>:

  1. pulsing triangles

  2. rotating triangles

  3. asynchronous pulsating triangles

  4. honey clover (triangles)

  5. hexagons

  6. braided squares

  7. isosceles companions

gradients that are neither linear nor radial

  1. simulating a radial gradient with piecewise linear gradients
  2. an animated icosikaitetragon
  3. quasi-random pseudo-gradient
  4. gradients as fonts layed out on curve (*)

clippaths to simulate nonaffine warping

  1. A figure and two transforms of it
  2. Decomposing a rectangle into four triangles
  3. Warping with the mouse

animations that traverse nondeterministic bezier patterns

  1. quasi-random wallpaper in HTML
  2. tiling the plane with knots
  3. triangular knots: how to make
  4. triangular knot primitives
  5. tiling with square knots
  6. current progress


* - Best if viewed in IE/ASV.