After investing several hours into the issue, I have discovered that finding a solution is not as straightforward as it seems. However, I have managed to come up with a solution that, while effective, still poses its own set of challenges.
https://i.sstatic.net/Vc4hs.gif
It's important to note that the blue polygon serves the purpose of illustrating the shape used for the clip-path of the group element <g id="Line_Orange" >
I chose not to attach this to the scroll event in order to focus on developing the logic behind the clip-path polygon using a basic setup. This allowed me to easily start and stop the setInterval() function to track the x and y values for determining where the required turns should take place.
You can view the complete example here: https://codepen.io/Alexander9111/pen/eYmbajB
Below is the JavaScript code:
var running = false;
const g = document.querySelector("#Line_Orange");
const g_clone = g.cloneNode(true);
const svg = document.querySelector("svg");
g_clone.id = "Line_Grey";
//svg.appendChild(g_clone);
svg.insertBefore(g_clone, svg.childNodes[0]);
g.setAttribute('clip-path', "polygon(0 0, 0 100, 250 100, 250 0)");
const polygon = document.querySelector("#polygon_mask");
let segment_num = 0;
var temp_arr = [];
var polygon_points_arr = [80, 0, 80, 0];
var polygon_points_str = "80 0 80 0";
const polygon_segments = [
{
n: 0, dir: 1, progress: "y", boost: 1, init_x_y: [80,0], index: [3,5],
points:[80, 0, 80, 250, 250, 250, 250, 0]
}, ...
The heart of the JavaScript lies in this array:
const polygon_segments = [
{
n: 0, dir: 1, progress: "y", boost: 1, init_x_y: [80,0], index: [3,5],
points:[80, 0, 80, 250, 250, 250, 250, 0]
}, ...
Each segment of the polygon is represented in this array, which accounts for the increasing complexity of the polygon.
To further clarify, refer to this diagram:
https://i.sstatic.net/RpwmV.png
Additionally, this diagram shows how the number of points in the polygon grows:
https://i.sstatic.net/oThvX.jpg