A Pen by moklick.

...-is-watching-you.markdown

... is watching you

interactive doodle suggestion!

A Pen by moklick on CodePen.

License.

index.html

<canvas id="canvas"></canvas>
<div class="google">Google</div>

script.js

window.requestAnimFrame = (function() {
				return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  function(callback) {
	  window.setTimeout(callback, 1000 / 60);
	};
})();

var canvas;
var ctx;
var WIDTH;
var HEIGHT;
var leftEye,rightEye;
var mouse;

Eye = function(pos) {
  this.pos = {
		x : pos.x,
		y : pos.y
	};
	this.center = {
		x : pos.x,
		y : pos.y
	};
	this.translation = {
		x : (window.innerWidth / 2 - canvas.width / 2) + this.center.x,
		y : this.center.y
  };
}

Eye.prototype.draw = function() {
  ctx.beginPath();
	ctx.arc(this.pos.x, this.pos.y, 9, 0, Math.PI * 2);
	ctx.fillStyle = '#333';
	ctx.fill();
}

Eye.prototype.update = function() {
	var deltaX = mouse.x - this.translation.x;
	var deltaY = mouse.y - this.translation.y;
	var mag = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
	var angleRad = Math.atan2(deltaY, deltaX);
	var newPosX = this.center.x + 6 * Math.cos(angleRad);
	var newPosY = this.center.y + 11 * Math.sin(angleRad);
	this.pos.x += (newPosX - this.pos.x) / 5;
	this.pos.y += (newPosY - this.pos.y) / 5;
}
			
var init = function() {
  canvas = document.getElementById('canvas');
	ctx = canvas.getContext('2d');
	canvas.width = WIDTH = 300;
	canvas.height = HEIGHT = 125;
	leftEye = new Eye({
	  x : WIDTH / 2 - 42,
		y : HEIGHT / 2 + 18
	});
	rightEye = new Eye({
		x : WIDTH / 2 + 8,
		y : HEIGHT / 2 + 18
	});
	mouse = {
		x : 0,
		y : 0
	};
	bindEventHandlers();
	draw();
}
    
var draw = function() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
	leftEye.update();
	rightEye.update();
	leftEye.draw();
	rightEye.draw();
  requestAnimFrame(draw);
}
    
var bindEventHandlers = function() {
  document.onmousemove = function(e) {
	  mouse.x = e.pageX;
		mouse.y = e.pageY;
	}
}

init();

style.css

@import url(http://fonts.googleapis.com/css?family=EB+Garamond);
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'EB Garamond', serif;
	color:#333;
}
#canvas {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -150px;
}
.google {
	font-size: 100px;
	width: 300px;
	text-align: center;
	margin: 0 auto;
}