How to animate svg elements one by one?

Question

css

Good afternoon! Please tell me how best to animate the appearance of svg elements and place them evenly in percentage terms?
You need to somehow show them one after another.
such code

Answer 1

https://codepen.io/topicstarter/pen/WmMwMp - an option?

Answer 2

Another option
remove viewBox, replace rect with line and set coordinates as a percentage

Answer 3

Option number 1
https://developer.mozilla.org/ru/docs/Web/CSS/anim...
option number 2
https://developer.mozilla.org/en-US/docs/Web/API/W. ..
https://css-tricks.com/animating-svg-css/