Question

I’d like to animate this logo. All that would need to happen is for lines to move smoothly to a different position. I have an SVG version of the logo. What would be the easiest way to do this? Editing every frame seperately and then making them into an animated GIF takes too long, makes the animation choppy, and too big to load.

I do not want to use deprecated technologies like Flash.

What would be the best way to do this?

This is a non-finished version of what I’d like to achieve; http://heuvel-folie-serres.com/v2/img/logo_moving.gif

---

PNG; http://heuvel-folie-serres.com/v2/img/logo.png
SVG; http://heuvel-folie-serres.com/v2/img/logo.svg

Answer 1

There is no easy way you can animate your SVG as it is. It is a composite path and finding the right nodes is not only cumbersome but also expensive to animate.

You need to modify your original SVG to remove the lines you intent to animate, then you can add lines such as…

 <line x1="23" y1="32" x2="40" y2="32" class="animated" />
 <line x1="93" y1="32" x2="75" y2="32" class="animated" />
 <line x1="125" y1="32" x2="143" y2="32" class="animated" />
 <line x1="195" y1="32" x2="177" y2="32" class="animated" />

You could animate with SMIL but unfortunately IE9 doesn’t support it, so here’s a very naive implementation of your animation:

var lines = document.getElementsByClassName('animated');
var y = parseInt(lines[0].getAttribute("y2"));
var increment = .1;
var moveLines = function(){

    if (y < 32) increment = .1
    if (y > 41.5) increment = -.1
    y+=increment;
    lines[0].setAttribute('y1', y)
    lines[1].setAttribute('y1', y)
    lines[2].setAttribute('y1', y)
    lines[3].setAttribute('y1', y)
}

var t = window.setInterval(moveLines, 30);

A more robust solution would use requestAnimationFrame which makes it easy to add easing functions and doesn’t consume resources when the current tab is not active.

Here is a demo (you must remove the existing lines in your vector editing software).
http://jsfiddle.net/6WPEb/

​