Ivan Bogachev

if (typeof importScripts === 'function') {
    importScripts('......js');
    // и все остальное тут
}

цифры мешают нажимать на места, а z-index изменить не получается

- 'Error: <%= error.message $>'
+ 'Error: <%= error.message %>'

1. Safari не очень дружит с морфингом SVG из CSS. Это относится не только к clip-path, но и к любому изменению контуров в самих SVG. Поэтому вариант делать это на CSS - такой себе вариант.
   
2. Для того, чтобы морфинг работал, нам нужно, чтобы контуры в SVG имели одинаковую структуру. Это первое правило морфинга. Почему это так, и в чем смысл морфинга в целом - можно почитать тут. Если вы делаете капли в blobmaker.app, то вам нужно иметь кляксы, сделанные с одним положением левого ползунка, который меняет количество точек. Правый двигать можно, рандомизировать можно, но количество точек должно быть постоянным.
   

Плагин Dimensions замеряет расстояния через canvas. Реализация выглядит достаточно сложно...

не влезая в плагин, уже на загруженной странице

const table = document.querySelector('table');
const html = table.innerHTML;
const modifiedHtml = html.replace(/>\s+<i/g, '>&nbsp;<i');

table.innerHTML = modifiedHtml;

курсор смещается внутри квадрата(нужно чтобы он оставался в центре)

// Там, где в двух местах есть работа с --x и --y
target.style.setProperty('--x', Math.floor(((e.clientX - rect.left) / rect.width * 100) * 100) / 100+'%');
target.style.setProperty('--y', Math.floor(((e.clientY - rect.top) / rect.height * 100) * 100) / 100+'%');
// нужна еще пара значений
target.style.setProperty('--new-x', e.clientX - rect.left + 'px');
target.style.setProperty('--new-y', e.clientY - rect.top + 'px');

.image-zoom-block {
    /*
        left: var(--x);
        top: var(--y);
        transform: translateX(calc(var(--x) * -1)) translateY(calc(var(--y) * -1));
    */
    
    left: var(--new-x);
    top: var(--new-y);
    transform: translateX(-50%) translateY(-50%);
}

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

Можно ли как то совместить эти события, чтобы и слайды листать, и кнопки в плеере нажимать?

<div class='swiper' id='my-slider'>
    <div class='swiper-wrapper'>
        <div class='swiper-slide'>Slide 1</div>
        <div class='swiper-slide' id='youtube-slide'>
            <div id='player'></div>
        </div>
        <div class='swiper-slide'>Slide 3</div>
        <div class='swiper-slide'>Slide 4</div>
    </div>
</div>
<style>
#player {
    pointer-events: none;
}
</style>

const youtubeScriptTag = document.createElement('script');
youtubeScriptTag.src = 'https://www.youtube.com/iframe_api';
document.body.appendChild(youtubeScriptTag);

window.onYouTubeIframeAPIReady = () => {
    const player = new YT.Player('player', {
        videoId: 'orbr-C3gYKk',
        playerVars: {
            controls: 0
        },
        events: {
            onReady: (event) => {
                const youtubeSlide = document.getElementById('youtube-slide');
                let isVideoPlaying = false;

                youtubeSlide.addEventListener('click', () => {
                    if (isVideoPlaying) {
                        event.target.stopVideo();
                    } else {
                        event.target.playVideo();
                    }

                    isVideoPlaying = !isVideoPlaying;
                });
            }
        }
    });
}

const swiper = new Swiper('#my-slider', {});

// Тут, конечно, лучше какие-нибудь id сделать для однозначности
const circle = document.querySelector('.circle');
const arrow = document.querySelector('.arrow');

document.addEventListener('mousemove', (e) => {    
    const circleRect = circle.getBoundingClientRect();
    const circleCenterX = circleRect.left + circle.offsetWidth / 2;
    const circleCenterY = circleRect.top + circle.offsetHeight / 2;
    const deltaX = e.clientX - circleCenterX;
    const deltaY = e.clientY - circleCenterY;
    const angleInRadians = Math.atan2(deltaY, deltaX) - Math.PI / 2;
    const angleInDegrees = 180 * angleInRadians / Math.PI;
    const angleFrom0To360 = (angleInDegrees + 360) % 360;
    const shouldEffectBeApplied = deltaY < 0;
    
    if (shouldEffectBeApplied) {
        arrow.style.transform = `rotate(${angleFrom0To360}deg)`;
    }
});

.arrow {
    transition: transform .1s linear;
}