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();
    }
}

希望对Codepen中的代码的访问有所帮助。