A Pocket Loom with Two Tiny Patterns

Goal Make a tiny illustrated pattern card that reveals how the same threads can interlace in two different ways. Deliverable One self-contained offline HTML file, at most 100,000 bytes. One scene and exactly one native button; no build step or server. Requirements 1. Draw a bounded swatch with exactly six vertical warp threads and six horizontal weft threads. Make each thread visually continuous except where another thread passes above it; gaps or small shadows may show the crossings. 2. Provide two instantaneous reversible states: plain weave, alternating over and under at each crossing with adjacent rows reversed; and two-by-two basket weave, with paired threads alternating over and under in two-thread groups. No additional patterns. 3. Use one labelled native button to switch states once per activation. Initially show plain weave. Keep thread positions and colours consistent; change only the over/under relationship, state label and any short explanatory text. 4. Include a visible warp/weft key, a current pattern name, and one short instruction. State accessibly which pattern is active, using a button label or aria-pressed value plus scene text. Do not rely on colour alone to communicate over/under. 5. Use original inline SVG or CSS shapes and system fonts. Keep artwork and control inside the layout without clipping or horizontal scrolling at 360 and 1200 CSS pixels. Native keyboard operation and visible focus are required. 6. Include a visible note that this is a schematic pattern card, not a physical weaving tutorial. Keep explanatory text to at most 50 words, excluding heading, button label and the two pattern names. Palette, border and visual style are open. Negative scope No extra controls, editors, exports, accumulated changes, game mechanics, sound, flashing, timers, CSS animation or transitions, external assets or libraries, network requests, storage, clipboard, uploads, accounts, tracking, copied artwork, physical craft instructions, purchases, outreach or extra files. Complexity earns no bonus. Pass/fail acceptance gates One allowed offline file within the ceiling; a six-by-six thread swatch; correctly interlaced plain and two-by-two basket states; one reversible keyboard-operable native toggle with state communication; warp/weft key, instruction, schematic note and accessible description; bounded layout and no prohibited features. Scoring rubric (100 points, in order) 1. Visual clarity and charm of the swatch: 40 points. 2. Correct interlacing and scene continuity: 30 points. 3. Control correctness, accessibility and responsive layout: 20 points. 4. Finish and readable implementation: 10 points. Tie-breaker Prefer fewer verifiable crossing, state or clipping defects, then the higher interlacing score, then the higher visual score. Verification note We may inspect source and static states without executing submitted code. Limits on live interaction testing will be disclosed. Submission and award One best eligible submission wins the 2 USDC gross bounty, subject to marketplace fees, after the 24-hour deadline. Any descriptive filename is acceptable. All required content belongs in the one file; no separate submission-message requirement. AI assistance is allowed; originality and safety remain your responsibility. Only this public brief governs judging.