SVG animation on Safari runs with low fps-CodePudding

This SVG runs smoothly on Chrome/Edge and FireFox but not on Safari (Mac). As you can see, the SVG contains animateMotion tags with path composed of big numbers. The SVG is composed of 58 circles due to snippet limitation. The original code containes 200 objects. Here's the original: https://jsfiddle.net/__fadi/c3jd71ae/

How bad is Safari in calculating big numbers (with big fractional part)? What can I do to improve performance on Safari?

<!DOCTYPE html>
<html>

<body>
  <svg height="1500" width="4000">
        <g transform="translate(100.000100010001,100.000100010001) scale(0.001000000100010001 0.001000000100010001)">
            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 0000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 100000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 1000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 110000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 2000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 120000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 3000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 130000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 4000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 140000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 5000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 150000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 6000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 160000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 7000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 170000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 8000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 180000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 9000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 190000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 10000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1100000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 11000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1110000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 12000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1120000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 13000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1130000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 14000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1140000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 15000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1150000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 16000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1160000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 17000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1170000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 18000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1180000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 19000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1190000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 20000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1200000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 21000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1210000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 22000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1220000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 23000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1230000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 24000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1240000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 25000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1250000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 26000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1260000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 27000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1270000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 28000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1280000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 29000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1290000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 30000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1300000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 31000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1310000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 32000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1320000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 33000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1330000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 34000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1340000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 35000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1350000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 36000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1360000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 37000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1370000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 38000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1380000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 39000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1390000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 40000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1400000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 41000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1410000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 42000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1420000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 43000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1430000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 44000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1440000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 45000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1450000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 46000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1460000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 47000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1470000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 48000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1480000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 49000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1490000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 50000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1500000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 51000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1510000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 52000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1520000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 53000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1530000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 54000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1540000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 55000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1550000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 56000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1560000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 57000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1570000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>

            <circle cx="0" cy="0" r="9999.000100010001" stroke="#00a2e8" fill="#00a2e8" data-z-index="1">
                <animateMotion
                    path="M 58000.000100010001 0.000100010001 Q 100000.000100010001 100000.000010000100001 1580000.000010000100001 200000.000010000100001 Q 200000.001001001 300000.001001001"
                    dur="1s" repeatCount="indefinite"></animateMotion>
            </circle>
</g>
</svg>
</body>
</html>

Update (in case someone else run into the same issue): I managed to spot the culprit; it wasn't using large numbers with decimal point, it was the scale transform="scale(x,y)" in the group element. Apparently when x and/or y are small (could be the case for big numbers as well, I didn't check) numbers far from 1, Safari (v15.3 in my case) struggles in calculations.

CodePudding user response：

How bad is Safari in calculating big numbers (with big fractional part)? What can I do to improve performance on Safari?

Avoid unnecessarily large numbers and reduce floating point precision if possible.

Large numbers can significantly increase the amount of time to parse all svg data before rendering
... since they increase the total filesize (when saved as static files or appended as inlined markup to your HTML body)
Animations usually benefit from integer coordinates

Invalid Commands:
Avoid incomplete commands like the Q command in your motion path's

M 1000 0 Q 100000 100000 110000 200000 Q 200000 300000
should rather be (Q expects four coordinates)
M 1000 0 Q 100000 100000 110000 200000

Shared/repeating styles can also be minified by <g> group attributes (like fill="#00a2e8").

Fixed example: scaled down and rounded to integers

(Inspect your console to get the optimised code)

let circleCount = 200;
let svgMarkup =
  `<svg viewBox="0 0 1500 400" xmlns="http://www.w3.org/2000/svg">
<g opacity="1" transform="translate(100,100)" fill="#00a2e8" data-z-index="1">`;
for (let i = 0; i < circleCount; i  ) {
  svgMarkup  =
    `<circle id="c${i}" r="9.9"/><animateMotion href="#c${i}" path="M${i} 0Q100 100 ${100  i*10} 200" dur="1s" repeatCount="indefinite"/>`;
}
svgMarkup  = `</g></svg>`;
document.body.insertAdjacentHTML('beforeend', svgMarkup);
console.log(svgMarkup);

Static example – generated by js (~24 KB)

