Use the provided SVG as the frame-0 starting state, and keep the two middle dots fixed in place. Animate the rightmost dot first: it rises straight upward, travels left across the row on a raised horizontal path above the other dots, then drops straight down into the leftmost position. Shortly after the rightmost dot reaches the upper-left area, animate the original leftmost dot downward, then move it right along a lower horizontal path beneath the row, and finally lift it back up into the rightmost position. Both moving dots keep the same size, shape, and opacity, with clean linear travel and slight easing around the turns; after the two end dots have swapped places, the four dots briefly align in the straight row shown in the provided SVG, then repeat the same over-under exchange three more times, for four exchanges in total.