Анимация линии SVG часть 3

4. Анимация линии посредством изменения её прозрачности.

Основная идея этого примера анимации заключается в том, что на фоне будут появляться линии одна за другой за счёт увеличения яркости. То есть уменьшения прозрачности линии – attributeName=”stroke-opacity” from=”0″ to=”1″

30-35 строка – отрисовка кнопки “Start”
40-46 Отрисовка 4-х линий, которые будут появляться
50-58 анимация первой линии
60-65 анимация второй линии
67-72 анимация третьей линии
74-80 анимация четвертой линии
83-90 изменение цвета прямоугольника
Продолжить чтение