2e:null 2f:["$","title",null,{"children":"single stroke font | Tom Larkworthy | Observable"}] 34:T76d,matsToPath = { /** * Returns an SVG path string of a line. * @param ps The line endpoints. */ function getLinePathStr(ps) { let [[x0, y0], [x1, y1]] = ps; return `M${round(x0)} ${round(y0)} L${round(x1)} ${round(y1)}`; } /** * Returns an SVG path string of a quadratic bezier curve. * @param ps The quadratic bezier control points. */ function getQuadBezierPathStr(ps) { let [[x0, y0], [x1, y1], [x2, y2]] = ps; return `M${round(x0)} ${round(y0)} Q${round(x1)} ${round(y1)} ${round( x2 )} ${round(y2)}`; } /** * Returns an SVG path string of a cubic bezier curve. * @param ps The cubic bezier control points. */ function getCubicBezierPathStr(ps) { let [[x0, y0], [x1, y1], [x2, y2], [x3, y3]] = ps; return `M${round(x0)} ${round(y0)} C${round(x1)} ${round(y1)} ${round( x2 )} ${round(y2)} ${round(x3)} ${round(y3)}`; } /** * Returns a function that draws an array of MAT curves on an SVG element. * @param mats An array of MATs to draw. * @param svg The SVG element on which to draw. * @param type The type of MAT to draw. This simply affects the class on the * path element. */ function drawMats(mats) { const paths = []; mats.forEach(f); /** * Draws a MAT curve on an SVG element. */ function f(mat) { let cpNode = mat.cpNode; if (!cpNode) { return; } let fs = [ , , getLinePathStr, getQuadBezierPathStr, getCubicBezierPathStr ]; flo_mat.traverseEdges(cpNode, function (cpNode) { if (flo_mat.isTerminating(cpNode)) { return; } let bezier = flo_mat.getCurveToNext(cpNode); if (!bezier) { return; } paths.push(fs[bezier.length](bezier)); }); } return paths.join(); } return drawMats; }35:T4a9,DecimalPrecision2 = (function () { if (Number.EPSILON === undefined) { Number.EPSILON = Math.pow(2, -52); } if (Math.sign === undefined) { Math.sign = function (x) { return (x > 0) - (x < 0) || +x; }; } return { // Decimal round (half away from zero) round: function (num, decimalPlaces) { var p = Math.pow(10, decimalPlaces || 0); var n = num * p * (1 + Number.EPSILON); return Math.round(n) / p; }, // Decimal ceil ceil: function (num, decimalPlaces) { var p = Math.pow(10, decimalPlaces || 0); var n = num * p * (1 - Math.sign(num) * Number.EPSILON); return Math.ceil(n) / p; }, // Decimal floor floor: function (num, decimalPlaces) { var p = Math.pow(10, decimalPlaces || 0); var n = num * p * (1 + Math.sign(num) * Number.EPSILON); return Math.floor(n) / p; }, // Decimal trunc trunc: function (num, decimalPlaces) { return (num < 0 ? this.ceil : this.floor)(num, decimalPlaces); }, // Format using fixed-point notation toFixed: function (num, decimalPlaces) { return this.round(num, decimalPlaces).toFixed(decimalPlaces); } }; })()36:[] 32:{"id":"3320366aab57935b","slug":"single-stroke-font","title":"single stroke font","thumbnail":"b9ad57efc13db7caf76c44998d1410d36baa66d8c9de002ae554098431e681db","access_level":"public","create_time":"$D2024-07-12T19:14:58.202Z","update_time":"$D2024-07-18T23:49:31.586Z","view_time":null,"first_public_time":"$D2024-07-13T06:07:56.584Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024"},"version":564,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}],"members":[{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null,"role":"editor"},{"type":"team","id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ac5d5920401a8f5b","slug":"lazer-cutting","title":"lazer cutting","owner":{"id":"7db5ed2b0697d645","login":"tomlarkworthy","name":"Tom Larkworthy"}},"type":"notebook","body":{"title":"single stroke font","cells":[{"id":454,"value":"

single stroke font

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"viewof fontSource = Inputs.bind(\n Inputs.text({\n label: \"font *\",\n width: 600\n }),\n localStorageView(\"ssf_font\", {\n defaultValue:\n \"http://fonts.gstatic.com/s/roboto/v15/7MygqTe2zs9YkP0adA9QQQ.ttf\"\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"viewof text = Inputs.text({ label: \"Text\", value: \"single stroke font\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"viewof scale = Inputs.range([0, 10], { label: \"scale\", value: 1.5 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"\\* A list of _.ttf_ URLs is [here](https://gist.github.com/karimnaaji/b6c9c9e819204113e9cabf290d580551)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":561,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"## Open Type (convert .ttf to SVG)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"num = {\n let i = 0;\n while (true) {\n i = (i + 1) % 10;\n yield i;\n await new Promise((r) => setTimeout(r, 100));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"opentype = require(\"opentype.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"font = new Promise((r, e) =>\n opentype.load(fontSource.replaceAll(\"http://\", \"https://\"), (err, font) => {\n if (err) e(err);\n r(font);\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"function fontPath(digit) {\n const path = font.getPath(digit.toString(), 0, 100, 100); // Get the path for the digit\n const svgPath = path.toSVG(); // Convert the path to an SVG path string\n return svgPath.match(/\"(.*)\"/)[1];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"path = fontPath(num)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"shape = svg`