Overlapping irregular elements HTML/CSS

Question

circle which spins and whenever its in the middle I want to highlight arrow, half-circle is done in svg with usage of path element.

function elementsOverlap(el1: Element, el2: Element) {
    if (!el1 || !el2) return;

    const domRect1 = el1.getBoundingClientRect();
    const domRect2 = el2.getBoundingClientRect();

    return !(
        domRect1.top > domRect2.bottom ||
        domRect1.right < domRect2.left ||
        domRect1.bottom < domRect2.top ||
        domRect1.left > domRect2.right
    );
}

I've made a function which doesn't work because I take bounding boxes. I don't know how to make it so it takes the actual shape of a half-circle to check if it's overlapping which could tell me when to highlight the arrow, and my question how to make it so I can detect that the half-circle is in the area which arrow points to while it spins.

How to detect overlapping irregular elements

Shouldnt highlight arrow - [1]: https://i.stack.imgur.com/QvQTJ.png

Should highlight arrow - [1]: https://i.stack.imgur.com/g0NAV.png