Animation

by __fadi

HTML

<!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">
               ...