Сложно анимируемый элемент в HTML-баннере — как реализовать?

Question

[Денис Букреев]

Доброго дня.
Довольно простенькая задача - анимировать на фоне устройств круги и линии, какое-то взаимодействие - все просто.
Все просто, кроме одного.

Вот эти извилистые линии должны не просто тупо изменять позицию, они должны ползти как змеи.
Но Edge Animate не дает возможности рисовать вектора и уж тем более давать им подобную анимацию.

Как выйти из такого положения и решить задачу?

Answer 1

[Shaidulint]

Идеальный вариант - сделать гифку.
Другой вариант, посложнее - сделать SVG.

Answer 2

[Dyatchin Dmitry]

может быть сделать в Adobe Animate CC https://www.adobe.com/ru/products/animate.html

Comments

[Денис Букреев]

там какая-то задница, не похожая на edge
а разбираться нет времени совсем

Answer 3

[_ _]

Можно вырезать полупериод этой змеи в png и анимировать background-position, а второй анимацией анимировать закругленный кончик.

Comments

[Денис Букреев]

что-то я не смог представить себе это)

Answer 4

[rinatoptimus]

Вдруг поможет: cssdeck.com/labs/snake

Comments

[Денис Букреев]

да, я думал сделать сотню точек, чтоб соединить их в четкую линию, но вряд ли такое получится