How to use framer-motion and reactjs to stagger children with svg lines?

Question

I have a piece of code with 2 variants to help with the animation as such :

const xo = {
  hidden: {
    opacity: 0,
    pathLength: 0,
    fill: "#fff134"
  },
  visible: {
    opacity: 1,
    pathLength: 1,
    fill: "#563930",
    transition: { duration: 2 }
  }
};

const stagger = {
  hidden: {
    opacity: 0
  },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.05 }
  }
};

Which is reflected in the code as :

<motion.div
      className="App"
      variants={stagger}
      initial="hidden"
      animate="visible"
    >
      <motion.svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 100 100"
        className="v1"
      >
        <motion.path
          d="M 100 0 L 100 280 Z"
          variants={xo}
          initial="hidden"
          animate="visible"
          transition={{
            default: { duration: 2, ease: "easeInOut" },
            fill: { duration: 2, ease: [1, 0, 0.8, 1] }
          }}
        />
      </motion.svg>

However the children do not stagger and animate all at once. How can I achieve staggering children with svg lines?

Sample code can be found here

Answer 1

Turns out

<motion.path
          d="M 100 0 L 100 280 Z"
          variants={xo}

should not have any initial or animate and should rely on variant alone.