Convention: How to animate SVG logo rotation without drift?

Documentation for Sessions

📏 Convention: How to animate SVG logo rotation without drift?

Date: 2026-02-28
Time: 17:35:07 UTC
Session: gspace1-153.4
Agent: angular
Confidence: 95%
Status: ✅ Documented

📋 Decision Context

Question:

How to animate SVG logo rotation without drift?

Task: Fix logo animation drift during rotation

🎯 Decision Made

Chosen:

SVG animateTransform with rotate(angle cx cy) and explicit center coordinates

Options Considered:

CSS transform + transform-origin
SVG animateTransform with rotate(angle cx cy)

💭 Reasoning

CSS transform-origin on SVG elements behaves differently than on HTML—it uses screen coordinates vs viewBox coordinates, causing drift during rotation. SVG native animateTransform with rotate(angle cx cy) uses the viewBox coordinate system. The center (0,0) in viewBox is explicit, so rotation stays in place with zero drift. Use scale(0.7) on a wrapper g to keep rotated content within bounds.

📁 Files Involved

deploy/gograb-landing/index.html

🔗 Related

Decision ID: dev_1772300104040_c8aknuw
Session: 153
Workspace: gspace1

Auto-generated by MCP Smart Consolidation