Animated 404 Face HTML, CSS & SVG

This is an Animated 404 Face SVG. It uses CSS keyframes to transform the static numbers “404” into a reactive, smiling face. Its function is to provide an engaging, lightweight fallback state for broken links, softening user frustration through characterful micro-interactions.

Specs

• Weight: ~2 KB. Zero dependencies.
• Performance: High. Relies entirely on hardware-accelerated transform and SVG stroke-dashoffset for its drawing effects, bypassing JavaScript completely.
• Theming: Utilizes the native CSS light-dark() function, instantly reacting to system color scheme preferences.
• Responsiveness: Scales fluidly using clamp() for the base font size and scalable SVG viewBox dimensions.
• Graceful Degradation: [!] The light-dark() CSS function requires very recent browsers. In unsupported versions, the colors will fail silently. If CSS animations fail, it renders as a static, readable line-art face. The <svg> features a highly descriptive aria-label, ensuring full screen reader context.

Anatomy

• HTML: A single <svg> node housing grouped <polyline>, <rect>, and <path> elements. The initial shapes are positioned to resemble the text “404”.
• CSS: Operates purely on @keyframes. It targets specific SVG groups (.face__eyes, .face__nose) to translate their Y-axis, effectively breaking the “404” alignment into scattered facial features.

Logic

The highlight is the line-drawing mechanism for the mouth and pupils using stroke-dasharray and stroke-dashoffset.

@keyframes mouth-left {
  from,
  50% {
    stroke-dashoffset: -102;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Instead of complex SVG path morphing algorithms, the CSS simply offsets a dashed stroke by an amount equal to the path’s total length, pushing it completely out of view. By animating the offset back to 0, the line smoothly “draws” itself onto the screen, turning blank space into a smile.

Feel

Playful and deliberate. The delay before the initial transformation builds tension, and the subsequent cubic-bezier easing gives the elements a mechanical, snappy spring. The continuous, scheduled eye movements make the interface feel briefly alive, turning a dead end into a moment of discovery.