Максим

image.setAttribute("data-image", true)

ctx.lineCap = 'round';
тут всё по теме.

Можно кстати и обычной табличкой.)

Canvas

$('.links').on('mouseover', 'a', function() {
  $(this).closest('.block').find('img').attr('src', $(this).data('src'));
});

или

document.addEventListener('mouseover', ({ target: t }) => {
  const { src } = t.dataset;
  if (src) {
    t.closest('.block').querySelector('img').src = src;
  }
});

или

document.querySelectorAll('[data-src]').forEach(function(n) {
  n.addEventListener('mouseenter', this);
}, ({ target: t }) => t
  .parentNode
  .parentNode
  .nextElementSibling
  .setAttribute('src', t.getAttribute('data-src'))
);

Уберите уникальные id, добавьте общие классы.
Если id нужен, положите его в data-атрибут корневого элемента комментария.
Уберите атрибут style, его содержимое разместите в стилях класса соответствующего элемента.
Вместо переключения двух классов у разных элементов переключайте один - у корневого элемента комментария.

<div class="comment" data-id="187">
  <a class="comment-edit">Редактировать</a>
  <span class="comment-panel"></span>
</div>

.comment .comment-panel {
  display: none;
}

.comment.editing .comment-panel {
  display: inline;
}

.comment.editing .comment-edit {
  color: red;
}

const containerSelector = '.comment';
const buttonSelector = '.comment-edit';
const activeClass = 'editing';


// вот вам ваш jquery
$(containerSelector).on('click', buttonSelector, e => {
  const id = $(e.delegateTarget).toggleClass(activeClass).data('id');
  console.log(id);
});

// или, к чёрту jquery
document
  .querySelectorAll(`${containerSelector} ${buttonSelector}`)
  .forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const container = this.closest(containerSelector);
  container.classList.toggle(activeClass);
  const { id } = container.dataset;
  console.log(id);
}

Через strokeDashoffset не получится сделать анимацию рисования пунктирной линии. Можно для линии сделать маску и ее уже анимировать.

<div class="icon"></div>

.icon {
  font-size: 60px;
  display: inline-block;
  border: 0.1em solid black;
  border-radius: 0.5em;
  width: 1em;
  height: 2em;
  position: relative;
}

.icon::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background: black;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  box-shadow: 0 -0.4em black, 0 0.4em black;
}

.icon::after {
  content: "";
  display: inline-block;
  border: 0.15em solid black;
  border-left: 0;
  border-top: 0;
  width: 0.4em;
  height: 0.4em;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

https://jsfiddle.net/udygv7xr/

GIF не может содержать аудио. Разве что изобрести свой собственный формат, который будет содержать и то, и другое, но тогда нужно будет изобрести свой собственный софт, который будет этот формат воспроизводить и кодировать. Но зачем, чем не угодил исходный видеофайл?

https://isotope.metafizzy.co/

О каких элементах и атрибутах идёт речь:

const selector = '.list-item';
const key1 = 'pagereview';
const key2 = 'pageslug';
const attr1 = `data-${key1}`;
const attr2 = `data-${key2}`;

Получаем элементы:

const $elements = $(selector);

// или

const elements = document.querySelectorAll(selector);

Переключаем их видимость:

$elements.show().filter((i, n) => $(n).data(key1) !== $(n).data(key2)).hide();

// или

$elements.each(function() {
  const $this = $(this);
  $this.toggle($this.attr(attr1) === $this.attr(attr2));
});

// или

elements.forEach(n => {
  n.hidden = n.getAttribute(attr1) !== n.getAttribute(attr2);
});

// или

for (const { style, dataset } of elements) {
  style.display = dataset[key1] === dataset[key2] ? 'block' : 'none';
}

// или (в стили надо будет добавить .hidden { display: none; })

for (let i = 0; i < elements.length; i++) {
  const { classList: c, attributes: a } = elements[i];
  c.toggle('hidden', a[attr1].value !== a[attr2].value);
}