Javascript动画。在点之间悬停时移动div

我需要在悬停时围绕闪光灯移动红色圆圈，但当光标离开时，它会移回起点。如何在循环中暂停？也许是做这个动画的另一种方式

---

var circle=document.querySelector（'.circle'）；
var航路点=[[32.3,23.3]、[42,42]、[45.5,36.5]、[55.2,53.7]、[57.8,49.2]、[73.5,78.5]、[52.5,61]、[50.5,65.5]、[39,52]、[36.5,56]、[22.5,44.8]；
circle.addEventListener（'mouseover'，moveCircle）；
//圆圈。addEventListener（'mouseout'，backCircle）；
函数moveCircle（）{
用于（i个航路点）{
circle.style.top=航路点[i][0]；
circle.style.left=航路点[i][1]；
}
}

正文{
高度：100vh；
填充：0；
保证金：0；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.动画包装器{
宽度：80%；
高度：自动；
边框：2件纯黑；
位置：相对位置；
}
.圆圈{
宽度：2%；
身高：4%；
边界半径：50%；
背景：红色；
位置：绝对位置；
最高：32.3%；
左：23.3%；
光标：指针；
过渡期：4s；
}
img{
宽度：100%；
}

---

8年前，我专门为此制作了一个库：

---

您将创建一个SVG路径，然后很容易实现您想要的内容。

在JavaScript中，您没有任何名为

circle

的变量。请将

circle

变量添加到您的code.var circle=document.querySelector（'.circle'）；很抱歉，我在复制脚本时丢失了它。我必须在没有库的JS上执行此操作：（因此，将我的库复制到您的源代码（只有几行）中，然后说是您自己完成的：）或者简单地研究一下我在那里做了什么，了解它有多简单，然后重新创建它