polyline fill

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

HTML

<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', {
                center: new L.LatLng(51.0674525293397,-114.10709649324417),
                zoom: 13
            });

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

var polyline = L.polyline([
    [51.06745252933975, -114.11267548799515],
    [51.067506465746014, -114.09559518098831],
    [51.0827140244322,-114.0949085354805],
    [51.088267312195484,-114.10709649324417]
], {edit_with_drag: true}).addTo(map);