Back to Components
Animated 404 Face – Creative SVG Error Page with CSS Animations
Component

Animated 404 Face – Creative SVG Error Page with CSS Animations

CodewithLord
October 4, 2025

This Animated 404 Error Page creatively transforms the digits “404” into a playful, expressive face using SVG paths and CSS animations.

🧠 Description

This Animated 404 Error Page creatively transforms the digits “404” into a playful, expressive face using SVG paths and CSS animations. Each element of the face — eyes, pupils, mouth, and nose — animates dynamically to give the illusion that the “404” is alive: it looks around, blinks, and smiles. The design uses no JavaScript, relying solely on SVG graphics and CSS keyframes for smooth, lightweight motion.


💻 HTML Code


1<!DOCTYPE html>
2<html lang="en">
3
4  <head>
5    <meta charset="UTF-8">
6    <title>404 Error Face</title>
7    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
8
9  </head>
10    
11  <body>
12  <main>
13	<svg class="face" viewBox="0 0 320 380" width="320px" height="380px" aria-label="A 404 becomes a face, looks to the sides, and blinks. The 4s slide up, the 0 slides down, and then a mouth appears.">
14		<g
15		   fill="none"
16		   stroke="currentcolor"
17		   stroke-linecap="round"
18		   stroke-linejoin="round"
19		   stroke-width="25"
20		   >
21			<g class="face__eyes" transform="translate(0, 112.5)">
22				<g transform="translate(15, 0)">
23					<polyline class="face__eye-lid" points="37,0 0,120 75,120" />
24					<polyline class="face__pupil" points="55,120 55,155" stroke-dasharray="35 35" />
25				</g>
26				<g transform="translate(230, 0)">
27					<polyline class="face__eye-lid" points="37,0 0,120 75,120" />
28					<polyline class="face__pupil" points="55,120 55,155" stroke-dasharray="35 35" />
29				</g>
30			</g>
31			<rect class="face__nose" rx="4" ry="4" x="132.5" y="112.5" width="55" height="155" />
32			<g stroke-dasharray="102 102" transform="translate(65, 334)">
33				<path class="face__mouth-left" d="M 0 30 C 0 30 40 0 95 0" stroke-dashoffset="-102" />
34				<path class="face__mouth-right" d="M 95 0 C 150 0 190 30 190 30" stroke-dashoffset="102" />
35			</g>
36		</g>
37	</svg>
38</main>
39    
40  </body>
41  
42</html>
43<!DOCTYPE html>
44<html lang="en">
45
46  <head>
47    <meta charset="UTF-8">
48    <title>404 Error Face</title>
49    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">
50
51  </head>
52    
53  <body>
54  <main>
55	<svg class="face" viewBox="0 0 320 380" width="320px" height="380px" aria-label="A 404 becomes a face, looks to the sides, and blinks. The 4s slide up, the 0 slides down, and then a mouth appears.">
56		<g
57		   fill="none"
58		   stroke="currentcolor"
59		   stroke-linecap="round"
60		   stroke-linejoin="round"
61		   stroke-width="25"
62		   >
63			<g class="face__eyes" transform="translate(0, 112.5)">
64				<g transform="translate(15, 0)">
65					<polyline class="face__eye-lid" points="37,0 0,120 75,120" />
66					<polyline class="face__pupil" points="55,120 55,155" stroke-dasharray="35 35" />
67				</g>
68				<g transform="translate(230, 0)">
69					<polyline class="face__eye-lid" points="37,0 0,120 75,120" />
70					<polyline class="face__pupil" points="55,120 55,155" stroke-dasharray="35 35" />
71				</g>
72			</g>
73			<rect class="face__nose" rx="4" ry="4" x="132.5" y="112.5" width="55" height="155" />
74			<g stroke-dasharray="102 102" transform="translate(65, 334)">
75				<path class="face__mouth-left" d="M 0 30 C 0 30 40 0 95 0" stroke-dashoffset="-102" />
76				<path class="face__mouth-right" d="M 95 0 C 150 0 190 30 190 30" stroke-dashoffset="102" />
77			</g>
78		</g>
79	</svg>
80</main>
81    
82  </body>
83  
84</html>
85

