I have two html elements (in my case they are SVG path elements). Each of these has a different stroke width. Is there any way to determine if two of these paths overlap? I have tried using the npm path intersection library, but it doesn't allow me to specify a width. Also, the results are approximate, but I need more exact data.

I don't need to calculate the actual intersection area, or coordinates. I just need to know if an intersection occurs between these two paths with definite widths. Is there a solution?

edit: here is an example to demonstrate something i want

<svg xmls="http://www.w3.org/2000/svg">
  <path id="p1" d="M10,10 C20,30, 50,70, 100,100" stroke-width="3" stroke='black'></path>
  <path id="p2" d="M20,0 Q200,30,0,100" stroke-width="5" stroke="red"></path>
</svg>

path {
  fill: none;
}
svg {
  position: absolute;
  top: 100px;
  left: 100px;
}

in javascript, i have something like this:

let p1 = document.getElementById("p1"), p2 = document.getElementById("p2");

if (p1 intersects/overlaps with p2) {
  //run some code
}

example 1

it produces the above, which i classify as an intersection, as the paths themselves overlap

example 2 here, i produced the same lines, but one is shifted. I do not classify this as an overlap