Как анимировать точки SVG полигона?

Я создал линейную диаграмму с SVG (точками полигона), которые я хотел бы анимировать.
Мне нужно, чтобы все точки начали анимацию вверх от оси X, и когда анимация закончится, результат выглядел бы следующим образом, как на рисунке ниже.
Кажется, что нет простого способа найти это решения с помощью поиска в Google, который я сделал. Любые советы будут наиболее ценными, спасибо.

Перевод вопроса: How to animate SVG polygon points? @Keith Donegan

Ответ

Также не стоит забывать, что свойство clip-path можно анимировать.
UPD: + SVG-fallback для фаерфокса, однако в этом браузере анимации не будет.
.graph { background-image: linear-gradient(to right, #000 20%, #666 20%, #666 40%, #bbb 40%, #bbb 60%, #ccc 60%, #ccc 80%, #eee 80%); height: 200px; animation: graph 2s forwards; -webkit-clip-path: polygon(0% 100%, 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%, 100% 100%, 80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%); clip-path: url('#clip-start'); clip-path: polygon(0% 100%, 20% 100%, 40% 100%, 60% 100%, 80% 100%, 100% 100%, 100% 100%, 80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%); } @keyframes graph { to { -webkit-clip-path: polygon(0% 90%, 20% 80%, 40% 50%, 60% 30%, 80% 60%, 100% 0%, 100% 100%, 80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%); clip-path: url('#clip-finish'); clip-path: polygon(0% 90%, 20% 80%, 40% 50%, 60% 30%, 80% 60%, 100% 0%, 100% 100%, 80% 100%, 60% 100%, 40% 100%, 20% 100%, 0% 100%); } }