Shape Morphing Animation (Framer Motion)

// components/FM_SVG_Morph.tsx
import { motion } from "framer-motion";

export const FM_SVG_Morph = () => (
  <motion.svg width="200" height="200" viewBox="0 0 200 200">
    <motion.path
      d="M20,100 Q100,10 180,100 Q100,190 20,100 Z"
      animate={{
        d: [
          "M20,100 Q100,10 180,100 Q100,190 20,100 Z",
          "M10,100 Q100,30 190,100 Q100,170 10,100 Z"
        ]
      }}
      transition={{ duration: 1.2, repeat: Infinity, repeatType: "reverse" }}
      fill="#7c3aed"
    />
  </motion.svg>
);

• d attribute: Defines the initial SVG path coordinates.
• animate: Contains an array of path strings to morph between.
• transition: Duration is 1.2s, repeats infinitely, and reverses direction each cycle.
• Works best when both paths have the same number of points and compatible shapes.
• Great for creative SVG shape transformations and organic UI effects!