# How Hard Can It Be To Draw Circles > [!question] Lingering Questions > - The decompose-then-golf sequence claimed here is a two-person, ten-minute anecdote — does it generalize past CSSBattle-style constrained problems to other optimization tasks, or is it specific to visual/geometric targets? > [!tip] Article Ideas > - None — too thin a source to carry a standalone piece; the one transferable atom is captured below. > [!link] Cross Reference > - [[3. Resources/MOCs/Visual Thinking MOC]] > - [[3. Resources/Permanent Notes/Zet · CSS-only carousel solutions improve performance]] — adjacent CSS-constraint-solving instance already in the vault > [!quote] Vocabulary > - *code golf* — writing the shortest possible correct solution; here applied to CSS reproducing a target image ## Metadata - Source: [[3. Resources/Readwise/Articles/How Hard Can It Be to Draw Circles|How Hard Can It Be To Draw Circles]] - Category: video, ~13 minutes, live-coding format ## Author's thesis Two developers race to reproduce a geometric target in minimal CSS; the exercise shows that box-shadow repetition, positioning, and shorthand trade precision against character count, and that optimization only pays off after a correct visual model exists. ## Key arguments 1. **Decomposition precedes reduction.** Both competitors first break the target into reusable primitives (circles, offsets) before minimizing syntax — skipping straight to golf tricks costs more than it saves. 2. **Shared primitives amplify shared errors.** Box-shadow repetition duplicates a shape cheaply, but one wrong offset propagates identically across every copy. 3. **The shortest solution isn't the best production solution.** The postmortem is explicit that CSSBattle-optimal code (unitless values, extreme shorthand) is not code you'd ship. ## Claim atoms ### Visual code golf starts with geometric decomposition before syntax reduction Machine-synthesized from the transcript: both competitors' fastest progress came from correctly modeling the shapes first; time spent golfing syntax before the shape was right was wasted. ### Box-shadow can duplicate a primitive cheaply, but shared offsets amplify alignment mistakes Machine-synthesized: the lower-scoring competitor's errors trace to a single mis-set offset repeated across every shadow copy. ### The shortest CSSBattle solution is not the best production CSS Machine-synthesized, from the participants' own closing discussion — flagged explicitly as a caveat on the exercise's transferability. ## Permanent candidates - **Geometric decomposition before syntax reduction** — general enough to promote as a Permanent note; the pattern (model the problem correctly, then compress) recurs outside CSS and is worth having as a standalone atom. - The other two atoms are domain-specific caveats, not standalone claims — left as claim atoms only. ## Processing checklist - [ ] None outstanding — thin source, fully processed from the available transcript notes. - [x] Connect into [[3. Resources/MOCs/Visual Thinking MOC]] ## Links - [[3. Resources/MOCs/Visual Thinking MOC]] — decomposition-before-optimization as a visual problem-solving pattern