Drawing a path with Uis?

Am currently looking for help with a project - I’m attempting to create a Ui with [9] individual boxes, the Player is able to select four of these boxes [MouseEnter] and upon selecting, it draws a ‘path’ or ‘line’ from the previous box to the next.

I’ve attempted this and had no success.
My attempts have included simply creating a new Instance from one UDIM2 to the next but has failed.
Any ideas?

To start, it would be helpful for you to set the AnchorPoints of all the boxes to 0.5, 0.5 so that their positions are at the center.

You’ll need to style the “Line” as you please, I didn’t even remove the border. Don’t forget to set the Parent either!

function drawPath(startBtn, endBtn)
	local startX, startY = startBtn.Position.X.Offset, startBtn.Position.Y.Offset
	local endX, endY = endBtn.Position.X.Offset, endBtn.Position.Y.Offset
	local Line = Instance.new("Frame")
	Line.AnchorPoint = Vector2.new(0.5, 0.5)
	Line.Size = UDim2.new(0, ((endX - startX) ^ 2 + (endY - startY) ^ 2) ^ 0.5, 0, 5) -- Get the size using the distance formula
	Line.Position = UDim2.new(0, (startX + endX) / 2, 0, (startY + endY) / 2) -- Get the position using the midpoint formula
	Line.Rotation = math.atan2(endY - startY, endX - startX) * (180 / math.pi) -- Get the rotation using atan2, convert radians to degrees
	Line.Parent = PARENT_HERE

Edit: Added comments for better understanding