Штрих анимации SVG / затем исчезает / затем заполняется

Question

Я пытаюсь скопировать видео анимацию в виде анимированного файла SVG. Я новичок в этом процессе и, кажется, нашел (в том числе здесь) несколько примеров и результатов, которые не подходят для моей ситуации. Я начал с «Lazy Line Painter», и штрих-анимация прекрасно, но не так, как хотелось бы. Мои самые большие вопросы: как можно анимировать заливку после обводки строки и как можно затемнять обводки все вместе?

Это пример видео, которое я пытаюсь воссоздать (в основном это касается отметки выше все):

https://drive.google.com/open?id=1SK28YU73ih9UDbx3zuPrVsPsgoYtjxaj

HTML / код SVG:

https://codepen.io/cpawl/pen/MWawPyp

JS код:

document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
        let el = document.querySelector('#markin2');
        let markin2 = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":2.2,"strokeOpacity":1,"strokeCap":"butt"});
        markin2.paint();
    }
}

Надеемся, что поможет доступ к коду в коде ручки.