28:null 29:["$","title",null,{"children":"Dither Palette | dduyg | Observable"}] 2e:T2a9e,patternsApp = (async () => { function slug(name) { return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, ""); } function svgBg(inner, w, h, bg) { const svg = ``; const encoded = encodeURIComponent(svg); return `background-image: url("data:image/svg+xml,${encoded}"); background-repeat: repeat; background-size: ${w}px ${h}px; background-color: ${bg};`; } const patterns = []; patterns.push({ name: "Solid Black", css: "background:#000;" }); patterns.push({ name: "Solid White", css: "background:#fff;" }); const stripeWidths = [1, 2, 4, 8]; const stripeDirs = [ { label: "Horizontal", css: w => `background: repeating-linear-gradient(to bottom, #000 0 ${w}px, #fff ${w}px ${w*2}px);` }, { label: "Vertical", css: w => `background: repeating-linear-gradient(to right, #000 0 ${w}px, #fff ${w}px ${w*2}px);` }, { label: "Diagonal ↗", css: w => `background: repeating-linear-gradient(45deg, #000 0 ${w}px, #fff ${w}px ${w*2}px);` }, { label: "Diagonal ↘", css: w => `background: repeating-linear-gradient(-45deg, #000 0 ${w}px, #fff ${w}px ${w*2}px);` } ]; stripeDirs.forEach(dir => stripeWidths.forEach(w => { patterns.push({ name: `${dir.label} Stripes ${w}px`, css: dir.css(w) }); })); [4, 8, 16, 32].forEach(size => { patterns.push({ name: `Checker ${size}px`, css: `background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%) 0 0/${size}px ${size}px;` }); }); [3, 4, 6, 8, 12, 16].forEach(spacing => { patterns.push({ name: `Dots ${spacing}px`, css: `background: radial-gradient(#000 1px, transparent 1.2px) 0 0/${spacing}px ${spacing}px, #fff;` }); patterns.push({ name: `Dots Inverse ${spacing}px`, css: `background: radial-gradient(#fff 1px, transparent 1.2px) 0 0/${spacing}px ${spacing}px, #000;` }); }); [4, 6, 8].forEach(s => { patterns.push({ name: `Crosshatch ${s}px`, css: `background: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px ${s}px), repeating-linear-gradient(-45deg, #000 0 1px, transparent 1px ${s}px), #fff;` }); }); [4, 8, 12].forEach(s => { patterns.push({ name: `Grid Lines ${s}px`, css: `background: repeating-linear-gradient(#000 0 1px, transparent 1px ${s}px), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px ${s}px), #fff;` }); }); [2, 4, 6].forEach(t => { patterns.push({ name: `Lattice ${t}px`, css: `background: repeating-linear-gradient(0deg, #000 0 ${t}px, transparent ${t}px ${t*2}px), repeating-linear-gradient(90deg, #000 0 ${t}px, transparent ${t}px ${t*2}px), #fff;` }); }); patterns.push({ name: "Brick 8px", css: "background: linear-gradient(#000 1px, transparent 1px) 0 0/16px 8px, linear-gradient(90deg,#000 1px, transparent 1px) 0 0/16px 8px, linear-gradient(90deg,#000 1px, transparent 1px) 8px 4px/16px 8px, #fff;" }); patterns.push({ name: "Brick 16px", css: "background: linear-gradient(#000 1px, transparent 1px) 0 0/32px 16px, linear-gradient(90deg,#000 1px, transparent 1px) 0 0/32px 16px, linear-gradient(90deg,#000 1px, transparent 1px) 16px 8px/32px 16px, #fff;" }); [[0.4, "12%"], [0.7, "25%"], [1.0, "37%"], [1.3, "50%"], [1.6, "62%"], [1.9, "75%"]].forEach(([r, label]) => { patterns.push({ name: `Gray Dither ${label}`, css: `background: radial-gradient(#000 ${r}px, transparent ${r+0.3}px) 0 0/6px 6px, #fff;` }); }); const ringsInner = c => ``; patterns.push({ name: "Rings", css: svgBg(ringsInner("#000"), 12, 12, "#fff") }); patterns.push({ name: "Rings Inverse", css: svgBg(ringsInner("#fff"), 12, 12, "#000") }); const diamondInner = c => ``; patterns.push({ name: "Diamond Outline", css: svgBg(diamondInner("#000"), 16, 16, "#fff") }); patterns.push({ name: "Diamond Outline Inverse", css: svgBg(diamondInner("#fff"), 16, 16, "#000") }); const diamondDotInner = c => ``; patterns.push({ name: "Diamond Dot", css: svgBg(diamondDotInner("#000"), 16, 16, "#fff") }); patterns.push({ name: "Diamond Dot Inverse", css: svgBg(diamondDotInner("#fff"), 16, 16, "#000") }); const mazeInner = c => ``; patterns.push({ name: "Maze", css: svgBg(mazeInner("#000"), 16, 16, "#fff") }); patterns.push({ name: "Maze Inverse", css: svgBg(mazeInner("#fff"), 16, 16, "#000") }); const chevronInner = c => ``; patterns.push({ name: "Chevron", css: svgBg(chevronInner("#000"), 16, 8, "#fff") }); patterns.push({ name: "Chevron Inverse", css: svgBg(chevronInner("#fff"), 16, 8, "#000") }); const waveInner = c => ``; patterns.push({ name: "Wave", css: svgBg(waveInner("#000"), 16, 8, "#fff") }); patterns.push({ name: "Wave Inverse", css: svgBg(waveInner("#fff"), 16, 8, "#000") }); const plusGridInner = c => ``; patterns.push({ name: "Plus Grid", css: svgBg(plusGridInner("#000"), 12, 12, "#fff") }); patterns.push({ name: "Plus Grid Inverse", css: svgBg(plusGridInner("#fff"), 12, 12, "#000") }); [20, 28].forEach(s => { patterns.push({ name: `Windowpane ${s}px`, css: `background: repeating-linear-gradient(#000 0 2px, transparent 2px ${s}px), repeating-linear-gradient(90deg, #000 0 2px, transparent 2px ${s}px), #fff;` }); }); patterns.push({ name: "Diagonal Weave", css: "background: repeating-linear-gradient(45deg, #000 0 3px, transparent 3px 10px), repeating-linear-gradient(-45deg, #000 0 3px, transparent 3px 10px), #fff;" }); const styleEl = html``; const exportBtn = html``; exportBtn.onclick = () => { const css = patterns.map(p => `.pattern-${slug(p.name)} {\n ${p.css}\n}`).join("\n\n"); const blob = new Blob([css], { type: "text/css" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "hypercard-patterns.css"; a.click(); URL.revokeObjectURL(url); }; const tiles = patterns.map(p => { const label = html`

${p.name}

`; const swatch = html`

`; swatch.style.cssText = p.css; const tile = html`

${swatch}${label}

`; tile.onclick = () => { navigator.clipboard.writeText(p.css); label.textContent = "Copied!"; setTimeout(() => { label.textContent = p.name; }, 1000); }; return tile; }); const hyperTalkUrl = await FileAttachment("HyperTalk_Reference_2.4.pdf").url(); return html`

${styleEl}

Patterns.stack

A library of 1-bit dither patterns spanning the full range of classic fill textures, built in tribute to HyperCard and inspired by its original HyperTalk Reference.

Every swatch is ready to use: click one to copy its CSS instantly, or export the entire library as a single stylesheet and drop it straight into your project.

Patterns

${tiles}

`; })()2f:[{"id":"8c3fc20bf5059e34ba462107b1cdb062cc129727b89c6713eaa0d4e2d4e3f098f5790024cf755e7093fbdc58cea86e60418b3bdc9f88334ab0e0ade278a9ad55","href":"https://static.observableusercontent.com/files/8c3fc20bf5059e34ba462107b1cdb062cc129727b89c6713eaa0d4e2d4e3f098f5790024cf755e7093fbdc58cea86e60418b3bdc9f88334ab0e0ade278a9ad55","name":"HyperTalk_Reference_2.4.pdf","type":"application/pdf","lastModified":1789487560000,"size":13454437}] 2c:{"id":"c47638a0ea0fb938","slug":"dither-palette","title":"Dither Palette","thumbnail":"bee5c087ace7b972128bf153c922b29d5606aaf5d9c6f7e6938b7e2946d002f9","access_level":"public","create_time":"$D2026-09-17T20:22:20.518Z","update_time":"$D2026-09-20T20:57:53.405Z","view_time":null,"first_public_time":"$D2026-09-20T19:27:02.690Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024"},"version":57,"publish_version":57,"role":null,"authored":false,"authors":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null}],"members":[{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Dither Palette","cells":[{"id":1,"value":"# Dither Palette\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"2","titling":"auto"}} 2d:"$2c:body"