Как сделать анимацию кардиограммы?

Question

[damir_tok]

Как сделать анимацию кардиограммы? Думал с помощью gif, но не нашел

Кардиограмма:

Comments

[Алексей Гончаров]

А из чего сделана кардиограмма? Из обычной картинки или svg

Answer 1

[Ivan Bogachev]

Вообще рисование линий обычно делается через изменение свойств stroke-dasharray и stroke-dashoffset у кривых в SVG. Это самый простой способ в рамках фронтенда, хотя и изначально эти вещи были для другого придуманы. Но в случае с ЭКГ нужна постоянная скорость рисования по горизонтали. Поэтому можно взять прямоугольную маску в рамках той же SVG, и двигать ее в сторону:

Comments

[damir_tok]

Огромное спасибо!

Можете подсказать как уменьшить его по высоте раза 2-3?

Пробовал редактировать height у rect, но он начал обрезаться

[Ivan Bogachev]

damir_tok, если я правильно понял вопрос, то можно для path добавить что-то в духе:

transform='translate(0 100) scale(1 0.5)'
vector-effect='non-scaling-stroke'
stroke-linejoin='round'

ну или перерисовать его таким, какой он нужен в вашем случае. Прямоугольники там нужны чисто для маски, они на свойства контура не влияют.

[damir_tok]

Ivan Bogachev,

края кардиограммы после transform='translate(0 100) scale(1 0.5)' стали слишком округлыми, это можно исправить?

Если нет, то все равно спасибо!

[Ivan Bogachev]

damir_tok, можно поиграть со свойством stroke-linejoin.

[RAX7]

Ivan Bogachev, зачем тут js, можно же просто добавить repeatCount='indefinite'

[Ivan Bogachev]

RAX7, добавить можно, но автор вопроса ничего не говорил про логику запуска анимации. Должна она быть бесконечной, или должна запускаться по событию один раз, или еще как-то. Поэтому в примере стандартная логика для таких анимаций - запустить один раз, из js, условно по наступившему событию. Перезапускается она чисто для эстетической красоты примера, чтобы кнопку rerun не нажимать.

Answer 2

[imko]

Ну например просто clip-path с полной обрезки до нулевой