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: "#fff13