Error 404 Animation

AI Overview: Error 404 Animation

This project creates an interactive and clever visual for a "404 Not Found" error page. Instead of displaying static text, it uses the numbers "4", "0", and "4" to form the components of a character's face. The animation transforms these numbers into a living character that blinks, looks from side to side, and eventually reveals a smile.

The project is built using a combination of HTML and CSS. The face is structured using Scalable Vector Graphics (SVG), which ensures the image stays sharp at any size. The two "4"s are drawn as eyes using polyline elements, while the "0" is a rect (rectangle) that functions as the nose.

<polyline class="face__eye-lid" points="37,0 0,120 75,120" />
<polyline class="face__pupil" points="55,120 55,155" stroke-dasharray="35 35" />

The snippet above shows how a "4" is constructed using SVG points to create the shape of an eye and a pupil.

The logic of the animation is handled entirely within CSS using @keyframes. When the page loads, the "eyes" (the 4s) slide upward while the "nose" (the 0) slides downward. This movement breaks the initial horizontal "404" alignment to create a more natural facial structure.

@keyframes eyes {
  from { transform: translateY(112.5px); }
  to { transform: translateY(15px); }
}

This CSS rule moves the eye group vertically to transition from a text layout to a face layout.

To make the character feel alive, the CSS coordinates multiple animations at once. The eye-lid animation handles blinking by slightly moving the eye shapes, while the pupil animation moves the pupils left and right. The mouth is initially hidden using a stroke-dashoffset technique and "drawn" onto the screen as the animation completes.

@keyframes eye-lid {
  from, 40%, 45%, to { transform: translateY(0); }
  42.5% { transform: translateY(17.5px); }
}

This keyframe sequence creates a quick "blink" effect by moving the eyelid down and back up very rapidly at a specific point in the loop.

Finally, the project is designed to be responsive and user-friendly. It uses the CSS light-dark() function to automatically swap background and stroke colors based on the viewer's system theme. This ensures the 404 face is perfectly visible whether the user is in Light Mode or Dark Mode.