有没有一种方法可以使用CSS关键帧在SVG中进行渐变填充？

Question

我是svg的新手，我想在我的投资组合网站上实现笔触动画。我现在可以使用它，但是一旦笔画动画完成，我想使用渐变填充徽标。我试图为此找到文档，但是我没有太多运气找到相关的东西。

我希望在文本的底部显示一个深蓝色，在文本的顶部显示一个浅蓝色。有谁知道如何做到这一点？

我有一个Codepen here。

这是我到目前为止尝试过的

@keyframes fill {
    from {
        fill: transparent;
    }
    to {
        fill: linear-gradient(to top, #0070ff, #00c9ff);
    }
}