RAX7

function rgbaToAndroid1(rgba) {
  const c = new Uint8Array([
    rgba[2],
    rgba[1],
    rgba[0],
    Math.round(rgba[3] * 255)
  ]);
  return new Uint32Array(c.buffer)[0];
}

// либо
function rgbaToAndroid2(rgba) {
  let color = 0;
  for (let i = 0; i < 3; i++) {
    color += rgba[i] * 2 ** ((2 - i) * 8);
  }

  color += Math.round(rgba[3] * 255) * 2 ** (3 * 8);
  return color;
}

console.log(rgbaToAndroid1([255, 122, 107, 1]));
console.log(rgbaToAndroid2([255, 122, 107, 1]));

function createTable(el) {
	for (let i = 0, row; i < el.length; i++) {
    if (i % 7 === 0) {
      row = document.createElement('tr');
      thead.appendChild(row);
    }
		const cell = document.createElement('th');
		cell.innerHTML = el[i];
		row.appendChild(cell);
	}
}

и вдогонку https://stackoverflow.com/questions/222309/calcula...

Через Animations API можно посмотреть на свойство playState в какой-то конкретный момент времени, но какого-то события для этого нет.
Можно состряпать собственный костыль на основе Animations API и requestAnimationFrame.

Но проще и лучше будет запускать анимацию не по css hover, а из js - этот способ избавит от ненужных костылей.

У объекта события есть свойство timeStamp, зная значения предыдущего и текущего timeStamp можно посчитать частоту срабатывания события.

function checkingReading() {
  let prevTimeStamp = performance.now();
  chatbox.addEventListener("DOMSubtreeModified", (e) => {
    const dt = e.timeStamp - prevTimeStamp;
    prevTimeStamp = e.timeStamp;
    
    const changesPerSecond = 1000 / dt;
    console.log(changesPerSecond)
  });
}

P.S. возможно тебе нужен debounce чтобы не слишком часто слать запросы

main.css

/* Media Queries */

  /* Mobile Devices - Phones/Tablets */

@media only screen and (max-width: 991px) { 
  
  
  /* MOBILE NAVIGATION */
     
  .navbar ul.nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    justify-content: start;
    top: 15vh;
+   left: 0;
    background-color: #999;
    width: 100%;
    height: 100vh;
    transform: translate(100%);
    -webkit-transform: translate(100%);
    text-align: center;
    overflow: hidden;
    padding: 15px 30px;
  }

В документации тайпскрипта есть пример, как типизировать функцию, которая принимает конструктор класса в качестве аргумента:
https://www.typescriptlang.org/docs/handbook/2/cla...

Убирай всю анимацию и фильтры из svg и переноси в css.
Примерно так:

Как вариант: https://codesandbox.io/s/sleepy-feistel-jhic7l

Альтернативное решение для подобных случаев - включить overflow: visible для svg https://jsfiddle.net/hbtg1dqs/

<script setup>
import { directive as vClickAway } from "vue3-click-away";

const onClickInside = (event) => {
  console.log('onClickInside: ', event);
};
</script>

песочница с кодом

g path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

Первый вариант svg mask.
плюсы: не требует js
минусы: нельзя применить backdrop-filter


Второй вариант svg clip-path.
плюсы: можно применить backdrop-filter
минусы: требует js и желательно ResizeObserver

<div class="title"> заголовок заголовок заголовок </div>
<div class="description"> текст текст текст текст </div>
<button class="action"> кнопка </button>

body {
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: center;
}

.title {
  grid-column: 1 / -1;
}

svg path {
  pointer-events: all;
}

Такие штуки проще на svg делать

Раздели змейку на отдельные сегменты и экспонируй их в svg. У svg есть аттрибут vector-effect, который в сочетании с preserveAspectRatio="none" позволит сделать сегменты кривой более адаптивными. Кривая будет всячески деформироваться, а толщина обводки и пунктирные точки будут фиксированного размера без искажений. Остается только посчитать размеры svg, но это сделать не сложно. Ну и на меньших разрешениях добавить медиа-запросы и пересчитать количество колонок, размеры, позицию svg.