Claude Made These Animated Spinners - Who Did It Best? (EP05)

Which Claude model writes the best code? Episode 5 of the LLM Coding Challenge — this time we build an animated SVG loading spinner with CSS animations. Same prompt. One shot. No follow-ups. Each model writes a standalone HTML file with an animated loading spinner using SVG and CSS. Multiple animated elements, staggered timing, smooth easing, and visual polish. We score each model across 10 criteria: - Valid HTML renders without errors - Uses SVG elements - Animation loops continuously - Multiple animated elements - Staggered timing between elements - Smooth easing (not linear) - Centered on page - Clean code structure - Color palette / visual polish - Creative design Results: - Opus: 10/10 — Three concentric rings, eight orbiting dots with staggered pulses, and a breathing center core - Sonnet: 6/10 — Working spinner with three circles, but no staggered timing or visual polish - Haiku: 9/10 — Gradient definitions with counter-rotating rings, very close to Opus in quality Opus takes a perfect ten! 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 1:41 Sonnet 2:52 Haiku 4:11 Scorecard 4:46 Outro --- #Claude #AI #CodingChallenge #LLM #Opus #Sonnet #Haiku #SVG #CSS #Animation #Spinner #Programming #AICode #WebDev Tags Claude, AI, coding challenge, LLM, Opus, Sonnet, Haiku, SVG, CSS animation, loading spinner, programming, AI code, Claude Code, Anthropic, code comparison, AI models, Claude Code CLI, web development