Как решить проблему с торможением анимации?

Question

[Eugene Chefranov]

Подскажите как сделать анимацию в фигурках плавнее https://jsfiddle.net/Chefranov/5p6xt6zd/
Или может быть есть другой вариант создать такую фигуру с анимацией.
Анимация нужна по аналогии как здесь

Можно также решения и с помощью JS

Заранее благодарен!

Answer 1

[Максим Гатилин]

Сделайте как на сайте, который вы указали, вам не нужен svg для этих целей

Comments

[Eugene Chefranov]

Если не трудно, то расскажите как сделано на том сайте. Я никогда не работал с фигурами и их анимацией.

[Максим Гатилин]

Вам нужно 3 div'a , скривленные с помощью transfrom:skew(), а внутри картинки на которые наложена анимация.Если вы не верстаете - будет проблематично

Answer 2

[SerzN1]

мб для начала вынуть из fill и svg
получается слишком тяжелая связка (точнее не тяжелая а просто неоптимизорованная)

Скорее стоит попробовать канвас для таких извращений
stackoverflow.com/questions/18379818/canvas-image-...
blog.teamtreehouse.com/create-vector-masks-using-t...
и использовать animationFrame