Snap svg animated rectangle

by mrjordy

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1068 692" id="svg" class="allStates"><metadata id="metadata55" class="allStates"></metadata><defs id="defs410" class="allStates"></defs><g transform="rotate(-8 -6117 7511.4)" id="g404" class="a"><path d="m1662.4 1572.5c-0.4-1.2-1.4-1.4-4.1-0.9l-3.5 0.7 0.6-37.9c0.3-20.8 0.8-39.9 1-42.4 0.2-2.5 0.8-8.3 1.2-13 0.4-4.7 0.9-9.3 1-10.2 0.2-0.9 0.6-5.6 1-10.4s0.8-9.4 0.9-10.3c0.2-1.1 1.4-1.6 4.1-1.7 2.1-0.1 13.2-0.4 24.6-0.8l20.7-0.6 1 3.7c0.5 2.1 1.5 6 2.1 8.7 0.6 2.8 2 7.7 3.1 11 1.8 5.6 3.1 12.8 4.4 24.3 0.3 2.6 1.9 7.3 3.5 10.5 3.1 6 3.2 6.6 2.8 22.8-0.2 8.1 0.1 10.8 2.1 19.3 0.5 2.1 0.6 3.9 0.2 4.1-0.4 0.2-6.7 0.4-14.1 0.5s-19.6 0.4-27 0.8c-11.9 0.5-13.7 0.8-15.2 2.6-2.2 2.5-2.2 2.2 0.6 9.3 1.3 3.3 2.7 7.2 3 8.7l0.7 2.8h-7.1c-5.4 0-7.2-0.4-7.6-1.5z" id="alabama" class="allStates"></path><path d="m1529.8 1490-0.3-7.5-3.2-0.9c-3.8-1.1-3.5 1.3-3.2-28.1 0.1-11 0.2-26.2 0.1-33.8l-0.1-13.8 44 0.4c24.2 0.2 44.3 0.7 44.6 1 0.3 0.3 0 2.7-0.7 5.2-1.5 5.2-1.2 5.7 4.8 7.3 2.3 0.7 4.3 1.7 4.3 2.3s-1.5 3.6-3.4 6.8c-1.8 3.1-3.9 7.9-4.5 10.7-0.8 3.2-2.6 6.5-5.1 9.4-2.8 3.2-4.1 5.8-4.6 9-0.4 2.9-2 6.3-4.5 9.6-5.5 7.2-7.1 12.5-7 22l0.1 8h-60.9z" id="arkansas" class="allStates"></path><path d="m1177.5 1494.9c-4.9-1.1-11.3-2.6-14.2-3.4-2.8-0.8-6.9-1.5-9-1.5-3.2 0-5-0.9-10.3-5.2-3.6-2.9-7.4-6.1-8.5-7.1-1.1-1-6.1-4.6-11-7.9-10.8-7.3-26.6-19.3-31.5-23.7-1.9-1.7-5.1-3.8-7-4.6-3.7-1.5-9.5-7.8-8.6-9.3 0.3-0.5 3-1.9 6.1-3.1 5.1-2.1 5.5-2.5 5.5-5.5 0-2-0.8-3.9-2-5-2.9-2.6-2.5-5 1.5-9.1 2-2 4.4-5.4 5.5-7.5 1.2-2.3 2.7-3.9 3.8-3.9 1 0 3-1.3 4.6-2.9l2.8-2.9-2.3-4.4c-1.9-3.6-2.3-6-2.3-13.1 0-4.8 0.3-8.7 0.6-8.7 0.3 0 1-3.9 1.4-8.8 0.5-6.2 1.3-9.6 2.7-11.5 1.9-2.6 2.3-2.7 7.7-2.2l5.7 0.6 3.2-8.6c1.8-4.7 3.6-8.8 4-9 0.8-0.5 95.3 22.8 97 23.8 0.6 0.4 0.7 1.5 0.1 2.9-0.5 1.3-1.1 3.6-1.4 5.2-0.3 1.6-3.7 16.9-7.6 33.9-3.9 17.1-7.3 31.9-7.5 33-0.2 1.1-2.3 10.1-4.5 20-2.3...

CSS

#svg {
  overflow: visible;
}

JavaScript

var s = Snap("#svg");

var rect = s.rect(10, 10, 100, 100);
rect.animate({
    x: 50,
    y: 500
}, 5000);