Line draw svg in Anime.js long delay and line missing

Question

I want to draw a triangle in a triangle with Animejs. The triangle should be drawn very slow. Sadly I get a long delay, before the triangle starts to be drawn and on side of the triangle is missing.

My triangle svg:

<div id="lineDrawing"> <svg viewBox="0 0 280 100">
  <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="8" class="lines">
    <path d="m 29.188247,410.49128 338.094613,0 L 198.23555,47.968205 29.188247,410.49128 Z" stroke-dasharray="300" style="stroke-dashoffset: 316.855px;">

  </g>
</svg> </div>

My js:

    anime({
  targets: '#lineDrawing path',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 80000,
  delay: 0,
  direction: 'alternate',
  loop: true
});

In the end I want to make it look like one of the cornor triangles. Sorry for any bad js,css or html errors. I'am new to webdesign. https://youtu.be/JTNgpQWcDIA?t=1m1s

Answer 1

Your SVG triangle seems way out of the viewBox for the most part. The invisible part is also animated, so it seems like nothing is happening.