Googly Eyes

googly.js

let source = null;

window.addEventListener('mousedown', function (e) {
    e.preventDefault();
    source = e;
});

window.addEventListener('mouseup', function (e) {
    const delta = Math.sqrt(Math.pow(source.pageX - e.pageX, 2) + Math.pow(source.pageY - e.pageY, 2));
    const $eyes = document.createElement('img');

    $eyes.width = delta;
    $eyes.height = delta / 2;
    $eyes.src = `data:image/svg+xml,<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" fill="white" /><circle cx="150" cy="50" r="45" fill="white" /><circle cx="${Math.random() * 20 + 30}" cy="${Math.random() * 10 + 50}"  r="25" fill="black" /><circle cx="${Math.random() * 20 + 130}" cy="${Math.random() * 10 + 50}" r="25" fill="black" /></svg>`;
    $eyes.style.position = 'absolute';
    $eyes.style.left = `${source.pageX - $eyes.width / 2}px`;
    $eyes.style.top = `${source.pageY - $eyes.height / 2}px`;

    document.body.appendChild($eyes);
});

Add this as a “bookmarklet” in your browser, then click-and-drag (nothing will happen at first) from the bridge of a subject’s “nose” to a distance roughly equivalent to the space between “pupils.” Googly eyes! ✨