polygon

polygon

by Ian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>

JavaScript

Snap.plugin( function( Snap, Element, Paper, global ) {
  Element.prototype.polyAnimate = function( destPoints, duration, easing, callback ) {
    var poly = this;
    Snap.animate( this.attr('points'), destPoints,  
       function( val ){ poly.attr({ points: val }) }, duration, easing, callback)
    };
});

var fdr = Snap(600,600)

var time1_stp0 = [363.617,262.895, 363.562,367.4, 273.145,315.191, 273.145,315.191];
var time1_stp1 = [363.617,262.895, 363.562,367.4, 273.145,315.191, 273.145,210.688];

var timeline1 = fdr.polygon(time1_stp0).attr({fill:'red',opacity:'0.5'});

timeline1_anim = function(){

timeline1.polyAnimate( time1_stp1, 2000, mina.linear, function() { alert('finished')})
  
}

timeline1_anim();