Snap.svg

by mrjordy

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>

JavaScript

s = Snap(400, 620);

var g = s.gradient("l(0, 1, 2, 1)#5C5C5C-#fff-#5C5C5C");
var arrow = s.path(Snap.format("M390 385 L335 335 L410 355 Q375 355 390 385")).attr({fill: g, opacity: 0.5, cursor: 'pointer'});

function anim () {
    g.attr({ x1: 0, y1: 1, x2: 2, y2: 1 });
    g.animate({ x1: 0, y1: 100, x2: 0, y2: 100 }, 2000, mina.linear, anim);
};

anim();