Learn how to draw on scroll using JavaScript and SVG

Scroll Drawing

Using SVG and JavaScript to draw a triangle on scroll – note that it has to be a <path> element:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn how to create interactive drawings that respond to scrolling events using JavaScript and SVG. A simple guide to implement scroll-based animations and drawings on your web page.">
  <meta name="keywords" content="JavaScript, SVG, drawing on scroll, interactive drawing, scroll animations, web development, tutorial, scroll event, HTML, CSS">
  <meta name="author" content="Your Name">
  <title>Learn how to draw on scroll using JavaScript and SVG</title>
  <style>
    body {
      height: 1500px; /* Added height to enable scrolling */
    }

    #drawingArea {
      width: 100%;
      height: 500px;
      border: 1px solid black;
      margin-top: 50px;
    }

    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>

<h1>Learn How to Draw on Scroll</h1>
<p>Scroll down to draw lines on the SVG canvas.</p>

<div id="drawingArea">
  <svg id="svgCanvas" xmlns="http://www.w3.org/2000/svg">
    <line id="line" x1="0" y1="0" x2="0" y2="0" stroke="black" stroke-width="2" />
  </svg>
</div>

<script>
  const svgCanvas = document.getElementById('svgCanvas');
  const line = document.getElementById('line');

  let startY = 0;

  // Handle scroll event
  window.addEventListener('scroll', function() {
    // Get current scroll position
    let scrollPosition = window.scrollY;
    
    // Draw based on the scroll position (scaling to create a line as you scroll)
    let lineLength = scrollPosition * 0.1; // Change the scaling factor to adjust speed

    // Update line coordinates based on scroll position
    line.setAttribute('x2', lineLength);
    line.setAttribute('y2', lineLength);
  });
</script>

</body>
</html>

Explanation:

HTML Structure:
- We have a simple page with a heading, a description, and a div with an SVG canvas inside.
- The svg tag is used to create the canvas where the line is drawn, and inside the svg, there’s a line element that will be animated when the user scrolls.
CSS Styling:
- The #drawingArea defines the area in which the SVG will be visible. It has a fixed height and a border to visualize the canvas.
- The body has an increased height (1500px) to ensure there’s enough space for scrolling.
JavaScript Functionality:
- The window.addEventListener('scroll', ...) listens for the scroll event. Each time the user scrolls, the function is triggered.
- The scrollY value gives the current scroll position.
- Based on the scroll position, the line element is updated using setAttribute to adjust its x2 and y2 attributes, creating the effect of drawing a line as you scroll.

Learn how to draw on scroll using JavaScript and SVG

Scroll Drawing

Explanation:

Leave a Reply Cancel reply