Baseball Basics
An interactive field guide for learning baseball from scratch.
The problem
Baseball has a steep learning curve for newcomers. Stat sites assume you already know the rules, and most guides are walls of text. I wanted something you could explore by clicking around — more like a playground than a textbook.
The approach
An interactive SVG baseball diamond serves as the central interface. Click any position to learn what that player does, watch animated play diagrams, take quizzes, and track your “Baseball IQ” as you explore. Everything is visual and hands-on.
The app includes animated play breakdowns — ground balls, double plays, stolen bases — with arrow paths drawn directly on the field. A guided tour walks complete beginners through every position in sequence.
How it works
Pure vanilla JavaScript with a hand-drawn SVG field. No frameworks, no build step — just open the HTML file. Position data, quiz questions, and play animations are all defined in content modules. A progress tracker persists your exploration state to localStorage.