SVG循环缩放并在圆形线上移动

Question

我正在为表单的自定义程序部分进行导航，其中圆形svg是在水平线上。如果你在步骤A（以免来自A-G），A的大小会增加。 （下图 - 我真的很抱歉我的疼痛技巧）。

现在，我已经决定更进一步，让动画更加3D：而不是水平线，我希望圆圈在圆形线上，它们会缩小尺寸，距离越远从他们当前的步骤（左侧和右侧）。图片如下：

有没有一种方法可以使用纯CSS来实现这个，没有JS？如果是这样，任何指针都非常受欢迎。我想到的唯一解决方案是计算圆的每个位置，并在导航变化时移动它。然而，这似乎并不是一个好主意 - 也许有更简单的方法来实现这个目标？