Creating a dynamic spline in QML

[Jay_emissary]

Hello friends,
I'm trying to simulate this "note slide" effect as shown in the following image:

The idea is that I have two rectangles that represent the head and tail of the object, and I will draw a shape that follows a "spline" as the body. This puts me in unfamiliar territory, as I'm unsure of which QML functions work best for creating effects like this. However, I've already made an attempt!

Qt's ShapePath seemed like a sound solution, but every new point I create deforms the shape to said point, which brings me further away from my objective. Below I have recreated this in an example project.

import QtQuick
import Qt5Compat.GraphicalEffects
import QtQuick.Shapes
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: "black"

    Rectangle{
        id:rect1
        height: 40
        width: 40
        color: "red"
        x:400
        y:450
    }
    Rectangle{
        id: rect2
        height: 40
        width: 40
        color: "red"
        x:600
        y:0
    }

    Shape{
        anchors.fill: parent

        ShapePath{
            id: trailPath
            strokeWidth: 2
            strokeColor: "white"
            fillColor: "white"
            capStyle: ShapePath.FlatCap
            startX:  rect1.x+rect1.width/2; startY: rect1.y+rect1.height/2
            PathLine { id: pathline; x: trailPath.startX; y:(rect1.y+rect1.height/2)-rect1.height/2 } //line upwards (begins at rectangle's middle and stops at the rectangle's top
            PathCurve { x:rect2.x+rect2.width/2; y: (rect2.y+rect2.height/2) + rect2.height/2 } //line that curves to the next rectangle
            PathLine { x: rect2.x+rect2.width/2; y:rect2.y+rect2.height/2 } //line upwards (stops at the recangle's middle)


        }
    }


}

This is close! But because the shapepath is a rectangle, I'd have to edit more points to make this look "rectangular," which increases the margin of error. Is there a simpler way of drawing lines on a path? The best case scenario would be where I have a singular line, and it follows the same path as before, but I just increase the stroke to manage the size.

[GrecKo]

Use a transparent fillColor, you only care about the stroke.

[Jay_emissary]

Doesn't path only draw "lines" in between each point? I would use that, but it doesn't provide any visuals... I imagine that I could draw a shape following the path, but just like before, I'm not sure how to keep it relatively uniform throughout.

[GrecKo]

Use a transparent fillColor, you only care about the stroke.

[Jay_emissary]

@GrecKo Ah that was a little painfully obvious haha! Thank you for pointing that out. I've been banging my head against the wall learning about shapepaths for hours now, and thought that there was a more explicit object type for the job. Turns out it was right in front of me all along!