Как реализовать следующую анимацию?

траектория как задаётся?

Можно/нужно улучшить это код?

godsplane, че-т усложнили, вроде бы. Одна кнопка — один попап? Или там возможны многие-ко-многим?

Можно/нужно улучшить это код?

godsplane, код вырван из контекста: не видно всего прочего. И какова задача — максимально упростить для пишущих HTML создание попапов? - поэтому через data-атрибуты связываете кнопку с попапом?.

Можно/нужно улучшить это код?

Внутри этого когда мало, что можно улучшить.

btnPop.forEach((btn) => {
  if (e.target !== btn) return;

  const popup = document.querySelector(`[data-popup='${btn.dataset.trigger}']`);
  if (popup) {
    popup.classList.add('active');
  }
});

Можно/нужно улучшить это код?

godsplane, по ссылке, которую вы не читали, есть ответ. Прочтите внимательно.

Как убрать нули, если они не нужны?

maketosLikes, https://jsfiddle.net/sergiks/wx6L4z83/

Как убрать нули, если они не нужны?

а если 1 день, 00 часов и 3 минуты ?

Как решить проблему с разными часовыми поясами пользователей?

Lynn «Кофеман», не, я погуглил, есть слово "streak", читается именно «стрик»

Как нарисовать плавные струйки дыма?

Спасибо большое за хороший иллюстрированый урок! Думаю, многим будет полезен.

Да, blend хорошая штука. Лет 100 назад я даже записал видео с техникой рисования размытых вспышек — там ещё добавлял маску для большей плавности ухода в прозрачность.

Но в исходной иллюстрации немного другая история, как мне кажется. Без резких краёв, которые видны в вашем решении. Что-то ближе к этому мне уже удалось сделать, плавно двигая кривую и меняя её форму. Там, где она «задерживается» дольше, становится ярче.

картинка

Для лука как на исходной картинке, наверное, надо ещё пост-обработкой увеличить контраст S-кривой.

Как решить проблему с разными часовыми поясами пользователей?

Чтобы отвязаться от часовых поясов, посмотрите на проблему иначе: пусть «серией побед», считаются победы каждые 3 часа. Как в таких условиях вы определяли бы границы: когда уже можно засчитать новое событие, и когда аккаунт опоздал и серия прервалась? Изначально дан только timestamp первого события юзера.

Как решить проблему с разными часовыми поясами пользователей?

что такое «стрик» ?

Как нарисовать плавные струйки дыма?

hint000, никто не читает текст перед картинкой:

Хочется генерировать картинки в похожем стиле:

Как нарисовать плавные струйки дыма?

hint000, задача описать параметрами процесс и генерировать бесконечное множество иллюстраций автомаГически.

Как нарисовать плавные струйки дыма?

hint000, в итоге ваш ответ мало помогает заданной теме.

Как нарисовать плавные струйки дыма?

hint000, тут градиент не то, что нелинейный, он совсем не поддаётся понимаю! ) Скорее это след, оставляемый кривыми в процессе их движения и изменения формы. В общем, хотелось бы опыта людей, делавших подобные иллюстрации.

Как нарисовать плавные струйки дыма?

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

Как нарисовать плавные струйки дыма?

RAX7, у этого же чела есть отличный пен "canvas Ribbons": https://codepen.io/bsehovac/pen/LQVzxJ

Как получать значение из дата атрибута, которое будет подставляться в объект date?

olya095, конечно: добавляйте единицу! )

Оберните в функцию:

function getTimestamp(year, month, day, hour=0, minute=0) {
  return Math.floor(Date.UTC(year, 1 + month, day, hour, minute) / 1000); 
}

Как получать значение из дата атрибута, которое будет подставляться в объект date?

olya095, в бэкенде на PHP можно через strtotime():

$ts = strtotime('2021-12-01T12:00:00Z');
// 1638360000
// полдень 1-го декабря в часовом поясе Лондона.
// В Москве в это время будет 15:00

И записать полученный $ts в разметку.

Или в JavaScript:

const ts = Math.floor(Date.UTC(2021, 11, 1, 12) / 1000); 
// 1638360000
// в JS месяцы нумеруются с нуля, поэтому декабрь 11-й.

Могу ли я ссылке дать два значения href?

если нажать такую ссылку, интернет сломается.

Хотите открыть по клику сразу 2 вкладки — надо писать script.