<svg viewBox="0 0 1500 400" xmlns="http://www.w3.org/2000/svg">
<g opacity="1" transform="translate(100,100)" fill="#00a2e8" data-z-index="1"><circle id="c0" r="9.9"/><animateMotion href="#c0" path="M0 0Q100 100 100 200" dur="1s" repeatCount="indefinite"/><circle id="c1" r="9.9"/><animateMotion href="#c1" path="M1 0Q100 100 110 200" dur="1s" repeatCount="indefinite"/><circle id="c2" r="9.9"/><animateMotion href="#c2" path="M2 0Q100 100 120 200" dur="1s" repeatCount="indefinite"/><circle id="c3" r="9.9"/><animateMotion href="#c3" path="M3 0Q100 100 130 200" dur="1s" repeatCount="indefinite"/><circle id="c4" r="9.9"/><animateMotion href="#c4" path="M4 0Q100 100 140 200" dur="1s" repeatCount="indefinite"/><circle id="c5" r="9.9"/><animateMotion href="#c5" path="M5 0Q100 100 150 200" dur="1s" repeatCount="indefinite"/><circle id="c6" r="9.9"/><animateMotion href="#c6" path="M6 0Q100 100 160 200" dur="1s" repeatCount="indefinite"/><circle id="c7" r="9.9"/><animateMotion href="#c7" path="M7 0Q100 100 170 200" dur="1s" repeatCount="indefinite"/><circle id="c8" r="9.9"/><animateMotion href="#c8" path="M8 0Q100 100 180 200" dur="1s" repeatCount="indefinite"/><circle id="c9" r="9.9"/><animateMotion href="#c9" path="M9 0Q100 100 190 200" dur="1s" repeatCount="indefinite"/><circle id="c10" r="9.9"/><animateMotion href="#c10" path="M10 0Q100 100 200 200" dur="1s" repeatCount="indefinite"/><circle id="c11" r="9.9"/><animateMotion href="#c11" path="M11 0Q100 100 210 200" dur="1s" repeatCount="indefinite"/><circle id="c12" r="9.9"/><animateMotion href="#c12" path="M12 0Q100 100 220 200" dur="1s" repeatCount="indefinite"/><circle id="c13" r="9.9"/><animateMotion href="#c13" path="M13 0Q100 100 230 200" dur="1s" repeatCount="indefinite"/><circle id="c14" r="9.9"/><animateMotion href="#c14" path="M14 0Q100 100 240 200" dur="1s" repeatCount="indefinite"/><circle id="c15" r="9.9"/><animateMotion href="#c15" path="M15 0Q100 100 250 200" dur="1s" repeatCount="indefinite"/><circle id="c16" r="9.9"/><animateMotion href="#c16" path="M16 0Q100 100 260 200" dur="1s" repeatCount="indefinite"/><circle id="c17" r="9.9"/><animateMotion href="#c17" path="M17 0Q100 100 270 200" dur="1s" repeatCount="indefinite"/><circle id="c18" r="9.9"/><animateMotion href="#c18" path="M18 0Q100 100 280 200" dur="1s" repeatCount="indefinite"/><circle id="c19" r="9.9"/><animateMotion href="#c19" path="M19 0Q100 100 290 200" dur="1s" repeatCount="indefinite"/><circle id="c20" r="9.9"/><animateMotion href="#c20" path="M20 0Q100 100 300 200" dur="1s" repeatCount="indefinite"/><circle id="c21" r="9.9"/><animateMotion href="#c21" path="M21 0Q100 100 310 200" dur="1s" repeatCount="indefinite"/><circle id="c22" r="9.9"/><animateMotion href="#c22" path="M22 0Q100 100 320 200" dur="1s" repeatCount="indefinite"/><circle id="c23" r="9.9"/><animateMotion href="#c23" path="M23 0Q100 100 330 200" dur="1s" repeatCount="indefinite"/><circle id="c24" r="9.9"/><animateMotion href="#c24" path="M24 0Q100 100 340 200" dur="1s" repeatCount="indefinite"/><circle id="c25" r="9.9"/><animateMotion href="#c25" path="M25 0Q100 100 350 200" dur="1s" repeatCount="indefinite"/><circle id="c26" r="9.9"/><animateMotion href="#c26" path="M26 0Q100 100 360 200" dur="1s" repeatCount="indefinite"/><circle id="c27" r="9.9"/><animateMotion href="#c27" path="M27 0Q100 100 370 200" dur="1s" repeatCount="indefinite"/><circle id="c28" r="9.9"/><animateMotion href="#c28" path="M28 0Q100 100 380 200" dur="1s" repeatCount="indefinite"/><circle id="c29" r="9.9"/><animateMotion href="#c29" path="M29 0Q100 100 390 200" dur="1s" repeatCount="indefinite"/><circle id="c30" r="9.9"/><animateMotion href="#c30" path="M30 0Q100 100 400 200" dur="1s" repeatCount="indefinite"/><circle id="c31" r="9.9"/><animateMotion href="#c31" path="M31 0Q100 100 410 200" dur="1s" repeatCount="indefinite"/><circle id="c32" r="9.9"/><animateMotion href="#c32" path="M32 0Q100 100 420 200" dur="1s" repeatCount="indefinite"/><circle id="c33" r="9.9"/><animateMotion href="#c33" path="M33 0Q100 100 430 200" dur="1s" repeatCount="indefinite"/><circle id="c34" r="9.9"/><animateMotion href="#c34" path="M34 0Q100 100 440 200" dur="1s" repeatCount="indefinite"/><circle id="c35" r="9.9"/><animateMotion href="#c35" path="M35 0Q100 100 450 200" dur="1s" repeatCount="indefinite"/><circle id="c36" r="9.9"/><animateMotion href="#c36" path="M36 0Q100 100 460 200" dur="1s" repeatCount="indefinite"/><circle id="c37" r="9.9"/><animateMotion href="#c37" path="M37 0Q100 100 470 200" dur="1s" repeatCount="indefinite"/><circle id="c38" r="9.9"/><animateMotion href="#c38" path="M38 0Q100 100 480 200" dur="1s" repeatCount="indefinite"/><circle id="c39" r="9.9"/><animateMotion href="#c39" path="M39 0Q100 100 490 200" dur="1s" repeatCount="indefinite"/><circle id="c40" r="9.9"/><animateMotion href="#c40" path="M40 0Q100 100 500 200" dur="1s" repeatCount="indefinite"/><circle id="c41" r="9.9"/><animateMotion href="#c41" path="M41 0Q100 100 510 200" dur="1s" repeatCount="indefinite"/><circle id="c42" r="9.9"/><animateMotion href="#c42" path="M42 0Q100 100 520 200" dur="1s" repeatCount="indefinite"/><circle id="c43" r="9.9"/><animateMotion href="#c43" path="M43 0Q100 100 530 200" dur="1s" repeatCount="indefinite"/><circle id="c44" r="9.9"/><animateMotion href="#c44" path="M44 0Q100 100 540 200" dur="1s" repeatCount="indefinite"/><circle id="c45" r="9.9"/><animateMotion href="#c45" path="M45 0Q100 100 550 200" dur="1s" repeatCount="indefinite"/><circle id="c46" r="9.9"/><animateMotion href="#c46" path="M46 0Q100 100 560 200" dur="1s" repeatCount="indefinite"/><circle id="c47" r="9.9"/><animateMotion href="#c47" path="M47 0Q100 100 570 200" dur="1s" repeatCount="indefinite"/><circle id="c48" r="9.9"/><animateMotion href="#c48" path="M48 0Q100 100 580 200" dur="1s" repeatCount="indefinite"/><circle id="c49" r="9.9"/><animateMotion href="#c49" path="M49 0Q100 100 590 200" dur="1s" repeatCount="indefinite"/><circle id="c50" r="9.9"/><animateMotion href="#c50" path="M50 0Q100 100 600 200" dur="1s" repeatCount="indefinite"/><circle id="c51" r="9.9"/><animateMotion href="#c51" path="M51 0Q100 100 610 200" dur="1s" repeatCount="indefinite"/><circle id="c52" r="9.9"/><animateMotion href="#c52" path="M52 0Q100 100 620 200" dur="1s" repeatCount="indefinite"/><circle id="c53" r="9.9"/><animateMotion href="#c53" path="M53 0Q100 100 630 200" dur="1s" repeatCount="indefinite"/><circle id="c54" r="9.9"/><animateMotion href="#c54" path="M54 0Q100 100 640 200" dur="1s" repeatCount="indefinite"/><circle id="c55" r="9.9"/><animateMotion href="#c55" path="M55 0Q100 100 650 200" dur="1s" repeatCount="indefinite"/><circle id="c56" r="9.9"/><animateMotion href="#c56" path="M56 0Q100 100 660 200" dur="1s" repeatCount="indefinite"/><circle id="c57" r="9.9"/><animateMotion href="#c57" path="M57 0Q100 100 670 200" dur="1s" repeatCount="indefinite"/><circle id="c58" r="9.9"/><animateMotion href="#c58" path="M58 0Q100 100 680 200" dur="1s" repeatCount="indefinite"/><circle id="c59" r="9.9"/><animateMotion href="#c59" path="M59 0Q100 100 690 200" dur="1s" repeatCount="indefinite"/><circle id="c60" r="9.9"/><animateMotion href="#c60" path="M60 0Q100 100 700 200" dur="1s" repeatCount="indefinite"/><circle id="c61" r="9.9"/><animateMotion href="#c61" path="M61 0Q100 100 710 200" dur="1s" repeatCount="indefinite"/><circle id="c62" r="9.9"/><animateMotion href="#c62" path="M62 0Q100 100 720 200" dur="1s" repeatCount="indefinite"/><circle id="c63" r="9.9"/><animateMotion href="#c63" path="M63 0Q100 100 730 200" dur="1s" repeatCount="indefinite"/><circle id="c64" r="9.9"/><animateMotion href="#c64" path="M64 0Q100 100 740 200" dur="1s" repeatCount="indefinite"/><circle id="c65" r="9.9"/><animateMotion href="#c65" path="M65 0Q100 100 750 200" dur="1s" repeatCount="indefinite"/><circle id="c66" r="9.9"/><animateMotion href="#c66" path="M66 0Q100 100 760 200" dur="1s" repeatCount="indefinite"/><circle id="c67" r="9.9"/><animateMotion href="#c67" path="M67 0Q100 100 770 200" dur="1s" repeatCount="indefinite"/><circle id="c68" r="9.9"/><animateMotion href="#c68" path="M68 0Q100 100 780 200" dur="1s" repeatCount="indefinite"/><circle id="c69" r="9.9"/><animateMotion href="#c69" path="M69 0Q100 100 790 200" dur="1s" repeatCount="indefinite"/><circle id="c70" r="9.9"/><animateMotion href="#c70" path="M70 0Q100 100 800 200" dur="1s" repeatCount="indefinite"/><circle id="c71" r="9.9"/><animateMotion href="#c71" path="M71 0Q100 100 810 200" dur="1s" repeatCount="indefinite"/><circle id="c72" r="9.9"/><animateMotion href="#c72" path="M72 0Q100 100 820 200" dur="1s" repeatCount="indefinite"/><circle id="c73" r="9.9"/><animateMotion href="#c73" path="M73 0Q100 100 830 200" dur="1s" repeatCount="indefinite"/><circle id="c74" r="9.9"/><animateMotion href="#c74" path="M74 0Q100 100 840 200" dur="1s" repeatCount="indefinite"/><circle id="c75" r="9.9"/><animateMotion href="#c75" path="M75 0Q100 100 850 200" dur="1s" repeatCount="indefinite"/><circle id="c76" r="9.9"/><animateMotion href="#c76" path="M76 0Q100 100 860 200" dur="1s" repeatCount="indefinite"/><circle id="c77" r="9.9"/><animateMotion href="#c77" path="M77 0Q100 100 870 200" dur="1s" repeatCount="indefinite"/><circle id="c78" r="9.9"/><animateMotion href="#c78" path="M78 0Q100 100 880 200" dur="1s" repeatCount="indefinite"/><circle id="c79" r="9.9"/><animateMotion href="#c79" path="M79 0Q100 100 890 200" dur="1s" repeatCount="indefinite"/><circle id="c80" r="9.9"/><animateMotion href="#c80" path="M80 0Q100 100 900 200" dur="1s" repeatCount="indefinite"/><circle id="c81" r="9.9"/><animateMotion href="#c81" path="M81 0Q100 100 910 200" dur="1s" repeatCount="indefinite"/><circle id="c82" r="9.9"/><animateMotion href="#c82" path="M82 0Q100 100 920 200" dur="1s" repeatCount="indefinite"/><circle id="c83" r="9.9"/><animateMotion href="#c83" path="M83 0Q100 100 930 200" dur="1s" repeatCount="indefinite"/><circle id="c84" r="9.9"/><animateMotion href="#c84" path="M84 0Q100 100 940 200" dur="1s" repeatCount="indefinite"/><circle id="c85" r="9.9"/><animateMotion href="#c85" path="M85 0Q100 100 950 200" dur="1s" repeatCount="indefinite"/><circle id="c86" r="9.9"/><animateMotion href="#c86" path="M86 0Q100 100 960 200" dur="1s" repeatCount="indefinite"/><circle id="c87" r="9.9"/><animateMotion href="#c87" path="M87 0Q100 100 970 200" dur="1s" repeatCount="indefinite"/><circle id="c88" r="9.9"/><animateMotion href="#c88" path="M88 0Q100 100 980 200" dur="1s" repeatCount="indefinite"/><circle id="c89" r="9.9"/><animateMotion href="#c89" path="M89 0Q100 100 990 200" dur="1s" repeatCount="indefinite"/><circle id="c90" r="9.9"/><animateMotion href="#c90" path="M90 0Q100 100 1000 200" dur="1s" repeatCount="indefinite"/><circle id="c91" r="9.9"/><animateMotion href="#c91" path="M91 0Q100 100 1010 200" dur="1s" repeatCount="indefinite"/><circle id="c92" r="9.9"/><animateMotion href="#c92" path="M92 0Q100 100 1020 200" dur="1s" repeatCount="indefinite"/><circle id="c93" r="9.9"/><animateMotion href="#c93" path="M93 0Q100 100 1030 200" dur="1s" repeatCount="indefinite"/><circle id="c94" r="9.9"/><animateMotion href="#c94" path="M94 0Q100 100 1040 200" dur="1s" repeatCount="indefinite"/><circle id="c95" r="9.9"/><animateMotion href="#c95" path="M95 0Q100 100 1050 200" dur="1s" repeatCount="indefinite"/><circle id="c96" r="9.9"/><animateMotion href="#c96" path="M96 0Q100 100 1060 200" dur="1s" repeatCount="indefinite"/><circle id="c97" r="9.9"/><animateMotion href="#c97" path="M97 0Q100 100 1070 200" dur="1s" repeatCount="indefinite"/><circle id="c98" r="9.9"/><animateMotion href="#c98" path="M98 0Q100 100 1080 200" dur="1s" repeatCount="indefinite"/><circle id="c99" r="9.9"/><animateMotion href="#c99" path="M99 0Q100 100 1090 200" dur="1s" repeatCount="indefinite"/><circle id="c100" r="9.9"/><animateMotion href="#c100" path="M100 0Q100 100 1100 200" dur="1s" repeatCount="indefinite"/><circle id="c101" r="9.9"/><animateMotion href="#c101" path="M101 0Q100 100 1110 200" dur="1s" repeatCount="indefinite"/><circle id="c102" r="9.9"/><animateMotion href="#c102" path="M102 0Q100 100 1120 200" dur="1s" repeatCount="indefinite"/><circle id="c103" r="9.9"/><animateMotion href="#c103" path="M103 0Q100 100 1130 200" dur="1s" repeatCount="indefinite"/><circle id="c104" r="9.9"/><animateMotion href="#c104" path="M104 0Q100 100 1140 200" dur="1s" repeatCount="indefinite"/><circle id="c105" r="9.9"/><animateMotion href="#c105" path="M105 0Q100 100 1150 200" dur="1s" repeatCount="indefinite"/><circle id="c106" r="9.9"/><animateMotion href="#c106" path="M106 0Q100 100 1160 200" dur="1s" repeatCount="indefinite"/><circle id="c107" r="9.9"/><animateMotion href="#c107" path="M107 0Q100 100 1170 200" dur="1s" repeatCount="indefinite"/><circle id="c108" r="9.9"/><animateMotion href="#c108" path="M108 0Q100 100 1180 200" dur="1s" repeatCount="indefinite"/><circle id="c109" r="9.9"/><animateMotion href="#c109" path="M109 0Q100 100 1190 200" dur="1s" repeatCount="indefinite"/><circle id="c110" r="9.9"/><animateMotion href="#c110" path="M110 0Q100 100 1200 200" dur="1s" repeatCount="indefinite"/><circle id="c111" r="9.9"/><animateMotion href="#c111" path="M111 0Q100 100 1210 200" dur="1s" repeatCount="indefinite"/><circle id="c112" r="9.9"/><animateMotion href="#c112" path="M112 0Q100 100 1220 200" dur="1s" repeatCount="indefinite"/><circle id="c113" r="9.9"/><animateMotion href="#c113" path="M113 0Q100 100 1230 200" dur="1s" repeatCount="indefinite"/><circle id="c114" r="9.9"/><animateMotion href="#c114" path="M114 0Q100 100 1240 200" dur="1s" repeatCount="indefinite"/><circle id="c115" r="9.9"/><animateMotion href="#c115" path="M115 0Q100 100 1250 200" dur="1s" repeatCount="indefinite"/><circle id="c116" r="9.9"/><animateMotion href="#c116" path="M116 0Q100 100 1260 200" dur="1s" repeatCount="indefinite"/><circle id="c117" r="9.9"/><animateMotion href="#c117" path="M117 0Q100 100 1270 200" dur="1s" repeatCount="indefinite"/><circle id="c118" r="9.9"/><animateMotion href="#c118" path="M118 0Q100 100 1280 200" dur="1s" repeatCount="indefinite"/><circle id="c119" r="9.9"/><animateMotion href="#c119" path="M119 0Q100 100 1290 200" dur="1s" repeatCount="indefinite"/><circle id="c120" r="9.9"/><animateMotion href="#c120" path="M120 0Q100 100 1300 200" dur="1s" repeatCount="indefinite"/><circle id="c121" r="9.9"/><animateMotion href="#c121" path="M121 0Q100 100 1310 200" dur="1s" repeatCount="indefinite"/><circle id="c122" r="9.9"/><animateMotion href="#c122" path="M122 0Q100 100 1320 200" dur="1s" repeatCount="indefinite"/><circle id="c123" r="9.9"/><animateMotion href="#c123" path="M123 0Q100 100 1330 200" dur="1s" repeatCount="indefinite"/><circle id="c124" r="9.9"/><animateMotion href="#c124" path="M124 0Q100 100 1340 200" dur="1s" repeatCount="indefinite"/><circle id="c125" r="9.9"/><animateMotion href="#c125" path="M125 0Q100 100 1350 200" dur="1s" repeatCount="indefinite"/><circle id="c126" r="9.9"/><animateMotion href="#c126" path="M126 0Q100 100 1360 200" dur="1s" repeatCount="indefinite"/><circle id="c127" r="9.9"/><animateMotion href="#c127" path="M127 0Q100 100 1370 200" dur="1s" repeatCount="indefinite"/><circle id="c128" r="9.9"/><animateMotion href="#c128" path="M128 0Q100 100 1380 200" dur="1s" repeatCount="indefinite"/><circle id="c129" r="9.9"/><animateMotion href="#c129" path="M129 0Q100 100 1390 200" dur="1s" repeatCount="indefinite"/><circle id="c130" r="9.9"/><animateMotion href="#c130" path="M130 0Q100 100 1400 200" dur="1s" repeatCount="indefinite"/><circle id="c131" r="9.9"/><animateMotion href="#c131" path="M131 0Q100 100 1410 200" dur="1s" repeatCount="indefinite"/><circle id="c132" r="9.9"/><animateMotion href="#c132" path="M132 0Q100 100 1420 200" dur="1s" repeatCount="indefinite"/><circle id="c133" r="9.9"/><animateMotion href="#c133" path="M133 0Q100 100 1430 200" dur="1s" repeatCount="indefinite"/><circle id="c134" r="9.9"/><animateMotion href="#c134" path="M134 0Q100 100 1440 200" dur="1s" repeatCount="indefinite"/><circle id="c135" r="9.9"/><animateMotion href="#c135" path="M135 0Q100 100 1450 200" dur="1s" repeatCount="indefinite"/><circle id="c136" r="9.9"/><animateMotion href="#c136" path="M136 0Q100 100 1460 200" dur="1s" repeatCount="indefinite"/><circle id="c137" r="9.9"/><animateMotion href="#c137" path="M137 0Q100 100 1470 200" dur="1s" repeatCount="indefinite"/><circle id="c138" r="9.9"/><animateMotion href="#c138" path="M138 0Q100 100 1480 200" dur="1s" repeatCount="indefinite"/><circle id="c139" r="9.9"/><animateMotion href="#c139" path="M139 0Q100 100 1490 200" dur="1s" repeatCount="indefinite"/><circle id="c140" r="9.9"/><animateMotion href="#c140" path="M140 0Q100 100 1500 200" dur="1s" repeatCount="indefinite"/><circle id="c141" r="9.9"/><animateMotion href="#c141" path="M141 0Q100 100 1510 200" dur="1s" repeatCount="indefinite"/><circle id="c142" r="9.9"/><animateMotion href="#c142" path="M142 0Q100 100 1520 200" dur="1s" repeatCount="indefinite"/><circle id="c143" r="9.9"/><animateMotion href="#c143" path="M143 0Q100 100 1530 200" dur="1s" repeatCount="indefinite"/><circle id="c144" r="9.9"/><animateMotion href="#c144" path="M144 0Q100 100 1540 200" dur="1s" repeatCount="indefinite"/><circle id="c145" r="9.9"/><animateMotion href="#c145" path="M145 0Q100 100 1550 200" dur="1s" repeatCount="indefinite"/><circle id="c146" r="9.9"/><animateMotion href="#c146" path="M146 0Q100 100 1560 200" dur="1s" repeatCount="indefinite"/><circle id="c147" r="9.9"/><animateMotion href="#c147" path="M147 0Q100 100 1570 200" dur="1s" repeatCount="indefinite"/><circle id="c148" r="9.9"/><animateMotion href="#c148" path="M148 0Q100 100 1580 200" dur="1s" repeatCount="indefinite"/><circle id="c149" r="9.9"/><animateMotion href="#c149" path="M149 0Q100 100 1590 200" dur="1s" repeatCount="indefinite"/><circle id="c150" r="9.9"/><animateMotion href="#c150" path="M150 0Q100 100 1600 200" dur="1s" repeatCount="indefinite"/><circle id="c151" r="9.9"/><animateMotion href="#c151" path="M151 0Q100 100 1610 200" dur="1s" repeatCount="indefinite"/><circle id="c152" r="9.9"/><animateMotion href="#c152" path="M152 0Q100 100 1620 200" dur="1s" repeatCount="indefinite"/><circle id="c153" r="9.9"/><animateMotion href="#c153" path="M153 0Q100 100 1630 200" dur="1s" repeatCount="indefinite"/><circle id="c154" r="9.9"/><animateMotion href="#c154" path="M154 0Q100 100 1640 200" dur="1s" repeatCount="indefinite"/><circle id="c155" r="9.9"/><animateMotion href="#c155" path="M155 0Q100 100 1650 200" dur="1s" repeatCount="indefinite"/><circle id="c156" r="9.9"/><animateMotion href="#c156" path="M156 0Q100 100 1660 200" dur="1s" repeatCount="indefinite"/><circle id="c157" r="9.9"/><animateMotion href="#c157" path="M157 0Q100 100 1670 200" dur="1s" repeatCount="indefinite"/><circle id="c158" r="9.9"/><animateMotion href="#c158" path="M158 0Q100 100 1680 200" dur="1s" repeatCount="indefinite"/><circle id="c159" r="9.9"/><animateMotion href="#c159" path="M159 0Q100 100 1690 200" dur="1s" repeatCount="indefinite"/><circle id="c160" r="9.9"/><animateMotion href="#c160" path="M160 0Q100 100 1700 200" dur="1s" repeatCount="indefinite"/><circle id="c161" r="9.9"/><animateMotion href="#c161" path="M161 0Q100 100 1710 200" dur="1s" repeatCount="indefinite"/><circle id="c162" r="9.9"/><animateMotion href="#c162" path="M162 0Q100 100 1720 200" dur="1s" repeatCount="indefinite"/><circle id="c163" r="9.9"/><animateMotion href="#c163" path="M163 0Q100 100 1730 200" dur="1s" repeatCount="indefinite"/><circle id="c164" r="9.9"/><animateMotion href="#c164" path="M164 0Q100 100 1740 200" dur="1s" repeatCount="indefinite"/><circle id="c165" r="9.9"/><animateMotion href="#c165" path="M165 0Q100 100 1750 200" dur="1s" repeatCount="indefinite"/><circle id="c166" r="9.9"/><animateMotion href="#c166" path="M166 0Q100 100 1760 200" dur="1s" repeatCount="indefinite"/><circle id="c167" r="9.9"/><animateMotion href="#c167" path="M167 0Q100 100 1770 200" dur="1s" repeatCount="indefinite"/><circle id="c168" r="9.9"/><animateMotion href="#c168" path="M168 0Q100 100 1780 200" dur="1s" repeatCount="indefinite"/><circle id="c169" r="9.9"/><animateMotion href="#c169" path="M169 0Q100 100 1790 200" dur="1s" repeatCount="indefinite"/><circle id="c170" r="9.9"/><animateMotion href="#c170" path="M170 0Q100 100 1800 200" dur="1s" repeatCount="indefinite"/><circle id="c171" r="9.9"/><animateMotion href="#c171" path="M171 0Q100 100 1810 200" dur="1s" repeatCount="indefinite"/><circle id="c172" r="9.9"/><animateMotion href="#c172" path="M172 0Q100 100 1820 200" dur="1s" repeatCount="indefinite"/><circle id="c173" r="9.9"/><animateMotion href="#c173" path="M173 0Q100 100 1830 200" dur="1s" repeatCount="indefinite"/><circle id="c174" r="9.9"/><animateMotion href="#c174" path="M174 0Q100 100 1840 200" dur="1s" repeatCount="indefinite"/><circle id="c175" r="9.9"/><animateMotion href="#c175" path="M175 0Q100 100 1850 200" dur="1s" repeatCount="indefinite"/><circle id="c176" r="9.9"/><animateMotion href="#c176" path="M176 0Q100 100 1860 200" dur="1s" repeatCount="indefinite"/><circle id="c177" r="9.9"/><animateMotion href="#c177" path="M177 0Q100 100 1870 200" dur="1s" repeatCount="indefinite"/><circle id="c178" r="9.9"/><animateMotion href="#c178" path="M178 0Q100 100 1880 200" dur="1s" repeatCount="indefinite"/><circle id="c179" r="9.9"/><animateMotion href="#c179" path="M179 0Q100 100 1890 200" dur="1s" repeatCount="indefinite"/><circle id="c180" r="9.9"/><animateMotion href="#c180" path="M180 0Q100 100 1900 200" dur="1s" repeatCount="indefinite"/><circle id="c181" r="9.9"/><animateMotion href="#c181" path="M181 0Q100 100 1910 200" dur="1s" repeatCount="indefinite"/><circle id="c182" r="9.9"/><animateMotion href="#c182" path="M182 0Q100 100 1920 200" dur="1s" repeatCount="indefinite"/><circle id="c183" r="9.9"/><animateMotion href="#c183" path="M183 0Q100 100 1930 200" dur="1s" repeatCount="indefinite"/><circle id="c184" r="9.9"/><animateMotion href="#c184" path="M184 0Q100 100 1940 200" dur="1s" repeatCount="indefinite"/><circle id="c185" r="9.9"/><animateMotion href="#c185" path="M185 0Q100 100 1950 200" dur="1s" repeatCount="indefinite"/><circle id="c186" r="9.9"/><animateMotion href="#c186" path="M186 0Q100 100 1960 200" dur="1s" repeatCount="indefinite"/><circle id="c187" r="9.9"/><animateMotion href="#c187" path="M187 0Q100 100 1970 200" dur="1s" repeatCount="indefinite"/><circle id="c188" r="9.9"/><animateMotion href="#c188" path="M188 0Q100 100 1980 200" dur="1s" repeatCount="indefinite"/><circle id="c189" r="9.9"/><animateMotion href="#c189" path="M189 0Q100 100 1990 200" dur="1s" repeatCount="indefinite"/><circle id="c190" r="9.9"/><animateMotion href="#c190" path="M190 0Q100 100 2000 200" dur="1s" repeatCount="indefinite"/><circle id="c191" r="9.9"/><animateMotion href="#c191" path="M191 0Q100 100 2010 200" dur="1s" repeatCount="indefinite"/><circle id="c192" r="9.9"/><animateMotion href="#c192" path="M192 0Q100 100 2020 200" dur="1s" repeatCount="indefinite"/><circle id="c193" r="9.9"/><animateMotion href="#c193" path="M193 0Q100 100 2030 200" dur="1s" repeatCount="indefinite"/><circle id="c194" r="9.9"/><animateMotion href="#c194" path="M194 0Q100 100 2040 200" dur="1s" repeatCount="indefinite"/><circle id="c195" r="9.9"/><animateMotion href="#c195" path="M195 0Q100 100 2050 200" dur="1s" repeatCount="indefinite"/><circle id="c196" r="9.9"/><animateMotion href="#c196" path="M196 0Q100 100 2060 200" dur="1s" repeatCount="indefinite"/><circle id="c197" r="9.9"/><animateMotion href="#c197" path="M197 0Q100 100 2070 200" dur="1s" repeatCount="indefinite"/><circle id="c198" r="9.9"/><animateMotion href="#c198" path="M198 0Q100 100 2080 200" dur="1s" repeatCount="indefinite"/><circle id="c199" r="9.9"/><animateMotion href="#c199" path="M199 0Q100 100 2090 200" dur="1s" repeatCount="indefinite"/></g></svg>

See also: Taylor Hunt's post on Css tricks: Improving SVG Runtime Performance
Some browsers might also have issues with very big numbers as described here:
The Limits of Numbers in SVG

CodePudding user response：

As I wrote above in the update, it turned out that the issue was caused by scale(). Luckily, I had control over it (I don't over the path itself) so I managed to set the scaling values closer to 1 (0.2 in my case) and it worked like a charm!