darmentrout/mouse.html

## mouse.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mouse</title>
    <style>
        * { box-sizing: border-box; }
        html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; }
        body {
            background: #222;
            overflow: hidden;
        }
        .circle {
            width: 50px;
            height: 50px;
            border-radius: 100%;
            position: absolute;
            top: calc(50% - 25px);
            left: calc(50% - 25px);
        }
        #circleWhite {
            background: #ddd;
        }
        #circleRed {
            background: firebrick;
        }
        #circleBlue {
            background: cornflowerblue;
            /* no animation here because
               the mouse moves faster than
               anything we could put here
            */
        }
    </style>
</head>
<body>


<div id="circleWhite" class="circle"></div>
<div id="circleRed" class="circle"></div>
<div id="circleBlue" class="circle"></div>

<script>
    /*
        Click to reposition the white dot.
        The red dot follows the mouse.
        The blue dot goes in the opposite direction that the mouse is going.
    */

    var body = document.getElementsByTagName('body')[0];

    var circleWhite = document.getElementById('circleWhite');
    function clickCircle(e){
            circleWhite.setAttribute( 'style', 'left:' + (e.clientX - 25) + 'px; top:' + (e.clientY - 25) + 'px;' );
    }
    body.addEventListener( 'click', clickCircle );

    var circleRed = document.getElementById('circleRed');
    function moveRedCircle(e){
            circleRed.setAttribute( 'style', 'left:' + (e.clientX - 25) + 'px; top:' + (e.clientY - 25) + 'px;' );
    }
    body.addEventListener( 'mousemove', moveRedCircle );

    // origin coordinates
    var x = body.clientHeight / 2;
    var y = body.clientWidth  / 2;
    var circleBlue = document.getElementById('circleBlue');
    function moveBlueCircle(e){
        // destination coordinates
        var xCoord, yCoord;

        if( e.clientX > x ){
            xCoord = e.clientX - 100;
        }
        else if( e.clientX < x ){
            xCoord = e.clientX + 50;
        }
        else {
            xCoord = e.clientX - 25;
        }

        if( e.clientY > y ){
            yCoord = e.clientY - 100;
        }
        else if( e.clientY < y ){
            yCoord = e.clientY + 50;
        }
        else {
            yCoord = e.clientY - 25;
        }

        circleBlue.setAttribute( 'style', 'left:' + xCoord + 'px; top:' + yCoord + 'px;' );

        x = e.clientX;
        y = e.clientY;
    }
    body.addEventListener( 'mousemove', moveBlueCircle );

</script>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>mouse</title>
	<style>
	* { box-sizing: border-box; }
	html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; }
	body {
	background: #222;
	overflow: hidden;
	}
	.circle {
	width: 50px;
	height: 50px;
	border-radius: 100%;
	position: absolute;
	top: calc(50% - 25px);
	left: calc(50% - 25px);
	}
	#circleWhite {
	background: #ddd;
	}
	#circleRed {
	background: firebrick;
	}
	#circleBlue {
	background: cornflowerblue;
	/* no animation here because
	the mouse moves faster than
	anything we could put here
	*/
	}
	</style>
	</head>
	<body>


	<div id="circleWhite" class="circle"></div>
	<div id="circleRed" class="circle"></div>
	<div id="circleBlue" class="circle"></div>

	<script>
	/*
	Click to reposition the white dot.
	The red dot follows the mouse.
	The blue dot goes in the opposite direction that the mouse is going.
	*/

	var body = document.getElementsByTagName('body')[0];

	var circleWhite = document.getElementById('circleWhite');
	function clickCircle(e){
	circleWhite.setAttribute( 'style', 'left:' + (e.clientX - 25) + 'px; top:' + (e.clientY - 25) + 'px;' );
	}
	body.addEventListener( 'click', clickCircle );

	var circleRed = document.getElementById('circleRed');
	function moveRedCircle(e){
	circleRed.setAttribute( 'style', 'left:' + (e.clientX - 25) + 'px; top:' + (e.clientY - 25) + 'px;' );
	}
	body.addEventListener( 'mousemove', moveRedCircle );

	// origin coordinates
	var x = body.clientHeight / 2;
	var y = body.clientWidth / 2;
	var circleBlue = document.getElementById('circleBlue');
	function moveBlueCircle(e){
	// destination coordinates
	var xCoord, yCoord;

	if( e.clientX > x ){
	xCoord = e.clientX - 100;
	}
	else if( e.clientX < x ){
	xCoord = e.clientX + 50;
	}
	else {
	xCoord = e.clientX - 25;
	}

	if( e.clientY > y ){
	yCoord = e.clientY - 100;
	}
	else if( e.clientY < y ){
	yCoord = e.clientY + 50;
	}
	else {
	yCoord = e.clientY - 25;
	}

	circleBlue.setAttribute( 'style', 'left:' + xCoord + 'px; top:' + yCoord + 'px;' );

	x = e.clientX;
	y = e.clientY;
	}
	body.addEventListener( 'mousemove', moveBlueCircle );

	</script>

	</body>
	</html>