Casual / Experiment Experiment

Custom Page Error Illustrations

UI Design & Animation

01 — Project Overview

Animated custom 404 and network-error pages with SVG illustrations and subtle CSS/JS animations.

Solo Developer.

Stack

HTML5CSS3JavaScriptSVG

Private / Offline

Goal

Turn generic browser error pages into designed, branded experiences.

User Issue

Default browser error pages are confusing and disorienting for non-technical users.

SVG Illustrations

Drew custom illustrations in SVG for crisp rendering at any resolution.

Key Challenge

Animating SVG elements with pure CSS to simulate "broken connection" visual metaphors.

snippet

@keyframes flicker {
  0%,100% { opacity: 1; } 50% { opacity: 0.2; }
}

Polished, animated 404 and network error pages with custom SVG illustrations and gentle motion.

Impact

Demonstrated how thoughtful design can reduce user frustration in dead-end states.

Learnings

Learned to design for edge cases and the importance of clear recovery CTAs.

What I'd do differently

Would build a dynamic version that detects network status in real-time and switches between error types.