Как можно сделать такой живой дым на сайте css и js?

Question

[WebforSelf]

Есть такой блок, хотел бы дым сделать динамичным, возможно такое? искал что то похожее на кодепене, но там в основном с облаками все.

Comments

[Rerurk]

Очень дорогая функция, если рандомно

[xmoonlight]

Rerurk, Согласен, вот думаю, как вариант, циклом гонять массив векторов, которые заранее однократно просчитаны и сохранены в массив.

Answer 1

[Виталий Першин]

Можно спрайтами, у меня дыма готового нет, но есть свеча для примера:

Comments

[Евгений Шалаев]

в чем секрет? почему именно на 32000 пикселей? как вы узнали это число?

[Виталий Першин]

Евгений Шалаев, Это кадры. Каждый кадр 200px в ширину и 200px в длину. Всего у нас 160 кадров steps(160)
160 * 200 = 32000px.

[Виталий Першин]

Евгений Шалаев, Можно делать вот такие штуки и ресурсов не так уж много требует

[Евгений Шалаев]

Виталий, а почему именно 160 кадров?

[Виталий Першин]

Евгений Шалаев, Не понимаю вопроса. Посчитайте кол-во свечей в этом примере. Было склеино 160 картинок в один ряд, быстрая смена этих картинок превращается в видео.

Answer 2

[profesor08]

Можно попробовать сделать такой дымок AfterEffects, наверняка есть куча туториалов. Потом экспортировать с помощью bodymovin в json формат для lottieweb

Еще можешь попробовать использовать партиклы и заставить двигаться как надо
stemkoski.github.io/Three.js/Particle-Engine.html
squarefeet.github.io/ShaderParticleEngine

Собственно вот похожее: https://mrdoob.com/#/144/magic_dust

Answer 3

[dmitry-toster]

Самое приближенное, что я смог найти
А тут подробная статья, если постараться, то сможете добиться нужного эффекта

Comments

[xmoonlight]

Круто!!!