import { motion } from "framer-motion";
import { forwardRef } from "react";


const SvgComponent = forwardRef((props, ref) => (
    <svg {...props} ref={ref} viewBox="0 0 100 100" width="400" height="400">
        ....
    </svg>
));

export default function App() {
    const MotionSvgComponent = motion(SvgComponent);

    return (
        <div>
            <MotionSvgComponent
                animate={{
                    viewBox: [
                        "0 0 100 100",
                        "0 0 50 50",
                        "50 0 50 50",
                        "0 50 50 50",
                        "50 50 50 50",
                        "0 0 100 100"
                    ]
                }}
                transition={{
                    duration: 10
                }}
            />

        </div>
    );
}

<MotionSvgComponent
  animate={{
    x: 50,
  }}
/>