2b:null 2c:["$","title",null,{"children":"Avatar | danub Workspace | Observable"}] 31:T66c,variant2 = { const dArc = (size = TILE_SIZE) => d3.arc()({ innerRadius: 0, outerRadius: size, startAngle: 0, endAngle: Math.PI, }) const bTopArc = (size = TILE_SIZE) => d3.arc()({ innerRadius: 0, outerRadius: size, startAngle: 0, endAngle: Math.PI / 2, }) const bBottomArc = (size = TILE_SIZE) => d3.arc()({ innerRadius: 0, outerRadius: size, startAngle: 0, endAngle: Math.PI / 2 }) const D1 = () => htl.svg` ` const B1 = () => htl.svg` ` const B2 = () => htl.svg` ` return htl.html`` }32:T63e,{ const dArc = (size = TILE_SIZE) => d3.arc()({ innerRadius: size / 2, outerRadius: size, startAngle: 0, endAngle: Math.PI, }) const bTopArc = (size = TILE_SIZE) => d3.arc()({ innerRadius: size / 2, outerRadius: size, startAngle: 0, endAngle: Math.PI / 2, }) const bBottomArc = (size = TILE_SIZE) => d3.arc()({ innerRadius: size / 2, outerRadius: size, startAngle: 0, endAngle: Math.PI / 2 }) const D1 = () => htl.svg` ` const B1 = () => htl.svg` ` const B2 = () => htl.svg` ` return htl.html`` }33:[] 2f:{"id":"3860c93534133aef","slug":null,"title":"Avatar","thumbnail":"c5913243fb01e99e3f3f3f6c9ee1fc08013aa5b2792e233e89e8f5d0abec82d0","access_level":"public","create_time":"$D2023-08-19T19:14:42.757Z","update_time":"$D2024-02-12T16:16:49.839Z","view_time":null,"first_public_time":"$D2023-08-19T19:14:42.757Z","has_unpublished_edits":null,"fork":{"id":"7012061a800e7057","slug":"simple-svg","title":"Simple SVG","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fb6c72bf8c07079f","login":"daenub-workspace","name":"danub Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e4f1f0e556102f9cd2a189f21f80ee7ec14ffa9a2354e07281761d2df8f0cb62","tier":"starter_2024"},"version":557,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null}],"members":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null,"role":"editor"},{"type":"team","id":"fb6c72bf8c07079f","login":"daenub-workspace","name":"danub Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e4f1f0e556102f9cd2a189f21f80ee7ec14ffa9a2354e07281761d2df8f0cb62","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Avatar","cells":[{"id":0,"value":"# Avatar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"viewof TILE_SIZE = Inputs.range([0, 100], {label: \"Tile Size\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"## Variations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"viewof variant1 = {\n\n const dArc = d3.arc()({\n innerRadius: 0,\n outerRadius: TILE_SIZE,\n startAngle: 0,\n endAngle: Math.PI\n })\n\n const bArc = d3.arc()({\n innerRadius: 0,\n outerRadius: TILE_SIZE,\n startAngle: 0,\n endAngle: Math.PI / 2\n })\n\n const D1 = () => htl.svg`\n \n`\n\n const B1 = () => htl.svg`\n \n \n`\n \n return htl.html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"{\n\n const dArc = d3.arc()({\n innerRadius: 0,\n outerRadius: TILE_SIZE,\n startAngle: 0,\n endAngle: Math.PI\n })\n\n const b2Arc = d3.arc()({\n innerRadius: 0,\n outerRadius: TILE_SIZE / 2,\n startAngle: 0,\n endAngle: Math.PI\n })\n\n const D = () => htl.svg`\n \n `\n\n const B = () => htl.svg`\n \n \n`\n return htl.html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":365,"value":"ids = ({\n option1: DOM.uid(\"option-1\"),\n option2: DOM.uid(\"option-2\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"avatarSquare = (id) => htl.svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"avatarCircle = (id) => {\n const length = TILE_SIZE * 2 + paddings.circle\n return htl.svg``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"final = {\n const dArc = (size = TILE_SIZE) => d3.arc()({\n innerRadius: 0,\n outerRadius: size,\n startAngle: 0,\n endAngle: Math.PI,\n })\n\n const bTopArc = (size = TILE_SIZE) => d3.arc()({\n innerRadius: 0,\n outerRadius: size,\n startAngle: 0,\n endAngle: Math.PI / 2,\n })\n\n const bBottomArc = (size = TILE_SIZE) => d3.arc()({\n innerRadius: 0,\n outerRadius: size,\n startAngle: 0,\n endAngle: Math.PI / 2\n })\n\n return {\n d: htl.svg``,\n b: () => htl.svg`\n \n \n `\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"viewof paddings = Inputs.form({\n square: Inputs.range([0, 150], {label: \"Square\", step: 2, value: 56}),\n circle: Inputs.range([50, 150], {label: \"Circle\", step: 2, value: 124}),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"htl.html`

\n ${avatarSquare(ids.option1)}\n ${avatarCircle(ids.option1)}\n ${avatarSquare(ids.option2)}\n ${avatarCircle(ids.option2)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"### Grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"{\n const rows = 5;\n const columns = 5;\n const symbolLength = TILE_SIZE * 2\n const symbols = []\n\n const isHighlighted = (x, y) => x === ((columns - 1) / 2) && y === ((rows - 1) / 2)\n const getStyles = (x, y) => !isHighlighted(x, y) ? \"filter: grayscale(0.75); opacity: 0.1\" : \"\" \n\n for (let x = 0; x < columns; ++x) {\n for (let y = 0; y < rows; ++y) {\n symbols.push(htl.svg``)\n }\n }\n\n const length = symbolLength * (rows - 2.5)\n return htl.svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"---\n## Options","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"height = TILE_SIZE * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"colors = [\"#7d869c\",\"#f1e9db\",\"#fe4a49\",\"#4c2c69\", \"#13293D\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"