html - How to animate a line of a rectangle's diagonals?

Question

I am trying add up an animation diagonally. The rectangle height and width I know (dynamically adding up). Now trying to animated a line from N to L, or O to M or other ways. I tried with svg and increasing the line's x1, y1, x2, y2 but this is getting complicated. Any easier or simpler solution?

Answer 1

You can give your lines a stroke-dashoffset and animate it to 0. To calculate the values for stroke-dasharray and stroke-dashoffset I've used the getTotalLength() method to calculate the values for stroke-dasharray and stroke-dashoffset. I hope it helps.

svg{background:#efefef;width:100vh}
rect,line{stroke:black; fill:none}

#om{stroke-dasharray:94.34px;
stroke-dashoffset:94.34px;
animation: om 1s linear forwards;}


@keyframes om {
  to {
    stroke-dashoffset: 0;
  }
}

<svg viewBox = "0 0 100 70">  
  <rect x="10" y="10" width="80" height="50" />
  <line id="om" x1="90" y1="60" x2="10" y2="10" />
</svg>