Here is an example of animated lines and usage of images to represent network activity or the flow of some process.

   function AppendStation(p, index) {
    if (index === 0) {
        AppendImage("World.png", new Point(p.X - 55, p.Y - 25));
        AppendDot(p, "LimeGreen");
    }
    else if (index === 1) {
        AppendImage("Dispatch.png", new Point(p.X - 25, p.Y - 52));
        AppendDot(p, "LimeGreen");
        var points2 = [new Point(150, 100), new Point(150, 200)];
        var line2 = new SVG.Path();
        line2.Stroke = "White";
        line2.StrokeDash = [2, 2];
        mainGroup.Append(line2);
        line2.Grow(points2, function (p, i) {
            if (i === 1) {
                AppendImage("Hierarchy.png", new Point(p.X - 25, p.Y + 5));
                AppendDot(p, "LimeGreen");
            }
        });
    }
    else if (index === 2) {
        AppendDot(p, "LimeGreen");
        var points3 = [p, new Point(300, 200), new Point(400, 200)];
        var line3 = new SVG.Path();
        line3.Stroke = "Orange";
        line3.StrokeDash = [2, 2];
        mainGroup.Append(line3);
        line3.Grow(points3, function (p, i) {
            if (i === 2) {
                AppendImage("Gear.png", new Point(p.X + 5, p.Y - 25));
                AppendDot(p, "Orange");
                var binding = new SVG.Path();
                binding.Interpolator = interpolator;
                binding.Stroke = "White";
                binding.Opacity = 0.5;
                binding.Points = [new Point(p.X + 60, p.Y), 
                                  new Point(p.X + 75, p.Y - 45), 
                                  new Point(p.X + 60, p.Y - 100)];
                mainGroup.Append(binding);
                MakePerson(new Point(p.X + 80, p.Y - 65), MAN);
                var logl = new SVG.Path();
                logl.Stroke = "White";
                logl.StrokeDash = [2, 2];
                mainGroup.Append(logl);
                logl.Grow([new Point(p.X + 30, p.Y + 30), 
                           new Point(p.X + 30, p.Y + 100)],
                 function (m, k) {
                    if (k === 1) {
                        PushLog(new Point(p.X - 60, 300));
                        AppendDot(m, "White");
                    } else if (k === 0) {
                        AppendDot(m, "White");
                    }
                });
            }
        });
    }
    else if (index === 3) {
        AppendImage("Mail.png", new Point(p.X + 5, p.Y - 25));
        line1.MarkerStart = cap;
    }
    }
    function AppendImage(name, p) {
    var image = new TypeViz.SVG.Image();
    image.Url = "/images/" + name;
    image.Width = ICONSIZE;
    image.Height = ICONSIZE;
    image.Position = new Point(p.X, p.Y);
    mainGroup.FadeIn(image, FADEIN);
    }
    function document_load() {
    var div = document.getElementById("canvas");
    if (div) {
        var options = new SVG.CanvasOptions();
        options.Width = 1000;
        options.Height = 400;
        canvas = new SVG.Canvas(div, options);
        mainGroup = new TypeViz.SVG.Group();
        canvas.Append(mainGroup);
        canvas.AddMarker(cap);
        canvas.AddMarker(startCap);
        var netLine = new SVG.Line();
        netLine.Stroke = "White";
        netLine.From = new Point(100, 0);
        netLine.To = new Point(100, 400);
        mainGroup.Append(netLine);
        var dmzLine = new SVG.Line();
        dmzLine.Stroke = "White";
        dmzLine.From = new Point(200, 0);
        dmzLine.To = new Point(200, 400);
        mainGroup.Append(dmzLine);
        var points1 = [new Point(75, 195), 
                       new Point(150, 100),
                       new Point(300, 100),
                       new Point(400, 100)];
        line1 = new SVG.Path();
        line1.MarkerEnd = startCap;
        cap.Background = "LimeGreen";
        cap.Stroke = "Transparent";
        line1.Stroke = "LimeGreen";
        mainGroup.Append(line1);
        line1.Grow(points1, AppendStation);
    }
    else
        alert('No DIV found.');
    }