snap

by aka_SKIff

HTML

<script src="//cdn.jsdelivr.net/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg id="paper"></svg>
<div>
<a href="#" class="js-run">Run</a>    
</div>

SCSS

#paper {
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
}

JavaScript

var s = Snap('#paper');
var cir = s.circle(150,150,70);
cir.attr({
    fill: '#face8d',
    stroke: '#f09ccc',
    strokeWidth: 3
});

$('.js-run').on('click', function(e){
    e.preventDefault();
    cir.animate({'cx': '+=150'}, 1000, mina.elastic);
});