2d:null 2e:["$","title",null,{"children":"SVG numeral sketches | Toph Tucker | Observable"}] 33:Tb99,// cf. https://bl.ocks.org/mbostock/ad70335eeef6d167bc36fd3c04378048, // https://bl.ocks.org/mbostock/1095795 { await visibility(); const svg = d3 .select(DOM.element("svg")) .attr("width", width) .attr("height", width / 2); const g = svg .append("g") .attr("transform", `translate(${width / 2}, ${width / 4})`); const prepPath = path => path.map(({ type, values }) => { let x, y; if (type === "C") { x = values[4]; y = values[5]; } else { x = values[0]; y = values[1]; } return { type, values, x, y }; }); const numbers = normalizedPaths .map((path, i) => scaleObj( x => x * 20 + 50 * Math.cos((i / 10) * Math.PI * 2), y => y * 30 + 50 * Math.sin((i / 10) * Math.PI * 2) )(path) ) // .map((path, i) => scale( // x => x * 20 + (i - 5) * 40, // y => y * 30 // )(path)) .map(prepPath); let nodes = []; let links = []; const simulation = d3 .forceSimulation(nodes) .force("link", d3.forceLink(links).distance(20)) .force("charge", d3.forceManyBody().strength(-5)) // .force("center", d3.forceCenter()) .on("tick", ticked); let pathSel = g.selectAll("path"); restart(); let strength = -5; const interval = d3.interval(function() { const randomPath = normalizedPaths[Math.floor(Math.random() * normalizedPaths.length)]; const rx = (Math.random() - 0.5) * 100; const ry = (Math.random() - 0.5) * 100; numbers.push( prepPath(scaleObj(x => x * 20 + rx, y => y * 30 + ry)(randomPath)) ); if (numbers.length > 20) interval.stop(); // if (numbers.length > 20) { // simulation.force("charge").strength(strength) // strength *= -1.5 // } restart(); }, 500); function restart() { let nodes = d3.merge(numbers).filter(d => d.type !== "Z"); let links = d3.merge( numbers.map(number => d3 .pairs(number.filter(d => d.type !== "Z")) .map(([source, target]) => ({ source, target })) ) ); // Apply the general update pattern to the paths. pathSel = pathSel.data(numbers); pathSel.exit().remove(); pathSel = pathSel .enter() .append("path") .merge(pathSel); // Update and restart the simulation. simulation.nodes(nodes); simulation.force("link").links(links); simulation.alpha(1).restart(); } function ticked() { pathSel.attr("d", path => { const newPath = path.map(({ type, values, x, y }) => { let newValues; if (type === "Z") { newValues = values; } else if (type === "C") { newValues = values.map( (d, i) => d + (i % 2 ? y - values[5] : x - values[4]) ); } else { newValues = [x, y]; } return { type, values: newValues }; }); return stringify(newPath); }); } return svg.node(); }34:T4dc,{ const w = 32 / 2; const h = 48 / 2; const time = Date.now(); const timeScale = d3 .scaleLinear() .domain([250, 1000]) .range([1, 0]) .clamp(true); let t = 0; while (t < timeScale.domain()[1]) { t = Date.now() - time; const scaleX = (d, i) => x => +d ? x * w * ((d / base) * base ** i) ** timeScale(t) : x * w * (1 - timeScale(t)); const scaleY = y => y * h; const digits = n .toString(base) .split("") .reverse(); yield svg``; } }35:Tbd8,{ await visibility(); const N = 400; const w = 20; const h = 20; const makeScaleX = (d, i, t) => x => +d ? x * w * ((d / base) * base ** i) ** (1 - t) : x * w * t; const scaleY = y => y * h; const svg = d3 .select(DOM.element("svg")) .attr("width", width) .attr("height", width / 2) .attr("viewBox", `${width * 0.9} 0 ${width * 0.1} ${width / 4}`); svg .transition() .delay(2000) .duration(2000) .attr("viewBox", `0 0 ${width} ${width / 2}`); const g = svg.append("g"); g.transition() .duration(30000) .attr("transform", `translate(0, ${-(N + 1) * h + width / 2})`); g.selectAll(".n") .data(d3.range(N).map(d => d + 1)) .enter() .append("g") .attr("class", "n") .attr("transform", d => `translate(${width}, ${d * h})`) .each(function(n) { const sel = d3.select(this); if (n < 30) { sel .selectAll(".tick") .data(d3.range(n)) .enter() .append("path") .attr("class", "tick") .attr("d", d => `M${-d * (w / base)} 0 V ${h - 1}`) .attr("stroke-width", 0.5) .attr("opacity", 0) .transition() .delay(d => (n * n + d) * (100 / n)) .attr("opacity", 1) .transition() .delay(1000) .attr("opacity", 0); } const digits = n .toString(base) .split("") .reverse(); sel .selectAll(".digit") .data(digits) .enter() .append("path") .attr("class", "digit") .each(function(d, i) { const sel = d3.select(this); const t = 0; const scaleX = makeScaleX(d, i, t); const pathString = stringify( scaleObj(scaleX, scaleY)(normalizedPaths[d]) ); const sumOfPreviousDigits = digits .slice(0, i) .reduce((acc, dd, ii) => acc + makeScaleX(dd, ii, t)(1), 0); const transformX = -(scaleX(1) + sumOfPreviousDigits); sel .attr("d", pathString) .attr("transform", `translate(${transformX}, 0)`); }) .attr("opacity", 0) .transition() .delay(1250 + Math.min(n, 90) * 100) .attr("opacity", 1) .transition() .delay(2000 + (n > 90 ? n * 35 : 0)) .duration(1000) .tween("d.morph", function(d, i) { const sel = d3.select(this); return function(t) { const scaleX = makeScaleX(d, i, t); const pathString = stringify( scaleObj(scaleX, scaleY)(normalizedPaths[d]) ); const sumOfPreviousDigits = digits .slice(0, i) .reduce((acc, dd, ii) => acc + makeScaleX(dd, ii, t)(1), 0); const transformX = -(scaleX(1) + sumOfPreviousDigits); sel .attr("d", pathString) .attr("transform", `translate(${transformX}, 0)`); }; }); }); return svg.node(); }36:T481,paths = [ "M0.5 25C0.5 13.5 4.57257 0.5 16 0.5C27.4274 0.5 31.5 13.5726 31.5 25C31.5 35.5 26.9416 47.5 16 47.5C5.05834 47.5 0.5 35.9417 0.5 25Z", "M0 11L16 1L16 47.5M16 47.5H0M16 47.5H32", "M0 15C1 15 5 0.5 16 0.5C27 0.5 33.5 13 27.5 20.5C21.5 28 1 47.5 0 47.5H32", "M0.500006 13.5C0.33334 9.5 7.3 0.5 16.5 0.5C25.7 0.5 31.5 7.5 31.5 13.5C31.5 19.5 27.3 24 16.5 24C21.1667 23.8333 31.5 25.8 31.5 35C31.5 44.2 23 47.5 16.5 47.5C12.8333 47.6667 0.500005 43.8 0.500005 35", "M24 48V1.5L1 34.5H32", "M31.5 0.5H0.500008V24.5C9 13.5 31.5 14.5951 31.5 31C31.5 52 0.500008 52.5 0.5 34.5", "M22 0.5C9.5 0.5 0.5 17 0.5 31M0.5 31C0.5 45 8.5 47.5 16 47.5C23.5 47.5 31.5 42.1169 31.5 33C31.5 15 0.5 17 0.5 31Z", "M0.5 0.5H31L9.5 48", "M16 0.5C8.34494 0.542363 0.653851 4.19103 0.499979 12C0.343769 19.9276 8.07082 24 16 24C24 24 31.5 28 31.5 35C31.5 42 24.1214 47.2596 16.5 47.5C8.57476 47.75 0.499996 44.5 0.499979 34C0.499962 23.5 31.5 25.5 31.5 13C31.5 4.8246 24.1753 0.454758 16 0.5Z", "M7.50001 47.5C15.5 39.5 31.5 28.5 31.5 18M31.5 18C31.5 7 25 0.5 16.5 0.5C8 0.5 0.5 9.5 0.5 18C0.5 25.4225 8.99999 32 16.5 32C23.4859 32 31.5 25 31.5 18Z" ]37:[] 31:{"id":"327e5f3115fbbd6d","slug":"svg-numeral-sketches","title":"SVG numeral sketches","thumbnail":"a038306aec84471f1786427374f18210537423f5f878516f2feb3e7399e7e60a","access_level":"public","create_time":"$D2019-06-18T22:09:52.745Z","update_time":"$D2022-05-22T22:43:44.752Z","view_time":null,"first_public_time":"$D2019-06-24T01:57:46.842Z","fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2024"},"version":1060,"publish_version":1060,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ee48d2d87f751f74","slug":"sketches","title":"Sketches","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"SVG numeral sketches","cells":[{"id":839,"value":"md`# SVG numeral sketches`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"html`${paths.map(path => svg``)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`I initially drew the numerals in this [Figma document](https://www.figma.com/file/U1j1YqHxXGTpo7QtqhCz9oeG/Numerals?node-id=0%3A1) (not shared but there’s nothing there that isn’t here) based loosely on Roboto. I might wanna remove the mid-path \\`M\\` commands (just because a single continuous path is easier to manipulate, I guess), and align better with edges.\n\nI’ve factored out the SVG path manipulation functions to [Pathstuff](https://observablehq.com/@tophtucker/pathstuff).\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":868,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"md`Base (max of 10 until I draw more glyphs):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"viewof base = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":888,"value":"md`Number:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"viewof n = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":911,"value":"{\n const duration = 400\n const sel = d3.select(DOM.element(\"svg\"))\n .attr(\"width\", width)\n .attr(\"height\", 50)\n \n const digits = n.toString(base).split(\"\").reverse()\n sel.selectAll(\".digit\").data(digits).enter().append(\"path\")\n .attr(\"d\", d => paths[d])\n .attr(\"transform\", (d, i) => `translate(${width - (32 + 4) * (i + 1)}, 0)`)\n .each(function(d, i) {\n const len = this.getTotalLength()\n d3.select(this)\n .attr(\"stroke-dasharray\", `${len} ${len}`)\n .attr(\"stroke-dashoffset\", len)\n })\n .transition()\n .duration(duration)\n .delay((d, i, arr) => (arr.length - i - 1) * duration)\n .ease(d3.easeLinear)\n .attr(\"stroke-dashoffset\", 0)\n \n \n return sel.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"parsedPaths = paths.map(parse).map(normalizeHVObj)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"// i drew the paths from figma in 32x48 frames\nnormalizedPaths = parsedPaths.map(scaleObj(x => x / 32, y => y / 48))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"stringifiedPaths = parsedPaths.map(stringify)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"import {\n parse,\n stringify,\n scaleObj,\n normalizeHVObj\n} from \"@tophtucker/pathstuff\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"