Can AI Build an Animated Clock? We put Sonnet 4.6 to the test. Claude Opus vs Sonnet vs Haiku

Which Claude model builds the best animated clock? Episode 5 of the LLM Coding Challenge — build an SVG animated clock in a single HTML file. Same prompt. One shot. No follow-ups. Each model writes a complete HTML file with an animated analog clock featuring three hands, tick marks, hour labels, and a digital time display. We score each model across 10 objective criteria: - SVG element present - Clock face / circle - Hour hand - Minute hand - Second hand - Hour markers (12) - Minute tick marks (60) - Digital time display - Smooth animation (requestAnimationFrame) - Correct real time Results — a three-way tie: - Opus 4.6: 10/10 — 204 lines. Dark teal theme, dynamically generated tick marks and labels via JavaScript, glowing digital display - Sonnet 4.6: 10/10 — 256 lines. Deep space theme with Roman numerals, SVG gradients and glow filters, luminous purple accents - Haiku 4.5: 10/10 — 186 lines. Most concise solution. Clean white clock face on a blue gradient, classic and elegant All three models nail every requirement. But which clock looks best? Vote in the comments! All code was generated using Claude Code CLI with the -p (one-shot) flag. Source code: https://github.com/GoCelesteAI/llm_coding_challenge --- Chapters: 0:00 Intro 0:15 The Prompt 0:30 Opus — Terminal 1:20 Opus — Live Clock 1:55 Sonnet — Terminal 2:45 Sonnet — Live Clock 3:20 Haiku — Terminal 4:10 Haiku — Live Clock 4:45 Scorecard 5:27 Outro https://github.com/GoCelesteAI/llm_coding_challenge/tree/main/episode05_svg_clock --- #Claude #AI #CodingChallenge #LLM #Opus #Sonnet #Haiku #SVG #HTML #AnimatedClock #Programming #AICode #JavaScript #WebDev