Scrolling animation works in VS Code but not on my Web Page [closed]

I have created a scrolling animation on Figma inspired by the Lusion website. I added an SVG from Figma to the HTML to follow the scrollbar movement added via javascript.

It works in VS Code, but on adding the code to my webpage it didn’t work as the animation appears as an image file instead of having the scrolling animation.

const svg = document.querySelector('svg.squiggle');
const path = svg.querySelector('path');

const scroll = () => {
  const distance = window.scrollY;
  const totalDistance = document.body.scrollHeight - window.innerHeight;
  const percentage = distance / totalDistance;
  const pathLength = path.getTotalLength();
  path.style.strokeDasharray = `${pathLength}`;
  path.style.strokeDashoffset = `${pathLength * (1 - percentage)}`;
};

scroll();
window.addEventListener('scroll', scroll);

.squiggle {
  postion: absolute;
  z-index: 1;
}

<svg class="squiggle" width="1526" height="1157" viewBox="0 0 1526 1157" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M0 15C93.3084 42.7373 271.962 89.4848 172.314 331.518C72.6661 573.552 723.459 610.432 779.712 434.249C807.428 347.442 757.345 204.851 536.619 261.148C315.893 317.444 374.557 592.112 434.828 722.409C524.165 915.543 830.072 1277.77 1511 1089.16" 
  stroke="#FF0000" 
  stroke-width="30" 
  stroke-linecap="round"/>
  </svg>