the-secrets-of-variable-icons_001.html

    <svg id="a01" data-name="a01" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 283.46 283.46"
        style="width:100%;height:auto;">
        <defs>
            <style>
                .cls-1 {
                    fill: none;
                    stroke: #631010;
                    stroke-linecap: round;
                    stroke-linejoin: round;
                    stroke-width: 16px;
                }
            </style>
        </defs>
        <path class="cls-1" d="M24.81,243.87c123.99-50.46,123.99,39.38,233.85,0" />
        <g id="floatPathGroup">
            <path class="cls-1"
                d="M37.9,129.74c15.54,38.22,23.05,52.12,103.83,52.12s88.29-13.9,103.83-52.12c-51.76,24.1-156.17,23.98-207.66,0Z" />
            <polyline class="cls-1" points="133.43 147.67 133.43 27.14 227 91.9 136.48 91.9" />
        </g>
    </svg>

    <script>
        (function () {
            const svg = document.getElementById('a01');
            const floatGroup = document.getElementById('floatPathGroup');
            if (!svg || !floatGroup) return;

            let start = null;
            const amplitude = 5;
            const duration = 2000;

            function animate(timestamp) {
                if (!start) start = timestamp;
                const elapsed = timestamp - start;
                const progress = (elapsed % duration) / duration;
                const angle = progress * Math.PI * 2;
                const offset = Math.sin(angle) * amplitude;

                floatGroup.setAttribute('transform', 'translate(0,' + offset + ')');
                requestAnimationFrame(animate);
            }
            requestAnimationFrame(animate);
        })();
    </script>