Code acting differently in Webflow?

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 :thinking: 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:

18%20PM

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 :slight_smile: 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”