alucho/static/js/eye.js

// nilox (c)

window.onload = function () {
    var eye = document.getElementById('logo');

    var eyeDoc = eye.contentDocument;
    const logo = eyeDoc.getElementById('alucho-logo');
    const iris = eyeDoc.getElementById('iris');
    const pupil = eyeDoc.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 r = ev.clientX / window.innerWidth;

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

        const pX = iX + pstart + plength * r;
        const pY = oY + 16 * r * (1 - r);
        // 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);
    };
};