How to Draw on Scroll using JavaScript and SVG ? Last Updated : 31 May, 2024 Comments Improve Suggest changes Like Article Like Report To create an engaging scroll animation, use JavaScript to manipulate SVG path properties. As the user scrolls, JavaScript calculates the scroll percentage and adjusts the strokeDasharray and strokeDashoffset of the SVG path, gradually drawing the path to create a dynamic visual effect. ApproachCreate an HTML file (index.html) and define the basic structure. The <svg> element contains a <path> element. This SVG displays a zigzag line using specific coordinates for the d attribute.The CSS sets the body height to 2000px to enable scrolling, centers the SVG on the page, and styles the path with a steel blue stroke color, a width of 2px, and no fill.The SVG is configured to have a viewBox of "0 0 100 100" and uses preserveAspectRatio="none" to ensure the aspect ratio is not preserved, allowing it to stretch as needed.The JavaScript code listens for the scroll event and dynamically updates the SVG path's stroke length. It calculates the scroll percentage and adjusts the strokeDasharray and strokeDashoffset properties to animate the drawing of the path as the user scrolls.The strokeDasharray property defines the pattern of dashes and gaps used to paint the outline of the shape, while strokeDashoffset specifies where the dash pattern starts. This creates the effect of the path being drawn as the user scrolls down the page, and reverses the drawing when scrolling up.Example: The example below shows how to draw on scroll using JavaScript and SVG. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Scroll Animation</title> <style> body { height: 2000px; display: flex; justify-content: center; align-items: center; } svg { width: 100%; height: 300px; } path { stroke: steelblue; stroke-width: 2; fill: none; } </style> </head> <body> <svg viewBox="0 0 100 100" preserveAspectRatio="none"> <path id="zigzag" d="M10 90 L30 10 L50 90 L70 10 L90 90" /> </svg> <script src="script.js"></script> </body> </html> JavaScript window.addEventListener('scroll', function () { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; let path = document.getElementById('zigzag'); let pathLength = path.getTotalLength(); // Calculate the scroll percentage let scrollPercent = scrollTop / (document.documentElement.scrollHeight - window.innerHeight); // Calculate the length to be drawn based on scroll percentage let drawLength = pathLength * scrollPercent; // Update the dasharray and dashoffset path.style.strokeDasharray = pathLength; path.style.strokeDashoffset = pathLength - drawLength; // Reverse the drawing when scrolling up if (scrollTop === 0) { path.style.strokeDashoffset = pathLength; } }); Output: Comment More infoAdvertise with us Next Article How to Draw on Scroll using JavaScript and SVG ? P parthdollor Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to Zoom an Image on Scroll using JavaScript? Zoom in and out of images is a common feature in web development. One way to achieve this effect is by using JavaScript to zoom in and out of an image when the user scrolls. In this article, we will go through the steps needed to create a zoomable image using JavaScript.Step 1: HTML Markup: The firs 3 min read How to Get and Set Scroll Position of an Element using JavaScript ? In this article, we will learn how to get and set the scroll position of an HTML element using JavaScript.Approach: We will be using the HTML DOM querySelector() and addEventListener() methods and the HTML DOM innerHTML, scrollTop and scrollLeft properties.We create an HTML div element with an id of 3 min read How to get the position of scrollbar using JavaScript ? JavaScript is an amazing language and there are many functions available through which we can access any element of the HTML page through javascript. There are some simple techniques to get the scrollbar position that are discussed below: Approach 1: Whenever the function getScroll() is encountered, 3 min read How to Create Scroll Indicator using HTML CSS and JavaScript ? Scroll Indicator is a progress bar that represents how much a page has been scrolled. When we scroll down the bar fills up and when we scroll up the bar amount reduces. Approach: Now, we will create a basic webpage with text to enable scrolling and then use JavaScript to make the scroll indicator wo 3 min read How to Create a Change Background on Scroll using HTML CSS and JavaScript ? In this article, we will try to change the background color of the container once the scroll occurs. If a user scrolls down the page the background color will be changed. We will use the below approach to accomplish this task.Using the scroll event on the window objectIn this approach, we will use t 6 min read How to Change Image Dynamically when User Scrolls using JavaScript ? We are going to add the functionality to our web-page so that whenever the user scrolls up or scrolls down on the image, then the image changes. We have used only 3 images but it can easily be expanded for multiple images.We are keeping the images on top of each other, this makes sure only one image 4 min read How to animate scrollTop using jQuery ? The scrollTop property in JavaScript is used to set or return the vertical scrollbar position of any element. Setting the scrollTop to any value will make the page scroll to that location. The scroll by default takes place immediately and abruptly scrolls to the value. This scrolling can be animated 3 min read Create an Infinite Scroll Page using HTML CSS & JavaScript In this article, we will create an infinite scroll page using HTML, CSS, and JavaScript. Infinite scrolling allows you to load and display content as the user scrolls down the page, providing a seamless browsing experience. We'll fetch and append new content dynamically as the user reaches the end o 2 min read How to draw a circle using SVG tag in HTML ? In this article, you will learn about SVG basic shape like circle which is among the different shapes of SVG like <rect>, <line>, <ellipse>, <polygon>, etc. So you can easily draw circles using <circle> tag whose parent tag is SVG tag in HTML. Basically, the <circle 2 min read How to Make an SVG Image in JavaScript ? The SVG images are vector images that do not lose their quality either in the case of Zoom in or Zoom out. These are the Scalable Vector Graphics that can be directly created using the <svg> tag in HTML or dynamically using JavaScript. Let us create an SVG using JavaScript. We can use the belo 2 min read Like