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.