// 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 = 56; const iend = 116; 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); }; };