Как сделать анимацию?

Question

[Александр]

Есть задача: сверстать эту линию (синюю), чтобы она имела анимацию плавного колебания.
(Это шкала для радио, если что)


Представляю, что это надо делать через canvas, но не представляю как) Математик из меня хреновый.
Прошу помощи.

Answer 1

[Андрей Б.]

Держите https://jsfiddle.net/njrjw18k/ уголки сами сделаете

Comments

[Александр]

Спасибо, почти то, что нужно. Буду дальше развивать тему)

Answer 2

[Justin Bieber]

https://habrahabr.ru/post/240819/

и все в этом духе

Comments

[Александр]

Спасибо, только мне не надо, чтобы эта шкала на что-то реагировала или была эквалайзером. Просто нужна анимация.

Answer 3

[Дмитрий Беляев]

По сути на рисунке функция x = a * sin(b * y)
Ставим начало координат в центр канваса, анимируем меняя коэфицент b в определенных диапазонах (нужно подбирать экспериментально)

Answer 4

[Stalker_RED]

Можно и без canvas и без математики.
Верстаете три вертикальные полоски с градиентами. Это первый слой. Верстаете белые треугольнички - третий слой. А во второй слой кладете свою волнистую линию, и двигаете ее вверх или вниз, по кругу.

Хотя, может я неправильно понял что такое "анимация плавного колебания".