Animated Dynamic SVG user account mascot

Oct 15

Written By Lev

The code presented here adds a cloud riding entity to the user account page. It follows the mouse cursor with its eye. It hovers left and right depending on the position of the mouse cursor. The eye is animated twofold - the pupil and the eyeball move independently, creating an illusion of depths and cohesion. The animations are done using CSS and linear interpolation of values to move the SVG elements. No point data animations were used. The SVG elements are only animated statically this time around. If you don’t have a user account, you can create one for free. The entity on its cloud only exists on the user account page which you can access by clicking the blinking, horned icon in the top right.

Do not be discouraged by the massive SVG point data in the HTML block. The vast majority of numbers defines the shape of the entity and the cloud, while the animated elements are mere circles at the end.

HTML:

<div id="accountMascotContainer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 2000" id="accountMascotSVG"><g id="mascotMainFigure"><path id="mascotFigure" d="M836.25,1709.45c-21.31,23.28-45.25,38.72-74.74,42.22-52.68,6.26-100.79-2.36-135.26-47.95-4.3-5.69-8.2-4.61-13.44-2.65-38.99,16.33-95.96,5.66-109.55-39.08-2.62-8.58-6.83-8.96-14.24-8.26-60.58,5.7-112.88-31.13-127.75-89.56-17.45-68.56,29.94-135.9,101.2-143.31,7.78-.81,10.08-3.75,10.66-11.23,3.61-47.24,25.61-70.83,72.03-77.72,6.45-.96,11.49-3.03,14.37-9.44,8.93-19.87,24.03-33.95,43.25-43.42,7.76-3.82,6.33-6.47,2.07-12.29-47.67-67.52,12-128.07,82.18-110.96q30.27,5.75,40.58-23.95c29.77-84.93,52.4-171.96,76.23-258.63,3.8-13.83,10.64-24.62,23.48-31.15,27.1-13.77,54.33-27.3,81.41-41.12,14.32-7.31,28.76-14.65,39.07-27.61,11.15-14.02,9.31-19.28-7.75-23.24-299.63-71.98-279.56-502.27,28.78-539.28,249.92-24.88,394.61,276.72,225.52,458.76-40.16,43.75-90.33,71.4-149.29,81.97-15.23,2.73-16.06,4.65-7.25,17.84,9.88,14.79,25.34,22.17,40.36,29.89,25.87,13.3,52.5,25.07,77.88,39.42,14.59,8.25,22.96,19.85,27.5,35.92,25.91,93.29,48.55,187.59,81.11,278.9,2.9,9.27,7.64,10.58,16.61,7.8,18.24-5.65,36.78-9.94,56.33-6.87,55.06,8.63,78.55,64.33,45.02,108.93-7.86,10.45-5.36,11.99,5.51,14.91,24.06,6.46,42.6,21.48,55.7,42.4,4.76,7.61,8.92,10.49,18.36,9.8,45.65-3.36,83.4,29.77,86.02,75.41.59,10.22,4.91,13.2,13.9,14.69,103.35,16.08,136.31,151.52,51.67,212.76-24.94,19.48-54.3,27.22-85.98,20.48-9.75-2.07-13.71.27-16.87,9.71-6.95,20.82-22.41,33.9-42.98,40.36-26.76,8.41-53.15,6.98-78.53-5.69-5.71-2.85-10.1-5.33-14.97,2.51-44.91,71.87-120.84,54.77-188.46,31.48-14.68-4.42-24.41-15.94-33.33-30.24-9.94,10.36-18.78,19.86-27.98,28.99-3.89,3.86-3.44,8.64-4.36,13.24-3.21,16.05-6.52,32.4-25.83,36.8-15.92,4.19-37.26-14.31-44.75-33.57-2.6-8.87-7.65-8.67-14.84-5.26-39.81,18.88-77.29,11.3-112.09-12.3-11.02-7.47-13.01-4.09-15.36,6.04-6.65,36.32-57.09,70.08-71.76,19.62-3.74-14.73-.07-29.22.58-46.11ZM1397.46,1398.88c-2.82-2.24-3.79-2.63-4.09-3.32-1.4-3.17-2.53-6.45-3.91-9.62-10.44-24.04-24.84-44.62-48.54-57.62-25.8-14.15-34.72-13.62-56.86,6.36-66.97,60.42-118.51,132.37-157.57,213.37-22.28,46.21-22.34,94.75-13.16,144.01,1.74,9.32,5.31,10.95,12.69,4.44,7.26-6.41,13.05-13.9,18.17-22q11.15-17.65,22.8-.15c26.39,38.84,91.27,60.78,138.64,47.11,30.65-8.99,51.93-28.98,63.03-59.14,6.17-16.75,6.48-17.37,18.42-3.84,28.66,32.51,96.41,28.5,109.15-25.16,2.25-9.48,6.37-9.23,13.74-6.39,68.13,25.45,135.81-36.56,122.96-109.21-5.88-37.84-46.51-87.54-103.69-77.06-7.08,1.3-8.78-.12-6.24-7.03,5.23-14.26,2.62-28.43-2.34-42.03-8.28-22.67-36.42-36.16-58.36-29.63-10.51,3.13-13.94,12.5-21.05,22.1-3.59-22.46-8.56-41.59-22.49-57.15-18.23-20.36-40.94-31.76-67.84-34.9-5.13-.6-11.7-.05-13.79,5.12-2.26,5.59,4.6,6.36,7.94,8.22,30.71,17.06,57.45,57.03,52.4,93.52ZM558.48,1383.18c-4.47-6.54-4.04-12.59-3.46-18.56.47-4.83-.46-7.08-6.25-6.71-34.28,2.17-61.41,36.66-54.61,70.77,2.02,10.13,1.76,13.4-10.57,11.98-59.16-6.85-111.53,52.92-98.23,111.11,13.21,57.77,62.5,88.64,123.34,76.6,7.85-1.55,10.99-.66,12.28,7.53,3.82,24.29,20.96,35.1,42.94,39.14,22.27,4.1,43.75,2.51,58.7-17.84,5.49-7.48,8.42-9.04,12.5.92,34.82,85.08,135.57,79.39,178.54,39.78,4.65-4.29,8.95-6.8,14.81-2.6,8.25,5.91,10.5.68,11.53-6.37,5.89-40.38,6.74-80.48-7.35-119.61-31.5-87.49-85.4-160.35-148.36-227.34-7.15-7.61-13.67-6.06-20.41-.52-18.24,14.99-25.89,35.25-28.32,58.04-.44,4.13.86,10.41-4,11.27-4.99.89-5.65-5.56-7.48-9.27-11.21-30.63.68-59.7,21.8-82.11,2.75-2.98,7.61-4.66,4.84-10.52-4.53-9.6-13.53-13.54-23.56-9.39-30.29,12.53-50.24,34.74-61.18,65.46-1.99,5.58-1.98,11.98-7.5,18.24ZM992.91,1723.74c9.03.41,20.67-2.45,32.2-6.88,9.33-3.59,12.01-9.39,11-19.16-2.68-25.78-9.41-50.11-20.67-73.55-13.97-29.09-9.63-45.4,17.26-63.24,13.69-9.08,21.91-20.65,25.25-36.21,12.22-56.99,28.26-112.9,47.71-167.83,3.07-8.67-.12-12.15-8.47-12.86-21.78-1.84-40.32,4.07-54.12,22.01-2.75,3.58-4.11,10.18-9.79,9.1-5.26-1-5.01-7.56-6.86-11.79-12.5-28.61-31.89-48.67-64.73-51.21-35.65-2.76-62.59,11.41-79.3,43.32-4.7,8.97-7.94,12.71-13.36.73-1.12-2.47-4.18-4.49-6.81-5.73-3.81-1.8-8.48-5.23-12.16-2.53-4.43,3.25-.39,8.1.91,11.86,18.28,53.11,31.04,107.66,42.24,162.58,3.23,15.84,10.46,27.68,23.71,37.19,28.93,20.78,32.15,35.65,16.58,67.97-7.36,15.28-14.06,30.65-17.01,47.66-1.73,9.93.98,16.82,7.93,23.12,18.49,16.78,40.07,25.54,68.5,25.46ZM858.63,1015.3c-.94,1.82-2.16,3.54-2.77,5.46-14.63,46.31-31.12,91.96-48.36,137.36-8.47,22.3-14.58,21.54,16.05,28.04,24.38,5.17,24.88,5.28,32.16-18.92,5.6-18.61,16.41-36.29,15.94-55.97-.77-31.99-5.21-63.79-13.02-95.98ZM1128.96,1016.72c-.81.1-1.63.19-2.44.29-1.61,11.56-3.5,23.08-4.76,34.68-3.83,35.11-10.74,69.74,4.42,104.81,15.32,35.45,13.54,35.85,51.2,27.85,8.83-1.88,9.05-4.8,6.28-12.12-19.53-51.38-38.2-103.07-54.7-155.51ZM752.8,1199.75c57.46,11.61,117.02,11.11,174.39,38.2-19.45-16.53-39.13-24.5-59.9-29.07-60.62-13.33-121.8-23.99-182.21-38.48-20.39-4.89-41.6-3.73-60.61,7.9-24.49,14.98-30.64,55.2-10.41,74.75-7.28-21.83-5.79-41.21,10.34-57.64,19.94-20.31,44.69-23.27,76.82-7.84,30.17,14.48,59.24,30.99,86.54,50.53,23.86,17.09,45.64,36.7,68.22,55.42-14.32-18.56-30.15-35.58-47.64-51.09-17.41-15.43-36.74-28.33-55.53-42.69ZM1232.31,1201.84c-40.63,27.59-76.22,60.08-107.96,96.85,33.16-29.5,67.83-56.99,105.79-80.04,37.68-23.09,92.97-64.71,132.28-22.82,15.08,16.37,16.94,35.44,8.58,55.79-.53,1.29-2.19,2.85.33,4.68,13.46-16.81,15.7-35.44,8.4-55.01-7.21-19.34-22.54-29.37-42.47-31.97-14.24-1.86-28.59-1.59-42.68,2.12-17.21,4.54-34.29,9.75-51.71,13.23-41.27,8.25-82.76,15.4-124.07,23.5-19.58,3.84-37.55,11.63-52.53,25.13,52.57-24.47,110.12-22.31,166.03-31.46ZM751.95,1098.31c27.91-68.66,51-138.78,73.39-209.1,5.82-18.29,16.05-30.69,32.47-39.99,22.81-12.91,45.08-26.83,65.61-43.39-31.03,16.3-61.54,33.46-92.03,50.66-7.82,4.41-10.9,11.98-13.24,20.1-21.45,74.03-42.61,148.46-66.19,221.71ZM1221.4,1068.12c.63-.18,1.25-.35,1.88-.53.08-1.19.51-2.48.2-3.56-18.66-64.54-37.44-129.05-56-193.62-2.09-7.27-6.53-12.25-12.67-15.75-31.82-18.19-63.76-36.18-96.83-54.91,2.49,5.67,6.76,7.2,10.19,9.43,24.01,15.56,48.05,31.06,72.27,46.28,8.1,5.09,13.43,11.65,16.43,20.85,21,64.11,42.07,128.2,64.52,191.82Z"/></g><g id="mascotEyes"><circle id="mascotEyeSocket" cx="997.85" cy="478.11" r="243.34"/><circle id="mascotEye" cx="1000" cy="475.37" r="76.16"/><circle id="mascotPupil" cx="1000.03" cy="475.37" r="31.63"/></g></svg>
</div>

