svg animation using framer motion

I need to create this base shape and those curved gray lines, those gray lines should always be there as they are static and on top of those gray lines should infinitely flow the blue colored balls, they should flow simultaneously and infinitely the blue balls should originate from the center "U" shape and go till the other shapes and this should repeat infinitely image that is to be created ->

I have tried creating something similar to that but dont know how to bend those lines like that attached image nor do i know how to get those blue balls hence have added blue lines instead NOTE : the gray lines should always be static and constant and and on top of those gray lines should flow the blue balls

code ->

import { motion } from "framer-motion";


  const Comp = () => {
return (
<svg width="800" height="800" viewBox="0 0 200 200" className="rotate-90">
        {/* Lines from the left side */}
        <line
          y1="100"
          x1="100"
          x2="52"
          y2="175"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          y1="100"
          x1="100"
          x2="52"
          y2="175"
        />
        <line
          x1="100"
          y1="100"
          x2="76"
          y2="174"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="76"
          y2="174"
        />
        <line
          x1="100"
          y1="100"
          x2="100"
          y2="174"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="100"
          y2="174"
        />
        <line
          x1="100"
          y1="100"
          x2="126"
          y2="180"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="126"
          y2="180"
        />
        <line
          x1="100"
          y1="100"
          x2="147"
          y2="168"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="147"
          y2="168"
        />

        {/* Lines from the right side */}
        {/* Lines from the right side */}
        <line
          x1="100"
          y1="100"
          x2="148" 
          y2="25"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="148"
          y2="25"
        />
        <line
          x1="100"
          y1="100"
          x2="124"
          y2="26"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="124"
          y2="26"
        />
        <line
          x1="100"
          y1="100"
          x2="100"
          y2="26"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="100"
          y2="26"
        />
        <line
          x1="100"
          y1="100"
          x2="74"
          y2="20"
          stroke="#3D414899"
          strokeWidth="1"
        />
        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="74"
          y2="20"
        />
        <line
          x1="100"
          y1="100"
          x2="55"
          y2="27"
          stroke="#3D414899"
          strokeWidth="1"
        />

        <motion.line
          variants={pathVariants}
          initial="hidden"
          animate="visible"
          // transition={transition}
          stroke="#00A3FF"
          strokeWidth="1"
          x1="100"
          y1="100"
          x2="55"
          y2="27"
        />
      </svg> 
)
}

Suppose you have the next polyline connecting 2 dots: {x:150,y:75} and {x:230,y:30}. If you don't know SVG, the M command is the move to command (you move to this point) Next comes a few L commands. This is drawing a line from the actual point to the next. For example L180,75 is drawing a line from 150,75 to 180,75.

<svg fill="none" stroke="black">
  <path   
       d="M150,75
          L180,75
          L180,30
          L230,30"/>
 </svg>

Now in order to add the curvature you will need to use the vertex as a control point of a quadratic Bézier. For the Bézier you will need a starting point and an ending point. For this you will stop the previous line 10 units before and you will start the next line 10 units after. (10 in an example. You may want to choose another value)

<svg fill="none" stroke="black">
  <!--<path   
       d="M150,75
          L180,75
          here goes the first quadratic Bezier command
          L180,30
          here goes the second quadratic Bezier command
          L230,30"/>-->
  
  <path
        d="M150,75
           L170,75
           Q180,75 180,65
           L180,40
           Q180,30 190,30
           L230,30"/>
</svg>

As for the icons you first set the position of the icons Next you decide the starting point and the end point of the lines connecting the icons. Next you draw the polyline and finally you add the curvature.

Please try to put together a small example where you connect the central U with an icon. Then if you need more ideas ask again.