Анимация появления карты с прорисовкой границ и с последующей закраской внутри

У меня есть файлы в форматах *.jpg, *.svg стран мира. Например Канады:

Как сделать плавную анимацию появления карты с прорисовкой границ и с последующей закраской внутри?

Ответ

Пример с использованием Vivus.js
window.onload = function() { var states = [ "#DE-BW", "#DE-BY", "#DE-BE", "#DE-BB", "#DE-HB", "#DE-HH", "#DE-HE", "#DE-MV", "#DE-NI", "#DE-NW", "#DE-RP", "#DE-SL", "#DE-SN", "#DE-ST", "#DE-SH", "#DE-TH" ], colors = [ "#a3bc8f", "#8fbc8f", "#a3d58f", "#a3d5a5", "#84d5a5", "#6dd5b8", "#6dd5b8", "#6db4c4", "#81b4c4", "#a3bc8f", "#8fbc8f", "#a3d58f", "#a3d5a5", "#84d5a5", "#84d5a5", "#a3d58f" ]; function fillMap(state, color, time) { setTimeout(function() { $(state).css("fill", color); }, time); } new Vivus("germany", { duration: 500 }, function() { for (var i = 0; i < 17; i++) { fillMap(states[i], colors[i], (i + 1) * 225); } }); } path { fill: #fff; stroke: #000; stroke-width: 0.8; transition: fill 1.6s ease; }