How to animate line with SVG from JavaScript without any library

You could create each element in javascript and then append them to the mother element. Something like this:

<svg id="myCanvas" width="500" height="500"></svg>

<script>
window.onload = function(){
  var svgNS = "http://www.w3.org/2000/svg";
  var lineElem = document.createElementNS(svgNS, "line");
  lineElem.setAttributeNS(null, 'x1', '100');
  lineElem.setAttributeNS(null, 'y1', '100');
  lineElem.setAttributeNS(null, 'y2', '300');
  lineElem.setAttributeNS(null, 'stroke', 'black');
     
  var animateElem1 = document.createElementNS(svgNS, "animate");
  animateElem1.setAttributeNS(null, 'attributeName', 'y1');
  animateElem1.setAttributeNS(null, 'from', '100');
  animateElem1.setAttributeNS(null, 'to', '300');
  animateElem1.setAttributeNS(null, 'dur', '2s');
  animateElem1.setAttributeNS(null, 'fill', 'freeze');
     
  var animateElem2 = document.createElementNS(svgNS, "animate");
  animateElem2.setAttributeNS(null, 'attributeName', 'x2');
  animateElem2.setAttributeNS(null, 'from', '100');
  animateElem2.setAttributeNS(null, 'to', '300');
  animateElem2.setAttributeNS(null, 'dur', '2s');
  animateElem2.setAttributeNS(null, 'fill', 'freeze');
     
  lineElem.appendChild(animateElem1);
  lineElem.appendChild(animateElem2);
 
  document.getElementById("myCanvas").appendChild(lineElem);

};
</script>

Here is an example of a success animation i made using only SVG and html and css animations.

Enjoy :)

html:

<div id="successContainer" onAnimationEnd={() => onAnimationEnd()}>
    <svg id="successAnimation" className="animated"
        xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 70 70">
        <circle id="successAnimationCircle" cx="35" cy="35" r="24" stroke="#979797" strokeWidth="2" strokeLinecap="round" fill="transparent" />
        <polyline id="successAnimationCheck" stroke="#979797" strokeWidth="2" points="23 34 34 43 47 27" fill="transparent" />
    </svg>
</div>

css:

@-webkit-keyframes scaleAnimation {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes scaleAnimation {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes drawCircle {
  0% {
    stroke-dashoffset: 151px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes drawCircle {
  0% {
    stroke-dashoffset: 151px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes drawCheck {
  0% {
    stroke-dashoffset: 36px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes drawCheck {
  0% {
    stroke-dashoffset: 36px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#successContainer {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#successAnimationCircle {
  stroke-dasharray: 151px 151px;
  stroke:#4CAF50;
}

#successAnimationCheck {
  stroke-dasharray: 36px 36px;
  stroke:#4CAF50;
}

#successAnimationResult {
    stroke:#FFF;
    opacity: 0;
}

#successAnimation.animated {
    animation: 1s ease-out 0s 1 both scaleAnimation;
}
#successAnimation.animated #successAnimationCircle {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    animation-delay: 0s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: drawCircle;
}
#successAnimation.animated #successAnimationCheck {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1), linear;
    animation-delay: 0s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-name: drawCheck;
}

#successAnimation.animated #successAnimationResult {
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-play-state: running;
    animation-na