Javascript 沿正弦曲线设置圆的动画

我正在尝试使用jQuery复制f.lux的视觉效果，它看起来像（很抱歉质量太差）。基本上，它是一个沿着正弦波路径的圆。我看过动画，并尝试复制动画，但我的正弦波是起伏的，因为它是使用CSS绘制的。有没有办法画出平滑的正弦波，然后按照正弦波路径设置圆的动画？我无法让小提琴工作，但这就是我的动画目前的样子。与f.lux动画不同，我的动画也不会循环回其开始的位置

我也不确定这方面的限制是什么，我是否需要制作f.lux的背景（正弦波的蓝色和粉色的一半），然后将动画放在其上，或者我可以使用Javascript、CSS和jQuery来制作整个视觉效果

---

有人有什么想法吗？或者有人能给我指出正确的方向吗？

为了使线条更流畅，可以使用svg元素，如下所示：

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 20, 95 80" stroke="black" fill="#E0E0E0"/>
  <path d="M95 80 C 105 100, 150 150, 180 80" stroke="black" fill="#EEEEEE"/>
</svg>

这使用了两种不同的bézier曲线，因此您可以使用不同的颜色作为背景。您必须稍微更改这些值，以匹配所需的宽度/高度和曲率。这里有关于svg路径的说明：

如果您没有访问HTML源文件的权限，可以使用javascript或jQuery svg创建一个insert svg元素