Best way to display flow motion in a SVG?

Question

I want to create a web page that's showing stuff like flowing fluids. For this I want to use SVG graphics where the start and stop of the (repeating) motion is controlled via JavaScript.

This motion can be easily shown by a way like this hand drawn GIF:

But how can I achive such a look by simple means in a SVG? Especially as this also has to flow around corners, i.e. not only a linear motion is required...

Preferably already (semi-automatically) creatable in Inkscape...

Answer 1

OK, now I found the answer to the "first" part of the question, i.e. the upper "flow":

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="202"
   height="32"
   id="svg2">
  <g id="layer1">
    <path
       d="m 1,16 200,0"
       id="path1"
       style="stroke:#000000;stroke-width:30" />
    <path
       d="m 1,16 200,0"
       id="path2"
       style="stroke:#ff0000;stroke-width:20" />
    <path
       d="m 1,16 200,0"
       id="path3"
       style="stroke:#000000;stroke-width:16;stroke-dasharray:48, 48;stroke-dashoffset:10.6" />
  </g>
</svg>

That was created in Inkscape (+ simplifications by hand afterwards to post only the relevant stuff) just by duplicating one line with different widths, a very big one (id=path1) in black for the surrounding, a big one (id=path2) for the red fluid and a small, dashed one (id=path3) that'll be used for the animation later on.

All that's now left to do is to change the stroke-dashoffset attribute via JavaScript or an CSS animation as that'll move the little bars to indicate flow. E.g.:

   <style type="text/css">  
      @keyframes move {  
        from {  stroke-dashoffset: 0;  }  
        to   {  stroke-dashoffset: 96;  }  
      }  
      @-moz-keyframes move {  
        from {  stroke-dashoffset: 0;  }  
        to   {  stroke-dashoffset: 96;  }  
      }  
      @-webkit-keyframes move {  
        from {  stroke-dashoffset: 0;  }  
        to   {  stroke-dashoffset: 96;  }  
      }  
  </style>  

and then in the <path id="path3"> element:

  animation-duration: 3s;  
  -moz-animation-duration: 3s;  
  -webkit-animation-duration: 3s;  
  animation-name: move; 
  -moz-animation-name: move; 
  -webkit-animation-name: move; 
  animation-timing-function: linear; 
  -moz-animation-timing-function: linear; 
  -webkit-animation-timing-function: linear; 
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite; 

Note: the path can have any shape, it doesn't need to be straight :)

The lower flow:
By using the ideas of http://owl3d.com/svg/tubefy/articles/article3.html I also found a solution (better: workaround) for the "lower flow". The idea is just to clone the path multiple times and use differently colored dashes drawn over each other. The animation goes as above. Both together can be seen now at: http://jsfiddle.net/pXkvD/2