JSFiddle - React, Tailwind, and code Playground

by Palpatim

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.10/bacon.min.js"></script>
<div id="aaatracker"></div>
<div id="pos"></div>
<div id="line"></div>
<div id="container"></div>

CSS

body {
    background: #ccc;
    font-size: 20px;
}
#pos {
    color: #666;
    font-size: .5rem;
    margin-right: 10px;
    width: 100px;
    float: left;
    border: 1px solid blue;
    text-align: center;
}
#container {
    height: 1000px;
    width: 1000px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#tracker {
    width: 10px;
    height: 10px;
    border: 2px solid #393;
    border-radius: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 2px 2px 2px .5px rgba(0, 0, 0, .2);
    background: #fff;
}
#line {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    height: 3px;
    background: #000;
    width: 0;
}

JavaScript

var move = $("body").asEventStream("mousemove");
var click = $("body").asEventStream("click");
var once = Bacon.once(1).log();

var $pos = $('#pos');
var $line = $('#line');
var $tracker = $('#tracker');

var displayPos = function (e) {
    $pos.html(e.x + ", " + e.y);
}

var moveTracker = function (e) {
    $tracker.css({
        left: e.x,
        top: e.y
    });
};

var drawLine = function(e) {
    var x1 = origin.x;
    var y1 = origin.y;
    var x2 = e.x;
    var y2 = e.y;
    var a = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    var l = Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
    var r = 'rotate('+a+'deg)';
    console.log(r);
    $line.css({
        'transform': r,
        'width': l
    });
};


var origin = (function () {
    var offset = $(document).width();
    return {
        x: $(document).width() / 2,
        y: $(document).height() / 2
    };
})();

move.debounce(10)
    .map(function (e) {
    return {
        x: e.offsetX,
        y: e.offsetY
    };
})
    .onValue(function (e) {
    displayPos(e);
    //moveTracker(e);
        drawLine(e);
});
displayPos(origin);