Hey there!
I’ve been able to create a function in Atom that draws an SVG path using the x,y position of div elements! I’m pretty proud of it. Unfortunately, when I move it into Webflow, the path doesn’t even show up Here’s the preview in Atom:
Here’s the code:
<svg id="line">
<path id="thepath" fill="none" stroke="#a3dbd8" stroke-linecap="round" stroke-width="10px" />
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js" type="text/javascript"></script>
<script>
function drawpath() {
var thepath = $('#thepath');
var startx1 = $('#box1').position().left;
var starty1 = $('#box1').position().top;
var realDealPath = 'M ' + (startx1+45) + ',' + starty1;
var startx2 = $('#box4').position().left;
var starty2 = $('#box4').position().top;
realDealPath += 'S' + (startx2-25) + "," + (starty2-250) + " " + (startx2+25) + ',' + starty2;
var startx3 = $('#box5').position().left;
var starty3 = $('#box5').position().top;
realDealPath += 'S' + (startx3+50) + "," + (starty3-200) + " " + (startx3+25) + ',' + starty3;
var startx4 = $('#box6').position().left;
var starty4 = $('#box6').position().top;
realDealPath += 'S' + (startx4) + "," + (starty4-100) + " " + (startx4+25) + ',' + starty4;
thepath.attr('d', realDealPath);
}
window.onload = drawpath;
window.onresize = drawpath;
</script>
I properly labeled the div elements that I wanted connected in Webflow in the div block settings:
And I put the rest of the code in the page’s body. When published, my path is nowhere to be found!
Would love some insight here Thank you!
Here’s a link to inspect: https://murrvox.webflow.io/
The relevant item’s are towards the bottom → “The Process” heading being in my div id=“box1”