Grouped SVG path animations with Snap SVG

svg-group-animations.js

var s = Snap('#id-of-svg');
var fly0 = s.group(s.selectAll('.fly0'));
var fly_path0 = s.path("m0,0c-1,0 -1.29289,0.29289 -2,1c-0.70711,0.70711 -2.29289,-0.70711 -3,0c-0.70711,0.70711 -0.29289,1.29289 -1,2c-0.70711,0.70711 -1,1 -1,2c0,1 -1.70711,1.29289 -1,2c0.70711,0.70711 2,0 3,0c1,0 2,0 3,0c1,0 1.29289,-0.29289 2,-1c0.70711,-0.70711 2.29289,0.70711 3,0c0.70711,-0.70711 0.29289,-1.29289 1,-2c0.70711,-0.70711 2,-1 2,-2c0,-1 0.29289,-1.29289 1,-2c0.70711,-0.70711 1.29289,-0.29289 2,-1c0.70711,-0.70711 2,0 3,0c1,0 2,0 3,0c1,0 2,0 2,-1c0,-1 0,-2 0,-3c0,-1 -0.29289,-1.29289 -1,-2c-0.70711,-0.70711 -1,-1 -2,-1c-1,0 -2.29289,0.70711 -3,0c-0.70711,-0.70711 -1,-1 -2,-1c-1,0 -2,0 -3,0c-1,0 -1,1 -2,1c-1,0 -1.29289,0.29289 -2,1c-0.70711,0.70711 0.29289,1.29289 1,2c0.70711,0.70711 0.29289,1.29289 1,2c0.70711,0.70711 0.29289,1.29289 1,2c0.70711,0.70711 2,0 2,1c0,1 0,2 0,3c0,1 0,2 0,3c0,1 -1.07613,0.61731 -2,1c-1.30656,0.5412 -1.29289,1.29289 -2,2c-0.70711,0.70711 -2,0 -2,-1c0,-1 -1,-1 -1,-2c0,-1 0,-2 0,-3l0,-1l0,-1l-1,-1 Z").attr({
    fill: 'none',
    strokeWidth: '0'
});

/**
path is the path we wish with to animate along
element is the group of elements we want to animate
start is the frame we wish to start the animation on
dur is the duration in milliseconds
callback is a function we wish to call once the animation has finished
**/
function animateGroupAlongPath(path, element, start, dur, callback) {
  var len = path.getTotalLength();
  Snap.animate(start, len, function (value) {
    var movePoint = path.getPointAtLength(value);

    element.transform('t' + movePoint.x + ', ' + movePoint.y);
  }, dur, mina.linear, function () {
    callback(path);
  });
};

// animation functions to ensure looping
function anim0() {
  animateGroupAlongPath(fly_path0, fly0, 0, 2000,
  function() {
    anim0();
  });
}

anim0();