Css 动画-线应该遵循

你能帮我做动画吗？我试过了，我在网上搜索过，但没能做到。黄点同时出现，一条线应紧跟在下一个点之后

看一看

gsap.registerPlugin（MotionPathPlugin）；
gsap.to（“#rect”{
持续时间：5，
重复：12，
重复延迟：3，
yoyo:没错，
轻松：“power1.inOut”，
运动路径：{
路径：“路径”，
对齐：“路径”，
自动旋转：对，
alignOrigin:[0.5,0.5]
}
});
圆圈{
填充：黑色；
}
html，正文{
身高：100%；
保证金：0；
填充：0；
溢出：隐藏；
}
h1{
颜色：白色；
}
#矩形文本{
指针事件：无；
}
身体{
背景色：黑色；
颜色：#999；
字体系列：“符号负片”，Arial，无衬线；
字体大小：300；
字号：17px；
最小高度：100%；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
svg{
溢出：可见；
身高：100%；
/*修复Safari渲染错误*/
变换：translateZ（0）；
}
路径{
笔画宽度：2；
笔画：灰色；
}
a{
颜色：#88ce02；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
#div{
宽度：120px；
高度：60px；
指针事件：无；
背景色：#aa00ee；
颜色：黑色；
文本对齐：居中；
线高：60px；
位置：绝对位置；
最高：30%；
左：60%；
字体大小：32px；
}

MotionPathPlugin
SVG矩形