How Hard Can It Be to Draw Circles?  🔗 **Source:** [How Hard Can It Be to Draw Circles?](https://www.youtube.com/watch?v=QnZlmHaveWI) > [!note]+ Document Notes > tags: [css, css-battle, box-shadow, frontend-development, code-golf] > author: "Scott Tolinski and CJ" > source: "https://www.youtube.com/watch?v=QnZlmHaveWI" > reference: "01kya7ekdjdaw577qt2thp39pc" > date created: 2026-07-24 > > # 🏷️ Title: How hard can it be to draw circles? > <!-- deep-read:sections start --> ## 🧭 Table of Contents References; summary; main content; notes; paraphrase; newsletter; actions; hypotheses; methodology; questions; research; implications; assessments; logic; DARVO; conclusion; refactor appendix; templates. ## 🔗 References - Video: https://www.youtube.com/watch?v=QnZlmHaveWI - Reader document: 01kya7ekdjdaw577qt2thp39pc ## 📝 Summary Two developers race for ten minutes to reproduce a geometric target with the smallest CSS solution. The exercise shows how box-shadow repetition, absolute or fixed positioning, border radius, grid centering, and aggressive shorthand trade precision against character count. The strongest lesson is that optimization begins after a correct visual model exists. ## 📖 Main Content Both competitors create circles and repeated offsets, then add the central rectangle under time pressure. One solution reaches 99.9% visual similarity; the other reaches 87.7% after interruptions and positioning errors. Their postmortem identifies forgotten code-golf tricks and a mismatch between centering and exact absolute placement. ### 🗒️ Notes - 00:00–04:00 — target decomposition, body centering, circles, and first box shadows - 04:00–08:00 — repeated offsets, borders, unit removal, and time-pressure errors - 08:00–13:00 — final alignment, scores, and discussion of positioning choices - Scope: This note analyzes the captured transcript. Linked claims and allegations are not treated as independently verified without primary records. ## 📚 References - Primary captured source: https://www.youtube.com/watch?v=QnZlmHaveWI - Verify cited studies, legal filings, historical links, statistics, quotations, and allegations against original records before publication. ## 🗣️ Paraphrase The challenge rewards a two-stage mental model: decompose the image into reusable primitives, then reduce syntax. Repeated shadows can replace many elements, but a tiny coordinate error propagates across every copy. ## 📰 Newsletter **Why this matters for WordPress:** Two developers race for ten minutes to reproduce a geometric target with the smallest CSS solution. The exercise shows how box-shadow repetition, absolute or fixed positioning, border radius, grid centering, and aggressive shorthand trade precision against character count. The strongest lesson is that optimization begins after a correct visual model exists. Open-web teams should turn the key claim into a small reproducible check, report limits beside results, and keep affected contributors in the decision. [Watch the source](https://www.youtube.com/watch?v=QnZlmHaveWI). ## ✅ Action Items - DevRel: turn claims into reproducible examples; OSPO: review governance and dependency effects; Community: include affected people in review; WordPress — Core: assess platform relevance; Core Performance: measure cost and latency; Core AI: define model tests; Core Program Team: coordinate milestones; Mobile: test small screens; Playground: build a safe reproduction; Community: gather contributor feedback; Training: create a lesson; Marketing: state limits; Support: collect failure patterns; Design: review workflows; Documentation: record behavior and caveats; Photos: not applicable unless visual assets are needed; TV: consider a short explainer; Polyglots: preserve cultural context; Accessibility: test WCAG 2.2 AA; Meta: review site and API effects; CLI: expose repeatable checks; Hosting: test deployment constraints; Tide: automate relevant quality checks; Openverse: review open-asset implications; Themes: test presentation effects; Plugins: publish compatibility guidance. The WPOCC: consider community-governance effects. FAIR: note effects on federated open-source collaboration. ## 🧪 Hypotheses 1. If visual code golf starts with geometric decomposition before syntax reduction., a bounded comparison will show a measurable change in error, trust, or decision quality. 2. The effect will differ by user expertise, task complexity, and access to independent review. 3. Publishing source limits next to the result will reduce later overgeneralization. ## 📊 Methodology Define the unit of analysis, baseline, outcome, failure classes, cost, time, and affected groups before testing. Preserve inputs and report null results. For testimony or commentary, triangulate with primary documents and responses from named parties. For technical demonstrations, reproduce the code and compare maintainability, accessibility, and performance as well as the showcased score. ## ❓ Questions - Which claim would change the conclusion if false? - What evidence is first-hand, reproduced, inferred, or alleged? - Who gains authority or revenue under the proposed account? - Which costs fall outside the measured outcome? ## 🔮 Future Research Replicate across contexts; compare short- and long-term effects; test alternative explanations; obtain primary records; and track whether gains or harms persist in operational use. ## 💡 Implications Practice: run bounded trials and preserve dissent. Policy: require traceable evidence for high-impact claims. Security: inspect authority, data, and failure paths. Education: teach source comparison. Funding: tie spending to measured outcomes and public reporting. ## 🧠 Learning Styles Assessment - Visual: map claim, evidence, mechanism, and counterclaim. - Aural: compare the speaker’s case with a sourced response. - Verbal: restate the thesis without promotional or adversarial language. - Kinesthetic: reproduce the technical or documentary check. - Logical: separate observations, premises, inferences, and conclusions. - Social: discuss with people who hold differing views. - Solitary: keep a prediction and error log. - Naturalistic: inspect resource and environmental effects where relevant. - Reading level: approximately grade 10–12; technical and theological terms need definitions. ## 📊 Accessibility Assessment - Perceivable: captions, transcript, alt text, and sufficient contrast (WCAG 1). - Operable: keyboard access, visible focus, and adequate target size (WCAG 2). - Understandable: clear headings, definitions, and consistent navigation (WCAG 3). - Compatible: semantic markup and valid names, roles, and values (WCAG 4). - Cognitive: short sections, summaries, and explicit argument structure. - Motion and media: user controls and no forced motion. - Testing: automated checks plus keyboard, screen-reader, zoom, reflow, and cognitive review against WCAG 2.2 AA. ## 🌍 DEIB Assessment - Cultural breadth: state geographic, denominational, institutional, and language scope. - Inclusive language: criticize claims and conduct without stereotyping groups. - Neurodiversity support: predictable structure, definitions, and examples. - Representation: seek the views of people affected and those criticized. - Psychological safety: allow dissent without forcing public disclosure of harm or belief. ## ✅ Logical Validity The competition directly demonstrates the code and score, so the narrow result is observable. It does not establish a general best CSS technique; CSSBattle scoring rewards brevity over maintainability, semantics, accessibility, or responsive behavior. - Strong reasoning: the source offers a clear claim and identifiable mechanism. - Fallacy check: watch for hasty generalization, selection bias, false cause, motive attribution, title overstatement, and analogy used as proof. - Fix: add primary evidence, comparison data, definitions, uncertainty, and counterevidence. - Tone: conversational and persuasive; adversarial sections need extra care. ## 🛡️ DARVO Analysis No complete DARVO sequence is established by the transcript alone. Where allegations or conflict appear, evaluate denial, criticism, and claims of harm separately before assigning the pattern. ## 🎯 Conclusion Visual code golf starts with geometric decomposition before syntax reduction. The next step is a source-level check against a baseline or primary record. ## 🧱 Refactor Appendix ### Literature Split Pad - Thesis: Two developers race for ten minutes to reproduce a geometric target with the smallest CSS solution. The exercise shows how box-shadow repetition, absolute or fixed positioning, border radius, grid centering, and aggressive shorthand trade precision against character count. The strongest lesson is that optimization begins after a correct visual model exists. - Evidence state: transcript analyzed; linked claims require primary-source checks. - Cross-links: [[css]] [[css-battle]] [[box-shadow]] [[frontend-development]] [[code-golf]] #### Atomic Split Pad - Visual code golf starts with geometric decomposition before syntax reduction. - Box-shadow can duplicate a primitive cheaply, but shared offsets amplify alignment mistakes. - The shortest CSSBattle solution is not the best production CSS. #### Fleeting Queue - What evidence would falsify the thesis? - Which existing vault note should receive each atom? - Revisit after a primary-source response or material product change. <!-- deep-read:sections end --> 📄 **Full text:** [[Full Document Contents/Articles/How Hard Can It Be to Draw Circles.md|How Hard Can It Be to Draw Circles? by Scott Tolinski and CJ]] ## Highlights - Top again. This is going to be like negative like 50 60. Okay. I mean it's pretty close. Let's do the diff view here. Um um um man I've forgotten like all of my all of my tips here. 75. Um I don't think the widths on these is even correct. >> That is spoton perfect. I'm going to go ahead and submit. see what our score is. But that's looking good. So, we got that little square in the middle. My next thought is I just create one circle and ([View Highlight](https://read.readwise.io/read/01kya7mf3ttwazqfrz4sdv4w45)) - Note: Central transcript passage selected during deep read. - Tags: atom/literature/h1, css - actually just copy that one. So, we do comma and it should be 150. Beautiful. Okay. Uh 5 minutes left. We're looking really good at this point. I want to draw that beige square on top of everything. Obviously, mine is very wrong, but I'm just going for uh as fast as possible here. Okay, Scott. Come on. Get your game face on. Get your game face on. And this is going to be no color. Where did that one go? So, 450 pixels. ([View Highlight](https://read.readwise.io/read/01kya7mmvkwmcr2806sapyd8bn)) - Note: Supporting transcript passage selected during deep read. - Tags: atom/literature/h2, css - 99.9. Come on. I got to look at the diff. No, everything is just off tiny tiny tiny tiny bit. >> And then this one also needs to be 300. Ah, there we go. Okay, this is my C. Um, >> there's no way I could adjust like I think if I adjust just B. I only have 17 seconds left. I don't want to touch it. ([View Highlight](https://read.readwise.io/read/01kya7mp0828wavpc9j9a95y6c)) - Note: Supporting transcript passage selected during deep read. - Tags: css, atom/literature/h3