Javascript svg路径填充动画

我正在尝试实现一个svg路径填充动画，如下面的gif，尝试了

clipPath

，但没有运气，没有任何帮助，不知道如何实现那种动画（下面的gif图像）？尝试过gsap或任何svg动画库，但都不能满足我的需要

---

总体思路是：根据需要绘制路径并进行剪裁，然后对剪裁路径的

笔划dashoffset

设置动画。确保下一条路径的动画在前一条路径结束后开始：

begin=“a.end+.5s”

但是，在这种情况下，您需要重写路径。例如，在花边的情况下，我会使用2条路径和2条不同的剪辑路径，甚至3条。否则，在路径重叠处会产生不美观的出血效果

太好了。非常感谢。你是个救生员。@enxaneta太好了。谢谢你能让动画变慢吗？我没有时间在打开窗口时看到所有的美景

整页