The structure of the page is built around an SVG graphic, which visually represents the “404” number as a cartoon face. What’s Happening:

The SVG polyline and path elements form the outline of facial features.

The two “4”s are shaped like eyes, and the “0” becomes a nose or central feature.

Each part (eyes, pupils, mouth, nose) has its own CSS animation to bring the face to life.

The result: The 404 error number literally “looks around, blinks, and smiles.”


CSS Code


1* {
2  border: 0;
3  box-sizing: border-box;
4  margin: 0;
5  padding: 0;
6}
7
8:root {
9  --hue: 223;
10  --sat: 10%;
11  --light: hsl(var(--hue), var(--sat), 95%);
12  --dark: hsl(var(--hue), var(--sat), 5%);
13  --trans-dur: 0.3s;
14  color-scheme: light dark;
15  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
16}
17
18body {
19  background-color: light-dark(var(--light), var(--dark));
20  color: light-dark(var(--dark), var(--light));
21  font: 1em/1.5 sans-serif;
22  display: grid;
23  place-items: center;
24  height: 100vh;
25  transition: background-color var(--trans-dur), color var(--trans-dur);
26}
27
28main {
29  padding: 1.5em 0;
30}
31
32.face {
33  display: block;
34  width: 12em;
35  height: auto;
36}
37.face__eyes, .face__eye-lid, .face__mouth-left, .face__mouth-right, .face__nose, .face__pupil {
38  animation: eyes 1s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
39}
40.face__eye-lid, .face__pupil {
41  animation-duration: 4s;
42  animation-delay: 1.3s;
43  animation-iteration-count: infinite;
44}
45.face__eye-lid {
46  animation-name: eye-lid;
47}
48.face__mouth-left, .face__mouth-right {
49  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
50}
51.face__mouth-left {
52  animation-name: mouth-left;
53}
54.face__mouth-right {
55  animation-name: mouth-right;
56}
57.face__nose {
58  animation-name: nose;
59}
60.face__pupil {
61  animation-name: pupil;
62}
63
64/* Animations */
65@keyframes eye-lid {
66  from, 40%, 45%, to {
67    transform: translateY(0);
68  }
69  42.5% {
70    transform: translateY(17.5px);
71  }
72}
73@keyframes eyes {
74  from {
75    transform: translateY(112.5px);
76  }
77  to {
78    transform: translateY(15px);
79  }
80}
81@keyframes pupil {
82  from, 37.5%, 40%, 45%, 87.5%, to {
83    stroke-dashoffset: 0;
84    transform: translate(0, 0);
85  }
86  12.5%, 25%, 62.5%, 75% {
87    stroke-dashoffset: 0;
88    transform: translate(-35px, 0);
89  }
90  42.5% {
91    stroke-dashoffset: 35;
92    transform: translate(0, 17.5px);
93  }
94}
95@keyframes mouth-left {
96  from, 50% {
97    stroke-dashoffset: -102;
98  }
99  to {
100    stroke-dashoffset: 0;
101  }
102}
103@keyframes mouth-right {
104  from, 50% {
105    stroke-dashoffset: 102;
106  }
107  to {
108    stroke-dashoffset: 0;
109  }
110}
111@keyframes nose {
112  from {
113    transform: translate(0, 0);
114  }
115  to {
116    transform: translate(0, 22.5px);
117  }
118}

he entire animation logic is handled by CSS only — no JavaScript!

🧱 Base Styling

Global resets using * and consistent sizing.

Color variables defined using HSL (--light, --dark) for easy dark/light theme switching.

color-scheme: light dark; allows the design to adapt automatically to system theme (light/dark mode).

The page uses CSS Grid to center the SVG perfectly both vertically and horizontally.

🌈 Light & Dark Theme

The light-dark() CSS function smartly adjusts background and text color based on user’s system theme — creating an adaptive interface automatically.

Love this component?

Explore more components and build amazing UIs.

View All Components