Анимация SVG: сначала строк, затем заполнение цветом

Необходимо добиться следующего эффекта: http://gph.is/2iZZ3Hw - рисования контуров и затем заполнение цветом. Для определения общей длины путей может понадобиться JS.
Ниже код

Источник : Animate SVG with CSS: first the stroke, then the fill

Ответ

Из примера видно, что нужно анимировать строки трёх объектов логотипа: круга, трапеции и треугольника, затем заполнить цветом трапецию и треугольник.
Для анимации строк определяем их длину с помощью JS

Найденная длина для:
окружности - 138px
трапеции - 60px
треугольника - 35px
Команды для анимации рисования строк



Анимация рисования треугольника начнется, когда закончится анимация рисования трапеции
begin="an_trap.end"
Анимация закрашивания трапеции начнется, когда закончится анимация рисования окружности
Анимация заполнение цветом треугольника начнется, когда закончится анимация заполнения цветом трапеции

UPD Поддержка всеми современными браузерами кроме IE, Edge https://caniuse.com/#search=svg%20smil