анимация пунктира в svg

Есть пунктир в svg. Анимация должна идти в обе стороны до определенной точки, которая зависит от какого-то параметра (положение слайдера, введенное число или процент и т.д.). Первой проблемой было нормально анимировать рост svg, так как пунктир не получается анимировать тем же способом, что и обычную линию. Мне предложили такое решение

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<div id="dash"></div>
body {
  background: #bdc3c7;
  background: -webkit-linear-gradient(to right, #2c3e50, #bdc3c7); 
  background: linear-gradient(to right, #2c3e50, #bdc3c7); 
}

var animateLine = function(canvas, colorNumber, pathString) {
    var line = canvas.path(pathString).attr({
        stroke: colorNumber
    });
    var length = line.getTotalLength();
    $('path').animate({
        'to': 1
    }, {
        duration: 5000,
        step: function(pos, fx) {
            var offset = length * fx.pos;
            var subpath = line.getSubpath(0, offset);
            canvas.clear();
            canvas.path(subpath).attr({
                stroke: colorNumber,
                "stroke-dasharray":"-",
                "stroke-width": '5'
            });
        }
    });
};

var canvas = new Raphael('dash', 350, 540.1);
var pathString = "M66.039,133.545c0,0-21-57,18-67s49-4,65,8 s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41 C46.039,146.545,53.039,128.545,66.039,133.545z";
animateLine(canvas, "#000000", pathString);

. Но оно решает только проблему анимации. Для того, что я описал выше не подходит, так как при каждом новом запуске функции, при изменении параметра длины прорисовки, линия будет рисоваться заново, а мне нужно чтоб она продолжалась или уменьшалась с той длины, до которой прорисовалась до этого. Заранее спасибо за помощь. И да, фон должен быть неоднородный, поэтому решение с наложением svg друг на друга не подходит