2c:null 2d:["$","title",null,{"children":"That colorful font | Kelley van Evert | Observable"}] 32:T2c8a,letters = { return { " ": { width: th, el: () => svg``, }, f: { width: th + th, el: () => svg` `, }, t: { width: th + th, el: () => svg` `, }, k: { width: th+s+th, el: () => { return svg` ${flipv(u(-th))} `; } }, z: { width: s_a2o(h, 1.7) + th, el: () => svg` `, }, x: { width: s_a2o(h, 1.7) + th, el: () => svg` `, }, x: { width: s_a2o(h, 1.7) + th, el: () => svg` `, }, v: { width: 2*s_a2o(h) + th, el: () => svg` `, }, s: { width: 2*th + 2*((h-th-th-th)/4) + sr, el: () => { const r = (h-th-th-th)/4; return svg` `; }, }, r: { width: th+sr + describeArc(0, 0, sr+th, -90, slant+slant, true).start.x, el: () => svg` `, }, q: { width: h, el: () => svg` ${o()} `, }, p: { width: h, el: () => svg` ${o()} `, }, l: { width: th, el: () => svg` `, }, i: { width: th, el: () => svg` `, }, j: { width: th, el: () => svg` ${j(ls)} `, }, e: { width: h, el: () => { // not sure if this is necessary, but, keeping on the safe side :) const id = "c" + Math.round(Math.random() * 10000); function circlePart(innerPart) { return ``; } return svg` ${circlePart(true)} ${circlePart(false)} `; } }, c: { width: h, el: () => svg` `, }, d: { width: h, el: () => svg` ${o()} `, }, b: { width: h, el: () => svg` ${o()} `, }, g: { width: th+l+th, el: () => svg` ${o()} ${j(l)} `, }, n: { width: th+s+th, el: () => svg` ${flipv(u())} `, }, M: { width: th+s+th+s+th, el: () => svg` ${flipv(u(a))} ${flipv(u(a))} `, }, m: { width: th+s+th+s+th, el: () => svg` ${flipv(u())} ${flipv(u())} `, }, y: { width: th+s+th, el: () => svg` ${u()} ${j()} `, }, h: { width: th + s + th, el: () => svg` ${flipv(u())} `, }, a: { width: h, el: () => svg` ${o()} `, }, W: { width: th+s+th+s+th, el: () => svg` ${u(a)} ${u(a)} `, }, w: { width: th+s+th+s+th, el: () => svg` ${u()} ${u()} `, }, u: { width: th+s+th, el: () => svg` ${u()} `, }, o: { width: h, el: () => svg`${o()}`, }, }; function o() { return svg``; } function j(cd = s) { return svg``; } function u(ascend = 0) { return svg``; } function fliph(el, mid = h/2) { return svg`${el}`; } function flipv(el, mid = h/2) { return svg`${el}`; } }33:[] 30:{"id":"66a4c9234c000acc","slug":"that-colorful-font","title":"That colorful font","thumbnail":"719fd5c84183d3a20e1db18064b8fa2971914b8282c9566731f9f8269963de12","access_level":"public","create_time":"$D2021-03-13T19:47:05.353Z","update_time":"$D2021-03-19T23:04:34.776Z","view_time":null,"first_public_time":"$D2021-03-13T21:35:25.778Z","has_unpublished_edits":null,"fork":false,"stars":70,"starred":false,"owner":{"type":"team","id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":"starter_2024"},"version":1558,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null}],"members":[{"type":"individual","id":"a35690ff73833989","login":"kelleyvanevert","name":"Kelley van Evert","avatar_url":"https://avatars-next.observableusercontent.com/86df2bc54dd099fad6826dfcf7ae3dd97c5e0cdcf0cf3e0ac85ecd13e1938db2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"5a513ea41d6d0d7e","slug":"typography","title":"Typography","owner":{"id":"cdda271b76654961","login":"kelleyvanevert","name":"Kelley van Evert"}},"type":"notebook","body":{"titling":"auto","title":"That colorful font","cells":[{"id":0,"value":"md`# That colorful font`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`That colorful font from the browser extension, [What have you made today?](https://github.com/tholman/what-have-you-made-today)\n\nThis is the original font face, I think: [Type With Pride](https://www.typewithpride.com/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"viewof txt = textarea({\n title: \"Text to write\",\n value: \"Welschy\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"{\n let dx = 0; let dx_max = 0;\n let y = 0;\n const elements = [];\n\n for (const ch of txt.split(\"\")) {\n if (ch === \"\\n\") {\n dx = 0;\n y++;\n } else if (letters[ch]) {\n const { width, el } = letters[ch];\n elements.push(svg`${el()}`);\n dx += width + ls;\n dx_max = Math.max(dx_max, dx);\n }\n }\n\n dx_max -= ls;\n\n const pad = 20;\n\n return svg`\n \n ${elements}\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1485,"value":"viewof params = inputsGroup({\n slant: slider({\n min: 0,\n max: 45,\n step: 0.1,\n value: 22,\n title: \"Slant\",\n }),\n th: slider({\n min: 1,\n max: 50,\n step: 0.1,\n value: 32,\n title: \"Stroke thickness\",\n }),\n s: slider({\n min: 1,\n max: 50,\n step: 0.1,\n value: 39,\n title: \"Diameter of smaller hole\",\n }),\n l: slider({\n min: 1,\n max: 100,\n step: 0.1,\n value: 51,\n title: \"Diameter of O-hole\",\n }),\n a: slider({\n min: 1,\n max: 100,\n step: 0.1,\n value: 66,\n title: \"Height of ascender\",\n }),\n d: slider({\n min: 1,\n max: 100,\n step: 0.1,\n value: 75,\n title: \"Height of descender\",\n }),\n ls: slider({\n min: -50,\n max: 100,\n step: 0.1,\n value: 18,\n title: \"Letter spacing\",\n }),\n lns: slider({\n min: -50,\n max: 100,\n step: 0.1,\n value: 23,\n title: \"Line spacing\",\n }),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"slant=params.slant","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"th=params.th","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"s=params.s","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"l=params.l","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"a=params.a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"d=params.d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"ls=params.ls","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"lns=params.lns","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"sr = s/2 // small hole radius","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"lr = l/2 // large hole diameter","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"rd = lr - sr // radius diff","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"h = th+l+th // height of o/x/etc","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":835,"value":"sa = slant * (Math.PI/180)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"// slant: adjacent len to hypothenuse len\nfunction s_a2h(w, m = 1) {\n return w / Math.cos(m * slant * (Math.PI/180));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"// slant: adjacent len to opposite len\nfunction s_a2o(h, m = 1) {\n return h * Math.tan(m * slant * (Math.PI/180));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"// slanted stroke's top width (if vertical) or side height (if horizontal)\nsth = s_a2h(th)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"colors = ({\n blue: \"#00B3E3\",\n pink: \"#DA3AB3\",\n red: \"#FF4338\",\n orange: \"#FF6B00\",\n green: \"#05CE7C\",\n yellow: \"#FFC843\",\n background: \"#f6f3f2\",\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"function draws(letters) {\n let move = 0;\n return svg`${letters.map((letter) => {\n const l = svg`${draw(letter)}`;\n move += letter.width + ls;\n return l;\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"function draw({ strokes }) {\n return svg`${strokes.map(([color, ...d]) => {\n return svg``;\n })}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"function describeArc(x, y, radius, startAngle, endAngle, reverse = false, startCommand = \"M\", flags) {\n function polarToCartesian(centerX, centerY, radius, angleInDegrees) {\n const angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;\n\n return {\n x: centerX + (radius * Math.cos(angleInRadians)),\n y: centerY + (radius * Math.sin(angleInRadians))\n };\n }\n\n const start = polarToCartesian(x, y, radius, endAngle);\n const end = polarToCartesian(x, y, radius, startAngle);\n \n const largeArcFlag = (endAngle - startAngle <= 180 ? \"0\" : \"1\");\n\n return {\n start,\n end,\n d: reverse\n // not sure if this is actually valid, btw\n ? [\n startCommand, end.x, end.y, \n \"A\", radius, radius, flags || [0, largeArcFlag, 1].join(\" \"), start.x, start.y\n ].join(\" \")\n : [\n startCommand, start.x, start.y, \n \"A\", radius, radius, flags || [0, largeArcFlag, 0].join(\" \"), end.x, end.y\n ].join(\" \")\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1483,"value":"function inputsGroup(views) {\n const form = html`

\n ${Object.entries(views).map(([name, view]) => {\n return html`

${view}

`;\n })}\n

`;\n\n form.oninput = () => {\n form.value = Object.entries(views).reduce((value, [name, view]) => {\n value[name] = view.value;\n return value;\n }, {});\n };\n form.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"import { slider } from \"@kelleyvanevert/pretty-anime-js-sliders\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"import { textarea } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"