Arrows pointing to cursor

by Dwarakesh pallagolla

HTML

<div id="arrow-wrapper">
   <div id="arrow-stem"></div>
  <div id="arrow-head"></div>
</div>
<body>
<!-- <div id="container">
     <div id="arrow-wrapper">
     <div id="arrow-stem"></div>
     <div id="arrow-head"></div>
     </div>
     <div id="circleImg"></div>
 </div> -->

CSS

#arrow-wrapper {
     width: 70px;
          height: 10px;
     margin-top: 40px;
     margin-left: 40px;
 }
 
#arrow-stem {
   background: transparent;
     width: 60px;
     height: 3px;
 border-bottom: 3px solid black;
 }
 
#arrow-head {
 border-top: 5px solid transparent;
 border-left: 10px solid black;
 border-bottom: 5px solid transparent;
 }
 
 #arrow-stem, #arrow-head, #arrow-wrapper, #circleImg {
     float: left;
}

JavaScript

var arrowWrapper = $("#arrow-wrapper");

var arrowPoint = [arrowWrapper.offset().left, arrowWrapper.offset().top]

$(document).mousemove(function(e){    
    
        
	var angle = Math.atan2( (e.pageY- arrowPoint[1]),e.pageX- arrowPoint[0])*(180/Math.PI);	    
  
    arrowWrapper.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});    
    arrowWrapper.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
    arrowWrapper.css({ 'transform': 'rotate(' + angle + 'deg)'});    
});