// Get canvas and context let canvas = document.getElementById('scrollChart'); let context = canvas.getContext('2d'); // Adjust canvas size canvas.width = window.innerWidth; canvas.height = 400; // Scroll-based drawing function window.addEventListener('scroll', function () { let scrollPos = window.scrollY; // Get scroll position context.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas before redrawing // Define starting point context.beginPath(); context.moveTo(0, canvas.height / 2); // Start middle-left // Calculate chart line length based on scroll position let chartLength = Math.min(scrollPos / 2, canvas.width - 50); // Limit to width // Set line style context.strokeStyle = "#00FF88"; // Neon green line context.lineWidth = 2; // Draw line upward towards top-right corner context.lineTo(chartLength, canvas.height / 2 - (chartLength / 4)); // Adjust curve // Finish the drawing context.stroke(); // Stop drawing if max height/width is reached if (scrollPos >= canvas.height) { window.removeEventListener('scroll', this); // Stop animation once finished } }); Integration was clunky, until now