30:T620,html` `31:[] 2e:{"title":"SVG Faux-Squircle","cells":[{"id":0,"value":"# SVG Faux-Squircle\n\nSimple experiment to make a squircle-like rounded rectangle using Bézier curves for corner smoothing and rendering ticks at evenly spaced offsets using [Paper.js](http://paperjs.org/).\n\nSee also [@serlinkzero/faux-superellipse](https://observablehq.com/@serlinkzero/faux-superellipse)","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"viewof w = Inputs.range([20, width], { label: \"Width\", value: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"viewof h = Inputs.range([20, 500], { label: \"Height\", value: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"viewof n = Inputs.range([0, 500], { label: \"Ray count\", step: 1, value: 200 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof inner = Inputs.range([-50, 50], { label: \"Inner offset\", value: 6 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"viewof out = Inputs.range([-50, 50], { label: \"Outer offset\", value: 12 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"viewof r = Inputs.range([0, 500], { label: \"Radius\", value: 150 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof t = Inputs.range([-500, 500], { label: \"Corner bias\", value: 20 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"viewof margin = Inputs.range([0, 200], { value: 40, label: \"Margin\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":321,"value":"viewof showHandles = Inputs.toggle({ label: \"Show handles\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"rx = Math.min(r, w / 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":374,"value":"ry = Math.min(r, h / 2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d = [\n `M${rx} 0`,\n `C${t} 0 0 ${t} 0 ${ry}`,\n `V${h - ry}`,\n `C0 ${h - t} ${t} ${h} ${rx} ${h}`,\n `H${w - rx}`,\n `C${w - t} ${h} ${w} ${h - t} ${w} ${h - ry}`,\n `V${ry}`,\n `C${w} ${t} ${w - t} 0 ${w - rx} 0`,\n `H${rx}`,\n `Z`\n].join(\" \")","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"getT = d3.scaleLinear([0, n - 1], [0, cp.length])","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"totalLength = cp.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"cpLengthRanges = {\n let t = 0;\n\n return cp.curves.map((b) => {\n const start = t;\n const end = b.length + t;\n t = end;\n return [start, end];\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"cp = new ps.CompoundPath(d)","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"tToCP = (t) => {\n const idx = cpLengthRanges.findIndex(([min, max]) => t >= min && t <= max);\n const b = cp.curves[idx];\n return [b, cpLengthRanges[idx]];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"paper = require(\"paper\").catch(() => window.paper)","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"ps = {\n const canvas = DOM.canvas(0, 0);\n const ps = new paper.PaperScope();\n ps.setup(canvas);\n return ps;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}