i want to join these two vertical lines with my custom cursor starting and ending which is a line(horizontal)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      overflow: hidden;
      perspective: 500px;
      perspective-origin: top;
      transform-style: preserve-3d;
      width: 100%;
      height: 100vh;
      background: black;
      position: relative;
    }
    
    .cursor {
      position: absolute;
      width: 8rem;
      height: 3px;
      border-radius: 10px;
      background: white;
      z-index: 11;
      left: -50px;
      top: 30px;
      transform-style: preserve-3d;
      transform: translateZ(100px) rotateX(-0deg);
    }
    
    .follow_cursor {
      position: absolute;
      background: white;
      width: 2px;
      height: 5rem;
      z-index: 2;
      top: 100%;
      left: 0%;
      right: 0;
      transform-origin: top;
      backdrop-filter: blur(20px);
    }
    
    .follow_cursor2 {
      position: absolute;
      background: white;
      width: 2px;
      height: 2rem;
      z-index: 3;
      top: 100%;
      left: 100%;
      right: 0px;
      transform-origin: top;
      backdrop-filter: blur(20px);
    }
  </style>
</head>

<body>
  <!-- this div need to be fixed -->
  <div class="follow_cursor"></div>
  <div class="follow_cursor2"></div>
  <div class="cursor"></div>
</body>
<script>
  let cursor = document.querySelector(".cursor");
  let main = document.querySelector(".main");
  const follow = document.querySelector(".follow_cursor");
  const follow_2 = document.querySelector(".follow_cursor2");

  const origR = follow.getBoundingClientRect();
  const origR_2 = follow_2.getBoundingClientRect();

  document.onmousemove = (e) => {
    let x = e.pageX;
    let y = e.pageY;

    cursor.style.transform = `translate3d(${x}px, ${y}px , 0)`;
    // calculate distance and angle.

    let xf = origR.left + origR.width / 2;
    let x2f = origR_2.left + origR_2.width / 2;

    let yf = origR.top;
    let y2f = origR_2.top;
    // // distance to cursor from follow
    let dist = Math.sqrt((xf - x) * (xf - x) + (yf - y) * (yf - y));
    let dist2 = Math.sqrt((x2f - x) * (x2f - x) + (y2f - y) * (y2f - y));

    // console.log(dist)
    var angle = 0;
    var angle2 = 0;
    // get the rotation angle
    angle = 90 + (Math.atan2(yf - y, xf - x) * 180) / Math.PI;
    angle2 = 90 + (Math.atan2(y2f - y, x2f - x) * 180) / Math.PI;

    follow.style.transform =
      "rotateZ(" + angle + "deg) scaleY(" + dist / origR.height + ")";

    follow_2.style.transform =
      "rotateZ(" + angle2 + "deg) scaleY(" + dist2 / origR_2.height + ")";
  };
</script>

</html>

i am trying to join the vertical lines with my custom cursor but its not working. i need to join these cursor ending with these vertical line endings. the link of this image given below you can run the snippets and check the image to take the refrence what i am trying to do. i will be thankful if you will help me. my communication skill are not good hope you will understand

i want this lines to look like this in the image

Answer

Your code was hard to read, but I think the transform: translateZ() in the initial css had to do with the error.

I’ve made you a working example containing 3 elements: the lines and the custom cursor.

I calculate the window height (win_H) and width (win_W) and the width of the custom cursor (myc_W).

The lines are fixed at the left and right bottom of the window, touching at the left and right corner of the custom pointer. From there it’s simply maths: calculate the triangles (Pythagoras c2=a2+b2) and the angles (note the angles are in radials, not degrees!).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  perspective: 500px;
  perspective-origin: top;
  transform-style: preserve-3d;
  width: 100%;
  height: 100vh;
  background: black;
  position: relative;
}
#my_cursor {
  position: absolute;
  width: 8rem;
  height: 3px;
  border-radius: 10px;
  background: white;
  left: 0px;
  top: 0px;
}
#line_1{
  position: absolute;
  background: white;
  width: 2px;
  height: 100%;
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
  backdrop-filter: blur(20px);
}
#line_2{
  position: absolute;
  background: white;
  width: 2px;
  height: 100%;
  bottom: 0;
  right: 0;
  transform-origin: bottom right;
  backdrop-filter: blur(20px);
}
</style>
</head>

<body>
<div id="line_1"></div>
<div id="line_2"></div>
<div id="my_cursor"></div>
</body>

<script>
let 
my_cursor = document.getElementById("my_cursor"),
line_1 = document.getElementById("line_1"),
line_2 = document.getElementById("line_2"),

win_W=window.innerWidth,
win_H=window.innerHeight,
myc_W=(my_cursor.getBoundingClientRect().width)/2
;

//SET STARTING POSITION in middle of screen
_calculate( (win_W/2), (win_H/2));


document.onmousemove = (e) => {
_calculate( e.pageX, e.pageY);
}

function _calculate(mouseX,mouseY){
//CUSTOM CURSOR position:
let myc_XL = mouseX - myc_W,
      myc_XR = mouseX + myc_W,
      myc_Y = mouseY;
my_cursor.style.transform = `translate3d(${myc_XL}px, ${myc_Y}px , 0)`;

let a,b,c,angle;

//LINE 1
a = myc_XL;
b = win_H - mouseY;
c = Math.sqrt((a*a)+(b*b));
angle = Math.asin(  a /c );
line_1.style.transform = "rotateZ(" + angle + "rad) scaleY(" + (c/win_H) + ")";

//LINE 2
a = win_W - myc_XR;
c = Math.sqrt((a*a)+(b*b));
angle = Math.asin( a / c );
line_2.style.transform = "rotateZ(" + (-angle) + "rad) scaleY(" + (c/win_H) + ")";
};
</script>

</html>