Новое решение, вызванное уточнениями в комментариях
Мне нужно анимировать элемент SVG, используя только комбинацию <animate attributeName="cx"> <animate attributeName="cy"> (для производительности), чтобы сделать движение в форме "8", looped
Поскольку автор не хочет использовать команду animateMotion, в этом случае я вижу только один способ реализовать анимацию движения круга по символу бесконечности:
Необходимо последовательно выбрать много точек вдоль символа бесконечности и присвоить их координаты окружности cx = "x", cy = "y"
Чем больше точек вы выберете, тем ближе будет траектория движения окружности вдоль символ бесконечности
В векторном редакторе я последовательно наносил круги на символ бесконечности и записывал их координаты центра круга. Первый круг имеет координаты центра cx ="70" cy ="60"
Итак, это было сделано для всех кругов, расположенных вдоль символа бесконечности. Последний круг имеет те же координаты, что и первый, тем самым реализуя замкнутый цикл
Осталось только подставить эти значения в формулы анимации cx, cy
Анимация движения круга cx, cy с радиусом r="5
<div class="group">
<svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120">
<circle fill="olive" cx="70" cy="60" r="5">
<animate
attributeName="cx"
attributeType="XML"
repeatCount="indefinite"
begin="0s"
dur="2s"
values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69;
73;76;79;81;80;78;74;70">
</animate>
<animate
attributeName="cy"
attributeType="XML"
repeatCount="indefinite"
begin="0"
dur="2s"
values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79;
80;80;79;76;72;67;64;61;60">
</animate>
</circle>
<path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/>
</svg>
</div>
Радиус r = 40 как на примере автора вопроса
<div class="group">
<svg class="ball" xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 120 120">
<circle fill="olive" cx="70" cy="60" r="40">
<animate
attributeName="cx"
attributeType="XML"
repeatCount="indefinite"
begin="0s"
dur="2s"
values="70;65;60;55;50;45;40.5;40.5;42.5;45.1;48.7;52;55;58;60;61;61;61;61;61;61;62.9;66;69;
73;76;79;81;80;78;74;70">
</animate>
<animate
attributeName="cy"
attributeType="XML"
repeatCount="indefinite"
begin="0"
dur="2s"
values="60;60;60;60;60;58.3;52.5;47.9;44.4;41.8;40.3;40;41;43;47;51;55;60;65;70;74;77;79;
80;80;79;76;72;67;64;61;60">
</animate>
</circle>
<path fill="none" stroke="black" stroke-dasharray="2" d="M70.5,60.5c5.5,0,10,4.5,10,10s-4.5,10-10,10s-10-4.5-10-10v-20c0-5.5-4.5-10-10-10s-10,4.5-10,10 s4.5,10,10,10H70.5z"/>
</svg>
</div>