Emoji SVG avec yeux mobiles et suivi de la souris

1,409 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Emoji SVG avec yeux mobiles et suivi de la souris

Recommandé

27 February 2026

Jeux débloqués : GN-Math, jouez gratuitement en ligne

23 April 2025

Un code de Metehan

13 June 2025

Effet de survol des cartes

HTML

<p><a target="">Move Your Cursor</a></p>

CSS

const eyesSVG = document.querySelector('#eyes');
const eyes = [
  {
    eye: eyesSVG.querySelector('#eye-left'),
    pupil: eyesSVG.querySelector('#pupil-left'),
    offsetX: 0
  },
  {
    eye: eyesSVG.querySelector('#eye-right'),
    pupil: eyesSVG.querySelector('#pupil-right'),
    offsetX: 0
  }
];

const updateEye = (ev, {eye, pupil, offsetX}) => {
  const eyeRect = eye.getBoundingClientRect();
  const centerX = eyeRect.left + eyeRect.width / 2;
  const centerY = eyeRect.top + eyeRect.height / 2;

const distX = ev.clientX - centerX;
  const distY = ev.clientY - centerY;

const pupilRect = pupil.getBoundingClientRect();
  const maxDistX = pupilRect.width / 2;
  const maxDistY = pupilRect.height / 2;

const angle = Math.atan2(distY, distX);

const newPupilX = offsetX + Math.min(maxDistX, Math.max(-maxDistX, Math.cos(angle) * maxDistX));
  const newPupilY = Math.min(maxDistY, Math.max(-maxDistY, Math.sin(angle) * maxDistY));
  
  const svgCTM = eyesSVG.getScreenCTM();
  const scaledPupilX = newPupilX / svgCTM.a; 
  const scaledPupilY = newPupilY / svgCTM.d;

pupil.setAttribute('transform', `translate(${scaledPupilX}, ${scaledPupilY})`);
}

// Pupil position starts off-centre on the X axis
const calcOffset = () => {
  for (const props of eyes) {
    props.pupil.removeAttribute('transform');
    const eyeRect = props.eye.getBoundingClientRect();
    const pupilRect = props.pupil.getBoundingClientRect();
    props.offsetX = ((eyeRect.right - pupilRect.right) - (pupilRect.left - eyeRect.left)) / 2;
  }
}
calcOffset();

globalThis.addEventListener('resize', () => {
  calcOffset();
});