Placing div elements (Pictures) according to a specific path (canvas/svg – rope)

I want to place div elements according to a specific path.

Actually there is a rope (a simple div with a rope bg-pattern) and pictures (Also div elements).

My first problem is to bend this div element to have a hanging rope effect.
I think that I can use a canvas to draw the rope.

The rope should be responsive. Smaller screen -> smaller bend radius, bigger screen bigger. So I don’t know if canvas is a good solution.

After successfully bending that rope I want to assign pictures to it. So they will look like hanging on the rope. (Also responsive)

Actually my rope is straight and the arrangement of pictures act responsive.

Here is a screenshot of my actual result:

And how it has to look like (Photoshop mockup):

Is there a way to do it only with JS/CSS?