Transitions -- Images of China and Hong Kong (2012*)
Using SVG (or in some cases, CSS)
to transition (fade) between images (or, ultimately, pages)


Cool Effects
  1. AnimMaskSpread1.svg -- oscillating reflected radial gradient
  2. AnimMaskSpread.svg -- too complex mask with reflected radial gradient
  3. AnimOvalPatternRotate.svg -- rotating ellipses in a pattern
  4. AnimOvalsPatternSq.svg -- circles can  make squiggles as they expand
  5. AnimTriPattern2.svg -- rotating triangular tessellation
  6. animHerring.svg -- sliding Herringbone dominoes
  7. AnimHerring6.svg -- better still?
  8. animSwirl2c.svg -- tessellated cubic Bezier, animated and twirled
  9. ColorFilter3.svg -- using feComponentTransfer, Gaussian blur and feColorMatrix to dilate colors
  10. OvalRotate.svg -- Rotating both the oval and the image it masks.
  11. Cairo1.svg -- the Cairo tessellation (see, for example, here). It is graph theoretic dual of  (4.3.3.4.3) tiling
  12. ZoomRects.svg -- rectangles separate from center
  13. ZoomRects8.svg -- bubbles transition with <replicate> and <random>
  14. SlideRects4.svg -- rectangles slide from center (carrying images)
Basic Effects
  1. Simplest Opacity --- two images, top one with animated opcity
  2. AnimMask.svg -- animated opacity of mask applied to top image
  3. AnimMaskGradient.svg -- oscillating linear gradient, applied through mask
  4. AnimMaskRadial.svg -- same as oscillating gradient, above, only radial
  5. AnimOvalPattern.svg -- circles expand and shrink in pattern, applied through mask
  6. AnimSlideSMIL.svg -- sliding back and forth (flipping each time)
  7. AnimSlideCycleSMIL.svg -- keep on sliding: two images each moving right; one is pre-started
  8. AnimWipeWipe.svg -- continual wipe to right; three images appear to be needed.
  9. BoxSlide.svg -- moving a rectangle through a pattern-mask (problems with Firefox)
  10. BoxSlide3.svg -- resizing a rectangle in a pattern mask
  11. RotateWipe.svg -- rotating atop the previous
  12. SimpleOval -- oscillating  spotlight reveals next picture
  13. ZoomOverZoom1.svg -- like above but spotlight always shrinks-- closing out of old image
  14. ZoomOverZoom2.svg -- opening into new image
  15. ZoomOverZoom3.svg -- folding open from left
  16. ZoomRects1.svg -- rectangles separate from center (using scale)
  17. SlideRects1.svg -- rectangles slide from center (using translate)
  18. SlideRects3.svg -- rectangles slide from center (carrying images)
  19. ColorFilter2.svg --  filters: colorMatrix
  20. ColorFilter4.svg -- filters: blur with colorMatrix
Miscellaneous
  1. AnimMaskPattern.svg -- animated stroke-width of rectangle that fills pattern, applied through mask
  2. AnimMaskPatternRotate.svg -- same as above but with rotating rectangle
  3. AnimMaskSpread2.svg -- rippling transition with oscillating reflected radial gradient of varying radius
  4. AnimSlideOverSMIL.svg -- slideover; slideover;flip
  5. AnimAccidentSMIL.svg -- slide swap, flip
  6. AnimWipeBlink.svg -- wipe;blink; wipe;blink
  7. AnimTriPattern.svg -- sliding triangular tessellation
  8. animHerring4.svg -- bivalent Herringbone dominoes
  9. AnimHerring5.svg -- more and better?
  10. BoxSlide2.svg -- same as above but rotating entire mask (problems with Firefox)
  11. BoxSlide4.svg -- resizing and rotating a rectangle in a pattern mask
  12. ColorDilate5.svg -- using feComponentTransfer, Gaussian blur and feColorMatrix to dilate colors
  13. ZoomOverZoom2.svg -- fold open left; fold closeed right
  14. ZoomRects3.svg -- starburst transition with <replicate>
  15. SlideRects2.svg -- rectangles slide from center as a bit of an earthquake

* Images and transitions are copyrighted, until such time as someone helps me figure out an appropriate license (Creative Commons or otherwise) for such images and software. The intent is to make this stuff broadly available for reuse, but I don't have time to read and understand all the nuances associated with open licensure.  In the meantime,  I suppose this copyright statement (applied to most of my online work) applies.