In Firefox, the animation exhibits performance issues like stuttering, particularly in elements that rely on animateTransform and animate for movement or opacity transitions. This issue is not present in Chrome, where the animations run smoothly without any noticeable lag. Expected Behavior: The animation should render smoothly on both Chrome and Firefox without any stuttering or lag, providing a seamless experience for users. Steps to Reproduce: Open the provided SVG code in Firefox. Observe the animation, particularly the elements with animate and animateTransform attributes. Notice the stuttering or lag compared to the smooth rendering in Chrome.

https://codepen.io/kzwr/pen/qEZzYaN

This looks like a Firefox limitation with SVG SMIL animations rather than a problem with your code. Firefox tends to struggle when many elements animate at the same time, especially with transform and opacity. Reducing the number of animated elements usually helps. Another option is to move the animation to CSS instead of using animate or animateTransform. Some people also get better results by slightly slowing the animation down so Firefox has more time to render each frame. If you need it to be smooth everywhere, switching away from SMIL animations is usually the safest approach.

Understood, thanks for the explanation. Since the same code runs smoothly in Chrome, I wanted to report this to the Firefox community in hopes that Firefox's performance will continue to improve.