31:T65e,md`# Ti_kZ_ standard line dash patterns, for SVG I needed some line dash patterns, and found in [this question on the ${tex`\TeX`} stack exchange](https://tex.stackexchange.com/a/45276) that the standard dash patterns in [Ti_kZ_](https://en.wikipedia.org/wiki/PGF/TikZ) looked good. The definitions of these patterns are in ${tex`\TeX`}, from the file \`tikz.code.tex\`: \`\`\` \tikzstyle{solid}= [dash pattern=] \tikzstyle{dotted}= [dash pattern=on \\pgflinewidth off 2pt] \tikzstyle{densely dotted}= [dash pattern=on \\pgflinewidth off 1pt] \tikzstyle{loosely dotted}= [dash pattern=on \\pgflinewidth off 4pt] \tikzstyle{dashed}= [dash pattern=on 3pt off 3pt] \tikzstyle{densely dashed}= [dash pattern=on 3pt off 2pt] \tikzstyle{loosely dashed}= [dash pattern=on 3pt off 6pt] \tikzstyle{dashdotted}= [dash pattern=on 3pt off 2pt on \\the\\pgflinewidth off 2pt] \tikzstyle{densely dashdotted}= [dash pattern=on 3pt off 1pt on \\the\\pgflinewidth off 1pt] \tikzstyle{loosely dashdotted}= [dash pattern=on 3pt off 4pt on \\the\\pgflinewidth off 4pt] \`\`\` Below are translations of these definitions into SVG stroke attributes, with the addition of - variable stroke width, - round line caps, with variable compensation to make the spacing between dashes appear the same as with square line caps. I decided to use the term _sparse_ instead of _loose_ for describing sparser patterns, because I found it more accurate. Further down are also some bonus patterns, including customizable morse and binary. :) `32:T6e0,function illustrateDashPatterns(patterns) { const fontSize = 12; const horizontalMargin = 20; const lineHeight = maxStrokeWidth * 1.25; const verticalMargin = maxStrokeWidth * 0.8; const textHeight = 2 * fontSize; const rowHeight = 2 * (textHeight + lineHeight + verticalMargin); const lineOffset = textHeight + lineHeight / 2; const innerWidth = width - 2 * horizontalMargin; const height = patterns.length * rowHeight; const theSvg = DOM.svg(width, height); const g = svg``; theSvg.appendChild(g); patterns.forEach((pattern, i) => { const squareLineAttributes = createSquareLineAttributes( pattern.dashLengths, strokeWidth ); g.appendChild(svg` ${pattern.name} ${squareLineAttributes} `); const roundLineAttributes = createRoundLineAttributes( pattern.dashLengths, strokeWidth, capSpaceCompensation ); g.appendChild(svg` ${ pattern.name } (rounded) ${roundLineAttributes} `); }); return theSvg; }33:T1486,morseEncodings = [ { "character": "A", "encoding": "·−" }, { "character": "B", "encoding": "−···" }, { "character": "C", "encoding": "−·−·" }, { "character": "D", "encoding": "−··" }, { "character": "E", "encoding": "·" }, { "character": "F", "encoding": "··−·" }, { "character": "G", "encoding": "−−·" }, { "character": "H", "encoding": "····" }, { "character": "I", "encoding": "··" }, { "character": "J", "encoding": "·−−−" }, { "character": "K", "encoding": "−·−" }, { "character": "L", "encoding": "·−··" }, { "character": "M", "encoding": "−−" }, { "character": "N", "encoding": "−·" }, { "character": "O", "encoding": "−−−" }, { "character": "P", "encoding": "·−−·" }, { "character": "Q", "encoding": "−−·−" }, { "character": "R", "encoding": "·−·" }, { "character": "S", "encoding": "···" }, { "character": "T", "encoding": "−" }, { "character": "U", "encoding": "··−" }, { "character": "V", "encoding": "···−" }, { "character": "W", "encoding": "·−−" }, { "character": "X", "encoding": "−··−" }, { "character": "Y", "encoding": "−·−−" }, { "character": "Z", "encoding": "−−··" }, { "character": "0", "encoding": "−−−−−" }, { "character": "1", "encoding": "·−−−−" }, { "character": "2", "encoding": "··−−−" }, { "character": "3", "encoding": "···−−" }, { "character": "4", "encoding": "····−" }, { "character": "5", "encoding": "·····" }, { "character": "6", "encoding": "−····" }, { "character": "7", "encoding": "−−···" }, { "character": "8", "encoding": "−−−··" }, { "character": "9", "encoding": "−−−−·" }, { "character": ".", "encoding": "·−·−·−" }, { "character": ",", "encoding": "−−··−−" }, { "character": "?", "encoding": "··−−··" }, { "character": "'", "encoding": "·−−−−·" }, { "character": "!", "encoding": "−·−·−−" }, { "character": "/", "encoding": "−··−·" }, { "character": "(", "encoding": "−·−−·" }, { "character": ")", "encoding": "−·−−·−" }, { "character": "&", "encoding": "·−···" }, { "character": ":", "encoding": "−−−···" }, { "character": ";", "encoding": "−·−·−·" }, { "character": "=", "encoding": "−···−" }, { "character": "+", "encoding": "·−·−·" }, { "character": "-", "encoding": "−····−" }, { "character": "_", "encoding": "··−−·−" }, { "character": '"', "encoding": "·−··−·" }, { "character": "$", "encoding": "···−··−" }, { "character": "@", "encoding": "·−−·−·" }, { "character": "À", "encoding": "·−−·−" }, { "character": "Ä", "encoding": "·−·−" }, { "character": "Å", "encoding": "·−−·−" }, { "character": "Ą", "encoding": "·−·−" }, { "character": "Æ", "encoding": "·−·−" }, { "character": "Ć", "encoding": "−·−··" }, { "character": "Ĉ", "encoding": "−·−··" }, { "character": "Ç", "encoding": "−·−··" }, { "character": "CH", "encoding": "−−−−" }, { "character": "Đ", "encoding": "··−··" }, { "character": "Ð", "encoding": "··−−·" }, { "character": "É", "encoding": "··−··" }, { "character": "È", "encoding": "·−··−" }, { "character": "Ę", "encoding": "··−··" }, { "character": "Ĝ", "encoding": "−−·−·" }, { "character": "Ĥ", "encoding": "−−−−" }, { "character": "Ĵ", "encoding": "·−−−·" }, { "character": "Ł", "encoding": "·−··−" }, { "character": "Ń", "encoding": "−−·−−" }, { "character": "Ñ", "encoding": "−−·−−" }, { "character": "Ó", "encoding": "−−−·" }, { "character": "Ö", "encoding": "−−−·" }, { "character": "Ø", "encoding": "−−−·" }, { "character": "Ś", "encoding": "···−···" }, { "character": "Ŝ", "encoding": "···−·" }, { "character": "Š", "encoding": "−−−−" }, { "character": "Þ", "encoding": "·−−··" }, { "character": "Ü", "encoding": "··−−" }, { "character": "Ŭ", "encoding": "··−−" }, { "character": "Ź", "encoding": "−−··−·" }, { "character": "Ż", "encoding": "−−··−" } ]34:[] 2f:{"title":"TikZ standard line dash patterns, for SVG","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"createWidgets()","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"illustrateDashPatterns(tikzStandardDashPatterns)","pinned":false,"hidden":false,"mode":"ojs"},{"id":409,"value":"createWidgets()","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"tikzStandardDashPatterns = [\n { name: \"Solid\", dashLengths: [] },\n { name: \"Dotted\", dashLengths: [1, 2] },\n { name: \"Densely dotted\", dashLengths: [1, 1] },\n { name: \"Sparsely dotted\", dashLengths: [1, 4] },\n { name: \"Dashed\", dashLengths: [3, 3] },\n { name: \"Densely dashed\", dashLengths: [3, 1] },\n { name: \"Sparsely dashed\", dashLengths: [3, 6] },\n { name: \"Dashdotted\", dashLengths: [3, 2, 1, 2] },\n { name: \"Densely dashdotted\", dashLengths: [3, 1, 1, 1] },\n { name: \"Sparsely dashdotted\", dashLengths: [3, 4, 1, 4] }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"md`And here are some bonus patterns, including morse code and some form of binary. :)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"createWidgets()","pinned":false,"hidden":false,"mode":"ojs"},{"id":457,"value":"viewof customText = Inputs.text({\n label: \"Custom text\",\n placeholder: \"To be encoded\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"illustrateDashPatterns(bonusPatterns)","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"bonusPatterns = [\n generateMorseDashPattern(customText || \"Never gonna give you up\"),\n generateBinaryDashPattern(customText || \"Never gonna let you down\"),\n generateMorseDashPattern(\"SOS\"),\n {\n name: \"Fibonacci\",\n dashLengths: fib(8).flatMap(x => [x, 1])\n }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"function fib(n) {\n const s = Array(n);\n s[0] = 1;\n s[1] = 1;\n for (let i = 2; i < n; ++i) {\n s[i] = s[i - 1] + s[i - 2];\n }\n s.length = n;\n return s;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"fib(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"maxStrokeWidth = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"viewof strokeWidth = Inputs.input(8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"viewof capSpaceCompensation = Inputs.input(0.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":363,"value":"function createStrokeWidthWidget() {\n return Inputs.bind(\n Inputs.range([0.5, maxStrokeWidth], {\n label: \"Stroke width\",\n value: 8,\n step: 0.1\n }),\n viewof strokeWidth\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"function createCapSpaceCompensationWidget() {\n return Inputs.bind(\n Inputs.range([0, 1], {\n label: \"Line cap space compensation\",\n value: 0.1,\n step: 0.01\n }),\n viewof capSpaceCompensation\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":400,"value":"function createWidgets() {\n return html`${createStrokeWidthWidget()} ${createCapSpaceCompensationWidget()}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"function createRoundLineAttributes(\n dashLengths,\n strokeWidth,\n capSpaceCompensation = 0\n) {\n if (dashLengths.length === 0) {\n return `stroke-width=${strokeWidth} stroke-linecap=\"round\"`;\n }\n const a = 1 - capSpaceCompensation;\n const b = -1 + capSpaceCompensation;\n const processedDashLengths = dashLengths.map((x, i) => {\n // To get the right dash lengths, we need to compensate for the line caps, which extend from the ends of the dashes\n const capCompensation = i % 2 ? a : b;\n return (Math.max(x + capCompensation, 0) * strokeWidth).toFixed(1);\n });\n\n const dashOffset = (capSpaceCompensation * strokeWidth - strokeWidth) / 2;\n return `stroke-dasharray=\"${processedDashLengths.join(\n \", \"\n )}\" stroke-width=${strokeWidth} stroke-linecap=\"round\" stroke-dashoffset=${dashOffset.toFixed(\n 1\n )}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"function createSquareLineAttributes(dashLengths, strokeWidth) {\n if (dashLengths.length === 0) {\n return `stroke-width=${strokeWidth}`;\n }\n const processedDashLengths = dashLengths.map(x =>\n (x * strokeWidth).toFixed(1)\n );\n return `stroke-dasharray=\"${processedDashLengths.join(\n \", \"\n )}\" stroke-width=${strokeWidth}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"md`---\n\n## Morse\n\nEncodings from [Wikipedia](https://en.wikipedia.org/wiki/Morse_code#Letters,_numbers,_punctuation,_prosigns_for_Morse_code_and_non-Latin_variants).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"morseEncodingMap = new Map(morseEncodings.map(d => [d.character, d.encoding]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"function textToMorse(text) {\n const missing = morseEncodingMap.get(\"_\");\n return text\n .split(\"\")\n .map(c => morseEncodingMap.get(c.toUpperCase()) || missing);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"function morseToDashLengths(morse) {\n const dashLengths = morse\n .split(\"\")\n .flatMap(c => (c === \"−\" ? [3, 1] : [1, 1]));\n dashLengths[dashLengths.length - 1] *= 2;\n return dashLengths;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":441,"value":"function textToMorseDashLengths(text) {\n const dashLengths = textToMorse(text).flatMap(morseToDashLengths);\n dashLengths[dashLengths.length - 1] *= 2;\n return dashLengths;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"function generateMorseDashPattern(text) {\n return {\n name: `Morse for: ${text}`,\n dashLengths: textToMorseDashLengths(text)\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`---\n\n## Binary`","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"function textToBinary(text) {\n const encoder = new TextEncoder();\n const uint8Array = encoder.encode(text);\n return Array.from(uint8Array)\n .map(x => x.toString(2).padStart(8, \"0\"))\n .join(\"\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"function binaryToDashLengths(binaryString) {\n const dashLenghts = [];\n const characters = binaryString.split(\"\");\n if (characters[0] === \"0\") {\n dashLenghts.push(0);\n }\n let runLength = 1;\n let lastDigit = characters[0];\n for (let i = 1; i < characters.length; ++i) {\n const currentDigit = characters[i];\n if (currentDigit === lastDigit) {\n runLength += 1;\n } else {\n dashLenghts.push(runLength);\n runLength = 1;\n lastDigit = currentDigit;\n }\n }\n dashLenghts.push(runLength);\n\n return dashLenghts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":557,"value":"function binaryToDashLengths2(binaryString) {\n const dashLengths = binaryString\n .split(\"\")\n .flatMap(c => (c === \"0\" ? [1, 1] : [3, 1]));\n dashLengths[dashLengths.length - 1] *= 4;\n\n return dashLengths;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"binaryToDashLengths(\"1010111\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":548,"value":"function textToBinaryDashLengths(text) {\n return binaryToDashLengths2(textToBinary(text));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":552,"value":"function generateBinaryDashPattern(text) {\n return {\n name: `Binary for: ${text}`,\n dashLengths: textToBinaryDashLengths(text)\n };\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}