Как анимировать такой блок?

Question

[Артур Левенсон]

Подскажите, пожалуйста, как анимировать блок с svg графикой. Нужно, чтобы по линиям был образован луч, который двигался бы к квадрату и как бы его зажигал, оставляя квадрат "активным". Подскажите пожалуйста как это сделать

https://codepen.io/kiskiskit/pen/zYzrjOB

Comments

[Вадим]

Можно сделать на css анимациях внутри свг.
Только луч и его "направляющие" должны быть 2мя разными path.
Луч анимировать с помощью stroke-dasharray и stroke-dashoffset.
Ну и задать им разную задержку. Таким образом, первый луч рисуется, скажем, 1.5 секунды.
Первый куб загорается через 1.5секунды за 0.3секунды
Второй луч начинает рисоваться через 1.5 + 0.3 = 1.8 секунды и так далее.

Вот статьи где есть про анимацию этих свойств
css.yoksel.ru/svg-fill-and-stroke - в основном теория
https://svg-art.ru/?p=1253 - один из вариантов реализации. Можно без js.

[Вадим]

Вот в соседнем вопрос есть про "лучи"
Какими можно реализовать анимацию микросхемы?