polyline fill

I would like to animate the red line so that it will progressively fill in a new colour.

HTML

<script src="http://cdn.wijmo.com/external/raphael.js"></script>
<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.cloudmade.com/dist/leaflet.css">
<div id="map" style="height:400px; width:500px"></div>

JavaScript

var map = new L.Map('map');

var cloudmadeUrl = 'https://www.google.com.tr/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjU8KGU7-7cAhUuMuwKHQC7DooQjRx6BAgBEAU&url=https%3A%2F%2Fwww.rd.com%2Ftrue-stories%2Fsurvival%2Fman-stranded-sea-438-days%2F&psig=AOvVaw1_gj8oB2zNX78zU941ldPd&ust=1534415994886987',
    cloudmadeAttrib = 'Made by me in a rub-a-dub-stylee',
    cloudmade = new L.TileLayer(cloudmadeUrl, {
        maxZoom: 18,
        attribution: cloudmadeAttrib
    });

var london = new L.LatLng(51.505, -0.09); // geographical point (longitude and latitude)
map.addLayer(cloudmade);


var cairo = new L.LatLng(30, 31);
var losangeles = new L.LatLng(34, -118);
var newyork = new L.LatLng(40, -74);
var vancouver = new L.LatLng(49, -123);

var latlngs = [london, cairo, losangeles, newyork];

var p1 = [london, cairo];
var p2 = [cairo, vancouver];
var p3 = [vancouver, losangeles];
var p4 = [losangeles, london];

var test = [p1, p2, p3, p4];
// create a red polyline from an arrays of LatLng points
var mpolyline = new L.MultiPolyline(test, {
    color: 'red',
    id:'poly1'
});


// zoom the map to the polyline
map.fitBounds(new L.LatLngBounds(latlngs));

// add the polyline to the map
map.addLayer(mpolyline);

//var canvas = Raphael(document.getElementById("map"), 0,0,500,400);