Html SVG动画问题。没有得到想要的

我需要一个小的帮助来适应这个动画：

对于M和T之间的这一点：

---

CSS动画有一种方法：，尽管它没有完全相同的放松，而且似乎比GreenSock JS动画（我还没有深入研究）更需要CPU

基本上，我添加了一个圆圈，看起来像这样：

<circle cx="120" cy="29" r="23" 
        stroke-width="6" stroke="#000" fill="none" 
        style="animation: dash 5s infinite; 
               animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
               transform: rotate(-90deg) /* else it starts on the right side */; 
               transform-origin: 120px 29px"
        stroke-dasharray="150, 150" stroke-linecap="round"/>

---

300是虚线阵列的总和（或者是笔划的两倍？），顺时针方向为负值。

设置笔划虚线阵列的动画。这个网站上有很多关于这方面的问题和答案。我已经尝试了所有。。stroke dasharray与css/js配合使用…我们可以不用它吗？也许，你想用什么方法来做呢？我想添加一个来生成弧，并像我展示的链接那样设置动画。也尝试了一组路径，但不起作用。有没有其他方法可以从我展示的链接中获取SVG，并在M和T之间进行匹配？

@keyframes dash {
  to {
    stroke-dashoffset: -300;
  }
}