JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<img id="image" src="https://drive.google.com/uc?id=0B0J47LPwXvGgaUd2Q18wcjJxNDg" id='cursor'/>

CSS

#image {
    position:absolute;
    z-index:5000;
}

JavaScript

var snapX = $('img').width();
var hexSide = Math.round((snapX / 2) / (Math.cos(Math.PI / 6)));
var top = (Math.tan(Math.PI / 6) * (snapX / 2));
var snapY = Math.round(top) + hexSide;
var CURSOR_WIDTH = $('img').width();
console.log(snapX+' '+hexSide+' '+snapY);
$(document).mousemove(function (e) {
    //console.log(e.pageX + " " + e.pageY);

    var mouseXEven = e.pageX;
    var mouseXOdd = e.pageX - Math.round(CURSOR_WIDTH / 2);
    var mouseY = e.pageY;

    var snapXPosEven = Math.floor(mouseXEven / snapX);
    var snapXPosOdd = Math.floor(mouseXOdd / snapX);
    var snapYPos = Math.floor(mouseY / snapY);

    var moveYTo=(snapYPos * snapY);

    if (snapYPos % 2 == 0) {
        //cursor.Location = new Point(snapXPosEven * snapX, (snapYPos * snapY));
        $("#image").css({
            left: snapXPosEven * snapX,
            top: moveYTo
        });
    } else {
        //cursor.Location = new Point((snapXPosOdd * snapX) + snapX / 2, (snapYPos * snapY));
        $("#image").css({
            left: (snapXPosOdd * snapX) + snapX / 2,
            top: moveYTo
        });
    }

    /*$("#image").css({
        left: e.pageX / 239,
        top: e.pageY
    });*/
});