alucho/static/js/eye.js

window.onload = function () {
    const body = document.getElementById('body');
    const lang = document.getElementById('lang-chooser');
    const eye = document.getElementById('logo');
    const logo = document.getElementById('alucho-logo');
    const iris = document.getElementById('iris');
    const pupil = document.getElementById('pupil');

    // #iris cx attribute animation settings (relative to #alucho-logo i.e. absolute inside the svg)
    const istart = 66;
    const iend = 126;
    const ilength = iend - istart;

    // #pupil cx attribute animation settings (relative to #iris cx)
    const pstart = -17;
    const pend = 17;
    const plength = pend - pstart;
    const oY = logo.getAttribute('height') / 2.;

    window.onmousemove = function (ev) {
        const eyeOffset = body.getBoundingClientRect().x + lang.clientWidth + eye.clientWidth / 2;
        const r = (ev.clientX - eyeOffset) / (window.innerWidth - eyeOffset) / 2 + .5;
        const ry = ev.clientY / window.innerHeight;

        const iX = istart + ilength * r;
        iris.setAttribute('cx', iX);

        const pX = iX + pstart + plength * r;
        const pY = oY + 20 * r * (1 - r) * ry;
        // p(r) = y0 + a * r * (1 - r) is a parabola
        // p(0) = p(1) = y0
        // p(.5) = y0 + a / 4
        pupil.setAttribute('cx', pX);
        pupil.setAttribute('cy', pY);
    };
};