JAVASCRIPT:

<script>
document.addEventListener('DOMContentLoaded', function() {  
const accountMascotContainer = document.getElementById('accountMascotContainer'); 
//check if mobile
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
if (isTouch === false) {
//are we on account page
const subString = '/useraccount';
const getURL = window.location.href; 
if (getURL.includes(subString)) {
//attach the mascot
const placeholder = document.getElementById('block-yui_3_17_2_1_1724140813354_62562');     
placeholder.innerHTML = '';
placeholder.appendChild(accountMascotContainer);
// Animated eye and mouse coordinates
let mouseX = 0;
let mouseY = 0;
function lerp(start, end, t) {
return start + (end - start) * t;
}
const eyeSensitivity = 0.08; // Sensitivity for eye movement
const pupilSensitivity = 0.01; // Sensitivity for pupil movement
const svgElement = document.getElementById("accountMascotSVG");
const eyeSocket = document.getElementById('mascotEyeSocket');
const eye = document.getElementById('mascotEye');
const pupil = document.getElementById('mascotPupil');
const eyeSocketCenterX = parseFloat(eyeSocket.getAttribute('cx'));
const eyeSocketCenterY = parseFloat(eyeSocket.getAttribute('cy'));
const eyeSocketRadius = parseFloat(eyeSocket.getAttribute('r'));
const eyeRadius = parseFloat(eye.getAttribute('r'));
const pupilRadius = parseFloat(pupil.getAttribute('r'));
let targetEyeX = eyeSocketCenterX;
let targetEyeY = eyeSocketCenterY;
let targetPupilX = eyeSocketCenterX;
let targetPupilY = eyeSocketCenterY;
let currentEyeX = parseFloat(eye.getAttribute('cx'));
let currentEyeY = parseFloat(eye.getAttribute('cy'));
let currentPupilX = parseFloat(pupil.getAttribute('cx'));
let currentPupilY = parseFloat(pupil.getAttribute('cy'));
// Update the target positions on mouse move
document.addEventListener('mousemove', (e) => {
const point = svgElement.createSVGPoint();
mouseX = e.clientX;
mouseY = e.clientY;
point.x = e.clientX;
point.y = e.clientY;
//convert to SVG space coordinates
const transformedPoint = point.matrixTransform(svgElement.getScreenCTM().inverse());
const angleX = (transformedPoint.x - eyeSocketCenterX) * eyeSensitivity;
const angleY = (transformedPoint.y - eyeSocketCenterY) * eyeSensitivity;
const maxDistance = eyeSocketRadius - eyeRadius; //constrain to head
const distance = Math.min(Math.sqrt(angleX ** 2 + angleY ** 2), maxDistance);
targetEyeX = eyeSocketCenterX + distance * (angleX / Math.sqrt(angleX ** 2 + angleY ** 2));
targetEyeY = eyeSocketCenterY + distance * (angleY / Math.sqrt(angleX ** 2 + angleY ** 2));
const pupilAngleX = (transformedPoint.x - currentEyeX) * pupilSensitivity;
const pupilAngleY = (transformedPoint.y - currentEyeY) * pupilSensitivity;
const maxPupilDistance = eyeRadius - pupilRadius;
const pupilDistance = Math.min(Math.sqrt(pupilAngleX ** 2 + pupilAngleY ** 2), maxPupilDistance);
targetPupilX = targetEyeX + pupilDistance * (pupilAngleX / Math.sqrt(pupilAngleX ** 2 + pupilAngleY ** 2));
targetPupilY = targetEyeY + pupilDistance * (pupilAngleY / Math.sqrt(pupilAngleX ** 2 + pupilAngleY ** 2));
});
function animate() {
const eyeLerpSpeed = 0.1; // interpolation smoothness
currentEyeX = lerp(currentEyeX, targetEyeX, eyeLerpSpeed);
currentEyeY = lerp(currentEyeY, targetEyeY, eyeLerpSpeed);
eye.setAttribute('cx', currentEyeX);
eye.setAttribute('cy', currentEyeY);
currentPupilX = lerp(currentPupilX, targetPupilX, eyeLerpSpeed);
currentPupilY = lerp(currentPupilY, targetPupilY, eyeLerpSpeed);
pupil.setAttribute('cx', currentPupilX);
pupil.setAttribute('cy', currentPupilY);
requestAnimationFrame(animate);
}
animate();
//animated cloud hover
let currentContainerX = 0;
const windowWidth = window.innerWidth; 
const maxPositionX = windowWidth * 0.5; 
const maxPositionY = 100; //max height of cloud movement in pixels
const cloudLerpSpeed = 0.005;
const thresholdX = 50; //distance debounce for smoothness
function animateContainer() {  
const targetX = Math.max(-maxPositionX / 2, Math.min(maxPositionX / 2, mouseX - (windowWidth / 2)));
if (Math.abs(targetX - currentContainerX) > thresholdX) {
currentContainerX = lerp(currentContainerX, targetX, cloudLerpSpeed);
}
accountMascotContainer.style.transform = `translateX(${currentContainerX}px)`;
requestAnimationFrame(animateContainer);
}
animateContainer();
//exit
} else { accountMascotContainer.remove(); }
} else { accountMascotContainer.remove(); }
});
</script>

CSS:

@keyframes cloudBounce {
0% {transform: translateY(-30px)}
50% {transform: translateY(10px)}
100% {transform: translateY(-30px)}
}

#accountMascotContainer {
  align-self: center;
  width: 350px;
  height: 350px;
  transform-origin: center;
  margin: 0;
  padding: 0;
  margin-top: -20px;
  margin-bottom: -250px;
  z-index: 999;
  pointer-events: none;
  position: absolute;
  overflow: visible;
}
#accountMascotSVG {
  width: 100%;
  height: 100%;
  animation: cloudBounce 10s linear infinite
}
#mascotEye {
  transition: fill 3s ease;
  pointer-events: auto;
  fill: var(--color1);
}
#mascotEye:hover {
  fill: var(--color3);
}

Lev https://polivantage.com

Animated Dynamic SVG user account mascot

Animated Logo with CSS and SVG