2d:null 2e:["$","title",null,{"children":"SVG Flagmatic | Eric Dobbs | Observable"}] 33:[] 31:{"id":"6cb224ff7a31848c","slug":"svg-flagmatic","title":"SVG Flagmatic","thumbnail":"a12e2440df0db2b81b99113cce522e6f726e7a209fad0b448029fd0ec7c25c98","access_level":"public","create_time":"$D2021-08-02T18:50:11.934Z","update_time":"$D2026-09-14T00:22:24.611Z","view_time":null,"first_public_time":"$D2021-08-02T19:57:33.649Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0ab04159034289a7","login":"dobbs","name":"Eric Dobbs","avatar_url":"https://avatars-next.observableusercontent.com/b66e5674cfdf6803ebae731a2e6a4b5ac55cd6e6efdea8ab0ecddd989387ed90","tier":"starter_2024"},"version":210,"publish_version":210,"role":null,"authored":false,"authors":[{"type":"individual","id":"407972836864cb3e","login":"dobbs","name":"Eric Dobbs","avatar_url":"https://avatars-next.observableusercontent.com/b66e5674cfdf6803ebae731a2e6a4b5ac55cd6e6efdea8ab0ecddd989387ed90","tier":null}],"members":[{"type":"individual","id":"407972836864cb3e","login":"dobbs","name":"Eric Dobbs","avatar_url":"https://avatars-next.observableusercontent.com/b66e5674cfdf6803ebae731a2e6a4b5ac55cd6e6efdea8ab0ecddd989387ed90","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"SVG Flagmatic","cells":[{"id":0,"value":"# SVG Flagmatic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"{\n function row(hue) {\n return Array.from({length:4}).map((_, i)=> flag(tilt, hue, light+i*5, dark-i*5))\n }\n function sortedHues() {\n let delta = (righthue - lefthue) / 23\n let collection = []\n for (let i = lefthue; i < righthue; i+=delta) {\n collection.push(i)\n }\n return collection.map((hue) => html`${row(hue)}`)\n }\n return html`\n${ sortedHues() }`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"viewof light = Inputs.range([0,100], {label:\"light\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"viewof dark = Inputs.range([0,100], {label:\"dark\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"viewof tilt = Inputs.range([0,0.999], {label:\"tilt\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"viewof lefthue = Inputs.range([0,0.49],{label:\"left hue\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof righthue = Inputs.range([0.5,1],{label:\"right hue\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"function flag(tilt, hue, light, dark) {\n let id = \"g\" + (Math.random()*10000|0).toString(16)\n let angle = 2 * (tilt % 1)\n let [cos, sin] = [Math.cos(angle), Math.sin(angle)]\n let [l, d] = [light, dark].map(n => `hsl(${(hue%1*360)|0} 78% ${n}%)`) \n return html``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"html`

Doesn't work in an image tag

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"