SVG Line Animation

index.html

<svg width="236" height="68" viewBox="0 0 236 68" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.5 0.5H89C90.6569 0.5 92 1.84315 92 3.5V29C92 30.6569 93.3431 32 95 32H148.5C150.157 32 151.5 33.3431 151.5 35V64C151.5 65.6569 152.843 67 154.5 67H235.5" stroke="url(#paint0_linear)"></path><defs><linearGradient id="paint0_linear" gradientUnits="userSpaceOnUse" x1="272.78000000000065" y1="0" x2="390.99050000000085" y2="49.05000000000008"><stop stop-color="#2EB9DF" stop-opacity="0"></stop><stop stop-color="#2EB9DF"></stop><stop offset="1" stop-color="#9E00FF" stop-opacity="0"></stop></linearGradient></defs></svg>

script.js

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

const svg = document.getElementById("paint0_linear");

async function commute(duration) {
  const minValue = -100;
  const maxValue = 300;
  let value = maxValue; 
  let direction = -5;  

  function update() {
    if (value <= minValue) {
      direction = 5; 
    } else if (value >= maxValue) {
      direction = -5; 
    } 

        
    value += direction; 
    svg.setAttribute("x1", value);
    svg.setAttribute("x2", value + 100); 

    setTimeout(() => requestAnimationFrame(update), duration);
  }

  update(); // Start the animation
}

document.addEventListener("DOMContentLoaded", () => commute(10));

svg-line-animation.markdown

SVG Line Animation

A Pen by Julian S. on CodePen.

License.