<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="line-mask" x="0" y="0" width="100%" height="100%">
      <rect fill="#fff" x="0" y="0" width="100%" height="100%"/>
      <path class="line" d="M 0 0, L 300 150" fill="none" stroke="black" stroke-width="3"/>
    </mask>
  </defs>
  <path d="M 0 0, L 300 150" mask="url(#line-mask)" fill="none" stroke="black" stroke-dasharray="3" stroke-width="1"/>
</svg>

<button>play</button>

const anim = anime({
  targets: "svg .line",
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: "easeInOutSine",
  duration: 1500,
  autoplay: false,
});

document.querySelector('button').addEventListener('click', () => anim.play());