32:Tc03,# Pathstuff ## Helpers for SVG path commands ${Object.keys( pathstuff ) .map(d => `[${d}](#_${d})`) .join(" ∙ ")} --- These functions bake transformations into an [SVG path’s `d` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d), which you can also pass to a canvas [`Path2D` constructor](https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D). The path string holds a list of commands: move to here, line to there, arc to here; see [Adam Pearce’s visual explanation](https://roadtolarissa.com/blog/2015/02/22/svg-path-strings/). You may not need this: - If you’re doing data visualization, it’s more robust to transform in data-space before [drawing the shapes](https://observablehq.com/collection/@d3/d3-shape). - If you want to scale a path without changing the stroke, you can use [`vector-effect="non-scaling-stroke"`](#noneed). - If you want to chain transformations, you can concatenate transformation strings or [multiply affine transformation matrices](https://bl.ocks.org/1wheel/23934d93046d15a031a74be471620036). But since I have vector illustrations drawn elsewhere that I’d like to pass around as mere strings, I’ve found it helpful. Maybe it’s spiritually analogous to merging or rasterizing layers in Photoshop — lossy, irreversible, simplifying operations conducive to some kind of creative iteration or reduction in cognitive load. Mostly, it has taught me about the underlying path commands that I have used with d3 for so long. I’ve tried to do it without touching the DOM, notionally for performance and portability but also just to learn. Next I gotta get back into matrices! Caveats: I’ve used this in a narrow domain (like [SVG numeral sketches](https://observablehq.com/@tophtucker/svg-numeral-sketches)) and I imagine it may break outside of that. The functions `translate` and `scale` are exact, as far as I know. But `getBBox` is approximate for Béziers and arcs; thus, so are `size` and `center`, which use it. Some functions convert relative to absolute path commands with `toAbsolute`. We are in [an unusually hard time in history](#links) to go from an SVG path string to a JavaScript object, because `node.pathSegList` has been removed from Chrome and `node.getPathData()` has not yet been added; when the latter arrives, its output should look like that of `parse`. Most functions here have a normal version that takes a path string (like `scale`) and an internal version that takes a path object (like `scaleObj`) generated by `parse`. 🆕 Are your SVG elements not paths? [Make them all paths!](https://observablehq.com/@tophtucker/normalize-svg-elements-to-paths) --- Import all functions to another Observable notebook: >~~~js >import {pathstuff} from "@tophtucker/pathstuff" >pathstuff.center("${abbr(test)}") >~~~ Or one at a time: >~~~js >import {center} from "@tophtucker/pathstuff" >center("${abbr(test)}") >~~~ Select a test glyph to use for the examples on this page, or enter your own:33:T2a2c,relativeTest = "M60.353727 855.22111c-4.37555 0.013 -8.74345 0.21101 -13.08007 0.78711 -8.67324 1.15221 -17.310177 3.90953 -24.242191 9.24805 -5.111402 3.93642 -9.149534 9.17424 -12.064453 14.92968 -2.9149177 5.75544 -4.7325067 12.02395 -5.7988277 18.38672 -2.132643 12.72553 -1.298274 25.73054 -1.16211 38.63282 0.123182 11.67212 -0.32363 23.4349 1.707031 34.92968 2.030661 11.49478 6.8378517 22.93986 15.7265627 30.50583 7.098686 6.0423 16.285268 9.177 25.505858 10.5488 9.22059 1.3719 18.59394 1.1077 27.91602 1.0977 7.01891 -0.01 14.35798 -0.3694 21.32218 -1.2442 6.964193 -0.8747 12.558513 -3.1985 18.427693 -7.0479 5.08426 -3.3346 9.74251 -8.1978 12.79205 -13.458 3.04953 -5.2602 4.69283 -10.55652 5.94333 -16.50678 2.501 -11.90052 2.93748 -23.65949 3.06747 -35.81927 0.14515 -13.57841 1.01722 -27.27894 -1.39258 -40.64258 -1.2049 -6.68182 -3.24182 -13.25105 -6.47265 -19.22266 -3.23084 -5.97162 -7.68766 -11.33845 -13.25782 -15.2207 -5.9506 -4.1474 -13.0009 -6.49873 -20.140613 -7.77735 -7.13973 -1.27862 -14.41783 -1.53214 -21.66602 -1.80468 -4.37163 -0.16438 -8.75531 -0.33524 -13.13086 -0.32227zM65.296287 1003.6746c-6.665904 0.4436 -13.407228 -0.2693 -19.83289 -2.0974 -5.898037 -1.67799 -11.594974 -4.33699 -16.213818 -8.37045 -5.786146 -5.05282 -9.634061 -12.067 -11.784216 -19.44177 -3.64793 -12.51196 -2.629047 -25.8245 -2.649301 -38.85739 -0.01708 -10.9938 -0.792215 -22.06557 0.907799 -32.92715 0.850007 -5.43079 2.327143 -10.79184 4.744622 -15.72861 2.417478 -4.93678 5.798913 -9.4458 10.115943 -12.84863 5.771961 -4.54965 12.9967 -6.96148 20.272754 -7.99776 7.276054 -1.03629 14.667687 -0.77588 22.010887 -0.47212 6.085466 0.25174 12.194738 0.53455 18.177381 1.67659 5.982644 1.14203 11.874552 3.18068 16.860122 6.6793 4.85126 3.40436 8.71513 8.11422 11.49545 13.34817 2.78032 5.23395 4.50513 10.98533 5.50092 16.82766 1.99158 11.68467 1.10815 23.63636 0.90907 35.48786 -0.17744 10.56325 0.18427 21.23756 -1.9909 31.57595 -1.08758 5.1692 -2.81723 10.23218 -5.45817 14.80698 -2.64094 4.57481 -6.21668 8.65502 -10.62409 11.56675 -4.6371 3.06347 -10.154244 4.77802 -15.710923 4.88232M61.104857 1001.2131c-4.577921 -0.011 -9.154406 -0.5511 -13.60882 -1.60731 -6.09413 -1.44507 -12.049259 -3.91457 -16.821714 -7.97047 -3.836475 -3.26045 -6.810186 -7.46983 -8.926057 -12.03844 -2.115872 -4.5686 -3.393854 -9.49453 -4.121678 -14.47643 -1.455648 -9.96381 -0.738541 -20.09666 -0.736443 -30.16623 0.0022 -10.67352 -0.798749 -21.41861 0.791761 -31.97296 0.795255 -5.27717 2.196718 -10.49102 4.516853 -15.29705 2.320136 -4.80604 5.582514 -9.20103 9.763857 -12.51726 5.560156 -4.40976 12.532139 -6.75526 19.556338 -7.76619 7.024198 -1.01093 14.162199 -0.76395 21.252593 -0.46789 5.876016 0.24535 11.775031 0.52569 17.549918 1.63854 5.774887 1.11286 11.459995 3.09447 16.265605 6.48473 4.70281 3.31773 8.43657 7.90848 11.11322 13.00351 2.67665 5.09503 4.32419 10.68807 5.26981 16.36518 1.89124 11.35423 1.01563 22.95695 0.89794 34.467 -0.0964 9.4312 0.31566 18.92914 -1.21148 28.23637 -1.52714 9.30724 -5.21967 18.60467 -12.22664 24.91808 -3.52691 3.17781 -7.81714 5.50873 -12.411543 6.70416 -2.380169 0.6193 -4.838639 0.93702 -7.29805 0.94315M118.59237 981.19479c-6.58584 2.1308 -13.47315 3.32744 -20.391753 3.54299 -3.850369 0.11996 -7.735751 -0.0662 -11.481601 -0.96524 -3.74585 -0.89908 -7.360212 -2.53824 -10.251099 -5.08432 -4.46252 -3.93025 -6.895231 -9.73889 -7.97568 -15.58642 -1.080448 -5.84753 -0.947374 -11.83946 -1.10134 -17.78398 -0.176432 -6.81192 -0.731525 -13.67534 0.325725 -20.40702 0.528625 -3.36585 1.465906 -6.68563 2.999587 -9.72802 1.533681 -3.0424 3.678809 -5.80443 6.399658 -7.85512 2.865416 -2.15965 6.298625 -3.48225 9.81327 -4.20473 3.514644 -0.72248 7.123272 -0.86642 10.71131 -0.84033 8.599873 0.0625 17.192363 1.09222 25.563513 3.06341M43.862727 998.50773l24.60413 -35.40267m0.0989 -42.71724 -2.39688 -3.05351M51.397627 898.54767 32.284954 874.67458M23.424019 982.29174 46.770477 950.1996c1.654858 -2.27478 3.353826 -4.66924 3.78033 -7.44975 0.29785 -1.94178 -0.06898 -3.97933 -1.02535 -5.69531m-15.68964 -19.23463 -15.303932 -18.9523M62.837327 1003.7352 51.414937 987.99909M35.213277 965.95793 21.396652 946.53228c-0.86044 -1.37667 -1.442731 -2.92639 -1.70174 -4.52904 -0.258268 -1.59806 -0.195915 -3.24032 0.105531 -4.83081 0.514161 -2.71281 1.731244 -5.28932 3.500059 -7.40947l57.528225 -62.60751M92.457687 1002.0391l-26.23151 -35.90682m-15.69934 -23.26349c-0.580955 -1.58281 -0.917035 -3.25524 -0.99263 -4.93961 -0.05568 -1.24057 0.05239 -2.50734 0.513869 -3.66023 0.461481 -1.15289 1.283407 -2.11915 2.144741 -3.0137l54.442223 -56.54181M121.91791 971.65728c-6.94111 2.61859 -14.29278 4.1456 -21.70255 4.50782 -3.246212 0.15869 -6.526979 0.0926 -9.704129 -0.59209 -3.17715 -0.68468 -6.260739 -2.01541 -8.699294 -4.16402 -3.599961 -3.17192 -5.529684 -7.88232 -6.350002 -12.60968 -0.820319 -4.72736 -0.647496 -9.56109 -0.719488 -14.35855 -0.0784 -5.2244 -0.447588 -10.48939 0.396119 -15.64581 0.421854 -2.57821 1.150913 -5.11964 2.32921 -7.45132 1.178297 -2.33168 2.816893 -4.45156 4.892851 -6.0376 2.408394 -1.84002 5.336513 -2.91328 8.318258 -3.45664 2.981745 -0.54337 6.032074 -0.57953 9.062119 -0.50973 8.070376 0.18591 16.123496 1.11384 24.024656 2.76828M122.39732 969.20661c-6.82889 2.29957 -13.96134 3.69586 -21.15324 4.14108 -3.155137 0.19532 -6.346515 0.20621 -9.448804 -0.40112 -3.102288 -0.60732 -6.129027 -1.86461 -8.488819 -3.96804 -3.321017 -2.96023 -5.061312 -7.35356 -5.769096 -11.74573 -0.707784 -4.39217 -0.493509 -8.87191 -0.534424 -13.32055 -0.04358 -4.738 -0.376682 -9.51102 0.371865 -14.18972 0.374274 -2.33935 1.022527 -4.64702 2.076019 -6.769 1.053493 -2.12197 2.522222 -4.05662 4.390436 -5.51347 2.326916 -1.81455 5.198179 -2.83329 8.109829 -3.31228 2.911651 -0.47898 5.882027 -0.44452 8.830644 -0.33141 7.85203 0.30121 15.68293 1.15165 23.41656 2.54307M93.733197 973.19538c-0.02785 -3.58863 -0.3226 -7.17516 -0.881 -10.72019 -0.392509 -2.49186 -0.959668 -5.06257 -2.51769 -7.04651 -1.082605 -1.37856 -2.585191 -2.38434 -4.191 -3.08707 -2.804874 -1.22747 -5.989345 -1.57014 -8.99115 -0.96751M94.252957 913.6917c0.272362 3.83194 0.142255 7.69236 -0.38749 11.49726 -0.169872 1.22011 -0.381932 2.43957 -0.763305 3.61093 -0.381373 1.17135 -0.938109 2.29817 -1.740895 3.23255 -1.256802 1.46281 -3.046463 2.37557 -4.88407 2.96086 -3.003535 0.95665 -6.255746 1.12042 -9.34019 0.47034M107.2172 972.23426c-0.0407 -3.43224 0.10743 -6.8667 0.4435 -10.28269 0.10329 -1.0499 0.22511 -2.10239 0.49295 -3.1228 0.26785 -1.0204 0.68764 -2.01334 1.33864 -2.8435 1.07672 -1.37305 2.69665 -2.20147 4.3146 -2.85479 3.18097 -1.28446 6.56786 -2.05736 9.99114 -2.27999M107.34266 914.24955c0.0768 3.72264 0.24557 7.44338 0.506 11.1577 0.0814 1.16037 0.17299 2.32807 0.47462 3.4515 0.30164 1.12344 0.82825 2.2114 1.66947 3.01479 0.58352 0.55728 1.30034 0.961 2.0511 1.25665 0.75076 0.29566 1.53795 0.48738 2.32601 0.66065 3.05849 0.67246 6.17511 1.08031 9.30365 1.21749M41.496607 997.87384l26.54867 -37.70076m-0.23299 -36.68408 -3.55135 -4.20825M49.572657 900.6652 30.891089 876.33879M65.672937 1003.8916 52.968747 986.14644M36.862907 963.99956 23.626098 945.81458c-0.906339 -1.49416 -1.492303 -3.18159 -1.707065 -4.9159 -0.16101 -1.30024 -0.114591 -2.62592 0.136608 -3.91179 0.40756 -2.08627 1.360593 -4.06352 2.73871 -5.68198l58.349616 -63.65745M37.043157 1011.1962c-7.870068 -1.8031 -16.551252 0.3988 -22.610475 5.735 -2.006308 1.7669 -3.741784 3.8644 -4.9489646 6.2498 -1.2071806 2.3853 -1.8738073 5.0654 -1.7535931 7.7361 0.1994736 4.4316 2.5714987 8.586 5.8587817 11.5647 4.147443 3.7581 9.630398 5.7725 15.154135 6.674 5.523738 0.9016 11.155829 0.7721 16.752576 0.7426 6.71133 -0.035 13.502031 0.068 20.03179 -1.4828 2.391316 -0.568 4.746028 -1.3624 6.878391 -2.5847 2.132364 -1.2223 4.041065 -2.8901 5.335109 -4.9797 1.407181 -2.2723 2.034318 -4.9333 2.51918 -7.5617 0.573 -3.1062 0.977525 -6.2977 0.475721 -9.4162 -0.250902 -1.5592 -0.730832 -3.089 -1.496107 -4.4705 -0.765274 -1.3815 -1.821375 -2.6122 -3.123294 -3.5062 -1.439539 -0.9885 -3.169181 -1.5488 -4.91487 -1.5923M35.765447 1010.6814c-3.912083 0.6322 -7.594561 2.6065 -10.286374 5.5148 -0.954586 1.0314 -1.790583 2.1813 -2.395549 3.4498 -0.604966 1.2684 -0.974943 2.6588 -0.989894 4.064 -0.02765 2.5986 1.187883 5.1331 3.05471 6.941 2.276701 2.2048 5.405354 3.3472 8.538608 3.8238 3.133254 0.4766 6.321834 0.3458 9.491129 0.3422 4.01555 0 8.101473 0.189 11.97551 -0.8676 2.139896 -0.5837 4.203339 -1.5635 5.831447 -3.0698 1.628108 -1.5064 2.793088 -3.5709 2.976133 -5.7814 0.127485 -1.5395 -0.221332 -3.1018 -0.900524 -4.4893 -0.679193 -1.3874 -1.680467 -2.6043 -2.844866 -3.6195 -1.644939 -1.4341 -3.627627 -2.4783 -5.74079 -3.0234M38.872787 1011.4568c-4.312975 0.5059 -8.423063 2.5912 -11.378552 5.7728 -0.809843 0.8718 -1.53891 1.8281 -2.07267 2.8916 -0.533759 1.0635 -0.868035 2.2393 -0.869901 3.4292 -0.0027 1.7357 0.713638 3.4356 1.843605 4.7531 1.404319 1.6374 3.396523 2.6878 5.469307 3.285 2.072784 0.5973 4.240942 0.7735 6.394041 0.9051 5.460202 0.3337 11.043347 0.3859 16.27668 -1.207 1.690952 -0.5147 3.358069 -1.2144 4.71445 -2.3477 0.678191 -0.5667 1.272501 -1.2393 1.713995 -2.0049 0.441494 -0.7656 0.72772 -1.6256 0.789985 -2.5072 0.08757 -1.2398 -0.270795 -2.4855 -0.877863 -3.57 -0.607068 -1.0846 -1.453889 -2.0189 -2.377567 -2.8506 -2.939008 -2.6462 -6.74314 -4.3155 -10.68046 -4.6866M39.587697 1034.7422c0.198569 2.8672 0.240269 5.7452 0.12485 8.6169 -0.08382 2.0854 -0.250456 4.1676 -0.49939 6.2398M43.582767 1035.0393c0.198569 2.8672 0.240269 5.7452 0.12485 8.6169 -0.08382 2.0854 -0.250456 4.1676 -0.49939 6.2398M47.452987 1034.8907c0.198566 2.8672 0.240266 5.7452 0.12485 8.6169 -0.08382 2.0855 -0.250455 4.1676 -0.49939 6.2399M91.650617 1013.5074c-1.708609 0.036 -3.405971 0.5151 -4.881523 1.3773 -1.475552 0.8622 -2.726068 2.1058 -3.596417 3.5766 -1.619344 2.7365 -1.856074 6.0417 -2.13991 9.2087 -0.31337 3.4965 -0.721199 7.1045 0.3375 10.4516 0.894489 2.828 2.809525 5.2779 5.18362 7.0559 2.810228 2.1046 6.223376 3.2938 9.684824 3.8811 3.461448 0.5874 6.992739 0.6006 10.503199 0.5436 3.23487 -0.053 6.4841 -0.165 9.66378 -0.7622 3.17969 -0.5973 6.30691 -1.6999 8.93649 -3.5847 3.78633 -2.7139 6.37379 -7.042 6.97182 -11.662 -2.02009 1.5399 -4.35969 2.6588 -6.8265 3.2646 -3.33802 0.8198 -6.82806 0.6979 -10.25921 0.4939 -2.60915 -0.1551 -5.28134 -0.3711 -7.65359 -1.4685 -1.18612 -0.5487 -2.28161 -1.319 -3.11931 -2.3221 -0.8377 -1.0031 -1.40819 -2.2464 -1.51808 -3.5487 -0.13748 -1.6293 0.45554 -3.2719 1.44925 -4.5704 0.9937 -1.2985 2.36437 -2.2732 3.83783 -2.982 3.80392 -1.8299 8.24453 -1.9307 12.39942 -1.1854 4.16379 0.7469 8.17956 2.31 11.75257 4.5746 0.21371 -3.2756 -0.95689 -6.6193 -3.16703 -9.0464 -1.42881 -1.569 -3.25214 -2.747 -5.19913 -3.5912 -1.94699 -0.8441 -4.02005 -1.3653 -6.10815 -1.7437 -4.18229 -0.758 -8.46595 -0.9546 -12.7001 -0.5831"34:T19b0,kochFlake = "M10.608869999999996 92.29127L12.439510000000013 88.98763000000002L10.608869999999996 85.68401L14.270150000000001 85.68401L16.100799999999992 82.38037000000003L14.270150000000001 79.07673999999997L10.608859999999993 79.07673999999997L12.439510000000013 75.77312L10.608869999999996 72.46947999999998L14.270150000000001 72.46947999999998L16.100799999999992 69.16586000000001L17.931459999999987 72.46947999999998L21.592739999999992 72.46947999999998L23.423390000000012 69.16586000000001L21.592739999999992 65.86223000000001L25.25403 65.86223000000001L27.084689999999995 62.55860000000001L25.25403 59.25497999999999L21.592739999999992 59.25497999999999L23.423390000000012 55.95133999999999L21.592739999999992 52.64771999999999L17.931450000000012 52.64771999999999L16.100799999999992 55.95133999999999L14.270150000000001 52.64771999999999L10.608869999999996 52.64771999999999L12.439510000000013 49.344089999999994L10.608859999999993 46.040459999999996L14.270150000000001 46.040459999999996L16.100799999999992 42.73684L14.270150000000001 39.4332L10.608869999999996 39.4332L12.439510000000013 36.129580000000004L10.608859999999993 32.82594L14.270150000000001 32.825950000000006L16.100799999999992 29.522320000000008L17.931450000000012 32.82594L21.592739999999992 32.825950000000006L23.423390000000012 29.522320000000008L21.592739999999992 26.218700000000013L25.25403 26.218700000000013L27.084689999999995 22.91506000000001L28.91533000000001 26.218700000000013L32.57661999999999 26.218700000000013L30.745980000000003 29.522320000000008L32.57661999999999 32.825950000000006L36.23792 32.82594L38.06854999999999 29.522320000000008L39.89922999999999 32.825950000000006L43.56049999999999 32.82594L45.39115000000001 29.522320000000008L43.56049999999999 26.218700000000013L47.22179 26.218700000000013L49.052459999999996 22.91506000000001L47.22179 19.611430000000013L43.56049999999999 19.611430000000013L45.39115000000001 16.307799999999986L43.56049999999999 13.004169999999988L47.22179 13.004169999999988L49.05244999999999 9.700559999999996L50.88310000000001 13.004169999999988L54.54438999999999 13.004169999999988L56.375020000000006 9.700559999999996L54.54438999999999 6.396919999999994L58.205690000000004 6.396919999999994L60.03632999999999 3.0932999999999993L61.866960000000006 6.396919999999994L65.52825999999999 6.396919999999994L63.697630000000004 9.700559999999996L65.52825999999999 13.004169999999988L69.18955999999997 13.004169999999988L71.02019999999999 9.700559999999996L72.85086000000001 13.004169999999988L76.51215000000002 13.004169999999988L74.68150000000003 16.307799999999986L76.51215000000002 19.611430000000013L72.85086000000001 19.611430000000013L71.02019000000001 22.91506000000001L72.85086000000001 26.218700000000013L76.51215000000002 26.218700000000013L74.68150000000003 29.522320000000008L76.51215000000002 32.825950000000006L80.17343 32.82594L82.0041 29.522320000000008L83.83472999999998 32.82594L87.49603000000002 32.825950000000006L89.32666999999998 29.522320000000008L87.49603000000002 26.218700000000013L91.15733 26.218700000000013L92.98795999999999 22.91506000000001L94.81862000000001 26.218700000000013L98.47991000000002 26.218700000000013L96.64926000000003 29.522320000000008L98.47991000000002 32.82594L102.14119 32.82594L103.97185000000002 29.522320000000008L105.80250000000001 32.825950000000006L109.46377999999999 32.82594L107.63314000000003 36.129580000000004L109.46379000000002 39.4332L105.80250000000001 39.4332L103.97185000000002 42.73684L105.80250000000001 46.040459999999996L109.46379000000002 46.040459999999996L107.63314000000003 49.344089999999994L109.46377999999999 52.64771999999999L105.80250000000001 52.64771999999999L103.97185000000002 55.95133999999999L102.14120000000003 52.64771999999999L98.47991000000002 52.64771999999999L96.64926000000003 55.95133999999999L98.47991000000002 59.25497999999999L94.81862000000001 59.25497999999999L92.98795999999999 62.55860000000001L94.81862000000001 65.86223000000001L98.47991000000002 65.86223000000001L96.64926000000003 69.16586000000001L98.47991000000002 72.46947999999998L102.14120000000003 72.46947999999998L103.97185000000002 69.16586000000001L105.80250000000001 72.46947999999998L109.46379000000002 72.46947999999998L107.63314000000003 75.77312L109.46379000000002 79.07673999999997L105.80250000000001 79.07673999999997L103.97185000000002 82.38038L105.80250000000001 85.68401L109.46377999999999 85.68401L107.63314000000003 88.98763000000002L109.46379000000002 92.29127L105.80250000000001 92.29127L103.97185000000002 95.59489000000002L102.14120000000003 92.29127L98.47991000000002 92.29127L96.64926000000003 95.59489000000002L98.47991000000002 98.89850999999999L94.81862000000001 98.89852000000002L92.98795999999999 102.20215000000002L91.15732000000003 98.89850999999999L87.49603000000002 98.89852000000002L89.32666999999998 95.59489000000002L87.49603000000002 92.29127L83.83472999999998 92.29127L82.0041 95.59489000000002L80.17343 92.29127L76.51215000000002 92.29127L74.68150000000003 95.59489000000002L76.51215000000002 98.89852000000002L72.85086000000001 98.89850999999999L71.02019000000001 102.20215000000002L72.85086000000001 105.50576999999998L76.51215000000002 105.50576999999998L74.68150000000003 108.80939999999998L76.51215000000002 112.11302999999998L72.85086000000001 112.11302999999998L71.02019999999999 115.41663999999997L69.18955999999997 112.11302999999998L65.52825999999999 112.11302999999998L63.697630000000004 115.41663999999997L65.52825999999999 118.72028L61.866960000000006 118.72028L60.03631999999999 122.02390000000003L58.205690000000004 118.72028L54.54438999999999 118.72028L56.375020000000006 115.41663999999997L54.54438999999999 112.11302999999998L50.88310000000001 112.11302999999998L49.052459999999996 115.41663999999997L47.22179 112.11302999999998L43.56049999999999 112.11302999999998L45.39115000000001 108.80939999999998L43.56049999999999 105.50576999999998L47.22179 105.50576999999998L49.052459999999996 102.20215000000002L47.22179 98.89850999999999L43.56049999999999 98.89850999999999L45.39115000000001 95.59489000000002L43.56049999999999 92.29127L39.899220000000014 92.29127L38.06854999999999 95.59489000000002L36.23792 92.29127L32.57661999999999 92.29127L30.745980000000003 95.59489000000002L32.57661999999999 98.89852000000002L28.91532000000001 98.89850999999999L27.084689999999995 102.20215000000002L25.25403 98.89850999999999L21.592739999999992 98.89852000000002L23.423390000000012 95.59489000000002L21.592739999999992 92.29127L17.931459999999987 92.29127L16.100799999999992 95.59489000000002L14.270150000000001 92.29127L10.608869999999996 92.29127"35:T53b,// from https://commons.wikimedia.org/wiki/File:Blank_US_Map_(states_only).svg texas = "M282.8 425.6l37 3.6 29.3 1.9 7.4-97.7 54.4 2.4-1.7 23.3-1 18 .2 2 4.4 4.1 2 1.1h1.8l.5-1.2.7.9 2.4.2 1.1-.6v-.2l1 .5-.4 3.7 4.5.7 2.4.9 4.2.7 2.6 1.8 2.8-1.9 2.7.6 2.2 3.1.8.1v2.1l3.3 1.1 2.5-2.1 1.5.5 2.1.1.6 2.1 5.2 2 2.3-.5 1.9-4h.1l1.1 1.9 4.6.9 3.4 1.3 3.2 1 2.4-1.2.7-2.3h3.6l2.1 1 3-2h.4l.5 1.4h4.7l1.9-1.8 1.3.4 1.7 2.1 3.3 1.9 3.4 1 2.5 1.4 2.7 2 3.1-1.2 2.1.8.7 20 .7 9.5.6 4.1 2.6 4.4.9 4.5 4.2 5.9.3 3.1.6.8-.7 7.7-2.9 4.8 1.3 2.6-.5 2.4-.8 7.2-1.3 3 .3 4.2-5.6 1.6-9.9 4.5-1 1.9-2.6 1.9-2.1 1.5-1.3.8-5.7 5.3-2.7 2.1-5.3 3.2-5.7 2.4-6.3 3.4-1.8 1.5-5.8 3.6-3.4.6-3.9 5.5-4 .3-1 1.9 2.3 1.9-1.5 5.5-1.3 4.5-1.1 3.9-.8 4.5.8 2.4 1.8 7 1 6.1 1.8 2.7-1 1.5-3.1 1.9-5.7-3.9-5.5-1.1-1.3.5-3.2-.6-4.2-3.1-5.2-1.1-7.6-3.4-2.1-3.9-1.3-6.5-3.2-1.9-.6-2.3.6-.6.3-3.4-1.3-.6-.6-1 1.3-4.4-1.6-2.3-3.2-1.3-3.4-4.4-3.6-6.6-4.2-2.6.2-1.9-5.3-12.3-.8-4.2-1.8-1.9-.2-1.5-6-5.3-2.6-3.1v-1.1l-2.6-2.1-6.8-1.1-7.4-.6-3.1-2.3-4.5 1.8-3.6 1.5-2.3 3.2-1 3.7-4.4 6.1-2.4 2.4-2.6-1-1.8-1.1-1.9-.6-3.9-2.3v-.6l-1.8-1.9-5.2-2.1-7.4-7.8-2.3-4.7v-8.1l-3.2-6.5-.5-2.7-1.6-1-1.1-2.1-5-2.1-1.3-1.6-7.1-7.9-1.3-3.2-4.7-2.3-1.5-4.4-2.6-2.9-1.7-.5zm174.4 141.7l-.6-7.1-2.7-7.2-.6-7 1.5-8.2 3.3-6.9 3.5-5.4 3.2-3.6.6.2-4.8 6.6-4.4 6.5-2 6.6-.3 5.2.9 6.1 2.6 7.2.5 5.2.2 1.5z"36:T105a,complexTest = "M80 32.1C57.2 37.8 42 54 37.5 98.5 35.9 114.6 40.1 126.3 47.5 134.6M80 32.1C75.2 47.9 75.4 79.4 115 79 154.6 78.6 159.8 47 157.5 31.2M80 32.1C84.4 31 89.1 30.2 94 29.8M157.5 31.2C177.6 37.4 195.7 52.5 197.5 84.5 198.5 102.1 193.6 115.5 185.4 125.5M157.5 31.2C154.5 30.3 151.5 29.6 148.5 29M94 29.8C93.1 32.6 92.3 36.1 91.9 39.8M94 29.8C96.4 29.5 98.9 29.4 101.5 29.3M148.5 29C146.6 28.7 144.8 28.4 143 28.2M148.5 29C147.8 33.2 147.4 37.9 146.6 42.5M110.5 29C112 29 113.5 29 115 29 116.7 28.7 118.5 28.4 120.5 28.2M110.5 29L105.5 33.8M110.5 29C107.4 29.1 104.4 29.1 101.5 29.3M91.9 46.5L95.1 43.5M91.9 46.5C92.3 50 93.2 53.5 95 56.5M91.9 46.5C91.7 44.3 91.7 42 91.9 39.8M95.1 43.5L105.5 33.8M95.1 43.5L91.9 39.8M95.1 43.5L101.4 50.6M105.5 33.8L101.5 29.3M105.5 33.8L111.9 41.1M95 56.5L101.4 50.6M95 56.5C96.8 59.6 99.6 62.2 103.5 63.9M101.4 50.6L111.9 41.1M101.4 50.6L108.9 59M111.9 41.1L122.9 31M111.9 41.1L119.3 49.6M122.9 31L126.5 27.7M122.9 31L120.5 28.2M122.9 31L130.5 39.5M126.5 27.7C124.4 27.8 122.4 28 120.5 28.2M126.5 27.7C129.2 27.5 132.1 27.5 135 27.6M103.5 63.9C106.6 65.2 110.4 66 115 66M103.5 63.9L108.9 59M115 66C116.4 66 117.7 66 119 65.9M115 66L108.9 59M143 28.2L138.6 32.2M143 28.2C140.3 27.9 137.6 27.7 135 27.6M108.9 59L119.3 49.6M119.3 49.6L130.5 39.5M119.3 49.6L127.4 58.8M130.5 39.5L138.6 32.2M130.5 39.5L138.9 49M138.6 32.2L135 27.6M138.6 32.2L146.6 42.5M119 65.9L127.4 58.8M119 65.9C124 65.7 128.1 64.8 131.5 63.5M146.6 42.5L138.9 49M146.6 42.5C145.9 46.4 144.9 50.3 143 53.7M127.4 58.8L138.9 49M127.4 58.8L131.5 63.5M138.9 49L143 53.7M131.5 63.5C137.2 61.3 140.7 57.8 143 53.7M47.5 134.6C53.2 132.6 63.8 124.7 61 109.5M47.5 134.6C52.7 140.5 59.5 144.8 67 147.7M67 147.7C72.2 145.5 82.8 136.1 84 115.5M67 147.7C72.7 150 78.9 151.5 85 152.5M85 152.5C91.2 150 103.3 138.8 102.5 114M85 152.5C93.2 153.7 101.4 154 108.5 153.6M108.5 153.6C110.8 153.4 113 153.2 115 153 121.4 153.1 129.3 152.6 137.5 151M108.5 153.6C114.5 150.8 125.9 138.6 123.5 112M137.5 151C141.2 145.5 147.6 129.9 144 111.5M137.5 151C144.6 149.7 151.9 147.6 159 144.6M159 144.6C162.7 137.9 168.2 120.8 161 106M159 144.6C169 140.3 178.4 134.1 185.4 125.5M185.4 125.5C187.3 122.7 188.7 113.1 179.5 97.5M56.5 168C56.5 168 56.5 192.5 42.5 192M56.5 168C61.2 168.6 66.2 169.1 71.5 169.5M56.5 168C48.5 167 41.3 165.6 35 163.4M42.5 192C36.3 191.8 30 191.4 32 181M42.5 192C57.3 174.8 43.7 165.7 35 163.4M71.5 169.5C81.3 170.3 92.2 170.8 104 171.7M71.5 169.5C73.9 177.4 75.2 189.2 71.5 199M35 163.4C13.3 155.7 2 138.6 2 95.5 -3 61.3 11-1.1 108 1 225.5 3.5 220.4 4.4 228.5 88 232.7 131.6 219.9 154 197.5 164.8M35 163.4C17.8 160.9 11.2 174.1 10 181 6.5 193 8.1 216.9 42.5 216.5 59.5 216.3 67.9 208.6 71.5 199M126 173.2C120.1 172.9 114.1 172.5 108 172 106.7 171.9 105.3 171.8 104 171.7M126 173.2C114.5 175 117.5 192 104 192 90.5 192 96 171.1 104 171.7M126 173.2C131.4 173.5 136.8 173.7 142 173.8M142 173.8C150.7 173.9 159.1 173.6 167 172.7M142 173.8C143.4 180.2 143.5 189.3 139.5 197.1M71.5 199C76 209.1 89.2 213.2 102.5 213 124 214.1 134.7 206.5 139.5 197.1M167 172.7C164.5 184.4 165.7 204.3 190.5 190.5 162.9 192.5 175.6 177.2 185.4 169.3M167 172.7C173.5 172 179.7 170.9 185.4 169.3M185.4 169.3C189.7 168.1 193.7 166.6 197.5 164.8M197.5 164.8C203.3 162.7 215 163.6 215 184 215 204.4 187.3 210.2 173.5 210.5 164.3 211.4 144.7 210 139.5 197.1M62.5 54C61.7 53.8 60 54 60 56 60 58 61.7 57.8 62.5 57.5 63.2 57.7 64.5 57.6 64.5 56 64.5 54.4 63.2 54 62.5 54ZM67 75C66.2 74.7 64.5 74.6 64.5 77 64.5 79.4 66.2 79.3 67 79 67.8 79 69.5 78.6 69.5 77 69.5 75.4 67.8 75 67 75ZM84 87.5C82.9 87.5 81.7 87.9 81.5 89 81.3 90.2 82.7 91 84 91 85.3 91 86.7 90.2 86.5 89 86.3 87.9 85.1 87.5 84 87.5ZM114.5 90.5C113.3 90.6 112.3 91.3 112 92.5 111.7 94 113 95.4 114.5 95.5 116 95.6 117.5 94.5 117.5 93 117.5 91.5 116 90.4 114.5 90.5ZM145.5 86C144.1 86.1 143 87.1 143 88.5 143 89.9 144.1 90.9 145.5 91 147 91.1 148.5 90 148.5 88.5 148.5 87 147 85.9 145.5 86ZM168 73.5C167 73.6 166.6 74.5 166.5 75.5 166.4 76.6 166.9 77.8 168 78 169.2 78.2 170.1 76.7 170 75.5 169.9 74.4 169.1 73.3 168 73.5ZM173 53C171.8 53.3 170.9 54.3 171 55.5 171.1 56.6 171.9 57.3 173 57.5 174.4 57.8 175.9 56.9 176 55.5 176.2 54 174.5 52.7 173 53Z"37:Tb0d,links = md`--- ### Preinvented wheels My focus here is on path command parsers, not the whole big world of SVG graphics libraries. - [progers/pathseg](https://github.com/progers/pathseg) — polyfill for removed \`SVGPathSeg\` - [jarek-foksa/path-data-polyfill](https://github.com/jarek-foksa/path-data-polyfill) — polyfill for future \`SVGPathData\` - [hughsk/svg-path-parser](https://github.com/hughsk/svg-path-parser) — built from formal grammar with PEG.js Reference: - [MDN’s excellent SVG path \`d\` path commands reference](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d) - [SVGWG \`SVGPathData\`](https://svgwg.org/specs/paths/#InterfaceSVGPathData) — spec for new API - [Chromium Issue 539385: Remove the SVG pathSegList interface](https://bugs.chromium.org/p/chromium/issues/detail?id=539385) - [w3c/svgwg #69: Move path interrogation functions to SVGGeometryElement](https://github.com/w3c/svgwg/issues/69) - [w3c/svgwg #155: Expose getPathData() on all shapes #155](https://github.com/w3c/svgwg/issues/155) Props to [Jarek Foksa](https://github.com/jarek-foksa), who keeps showing up in these links, both pushing on the standards level and polyfilling it. There are relevant utilities in [Raphael](http://dmitrybaranovskiy.github.io/raphael/reference.html#Raphael.parsePathString) and [paperjs](http://paperjs.org/reference/pathitem/). It’s worth reading some relevant d3 source code; [d3-path](https://observablehq.com/@d3/d3-path) implements all the canvas path methods as string-builders ([source](https://github.com/d3/d3-path/blob/master/src/path.js)), so that you can write once and target either SVG or canvas contexts, as done in [d3-shape](https://github.com/d3/d3-shape). Other: - [timo22345’s flatten.js](https://gist.github.com/timo22345/9413158) - [benjamminf’s warpjs](https://github.com/benjamminf/warpjs) - [MaxArt2501/d-path-parser](https://github.com/MaxArt2501/d-path-parser) - [Pomax/js-svg-path](https://github.com/Pomax/js-svg-path) - [Phrogz’s question about baking transformations into a path](https://stackoverflow.com/questions/5149301/baking-transforms-into-svg-path-element-commands) - [Lots of nice SVG experiments by Phrogz](http://phrogz.net/SVG/) - [SVG Optimiser](https://petercollingridge.appspot.com/svg-optimiser) has some of this but seems sorta broken - More StackOverflow discussion: [1](https://stackoverflow.com/questions/25384052/convert-svg-path-d-attribute-to-a-array-of-points), [2](https://stackoverflow.com/questions/34352624/alternative-for-deprecated-svg-pathseglist/34359059#34359059), [3](https://stackoverflow.com/questions/34919405/svgpathdata-chrome-48) Thank you to [Jacob Rus](https://observablehq.com/@jrus), who randomly spotted this draft and fixed a regex bug!! And to Adam Pearce and Billy Janitsch for comments. `38:[] 30:{"title":"Pathstuff","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":1905,"value":"viewof presetString = select({\n options: testOptions,\n value: complexTest\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2522,"value":"viewof userString = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":3033,"value":"md`Render examples with:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2357,"value":"viewof context = radio({\n options: [\"SVG\", \"Canvas\"],\n value: \"SVG\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3056,"value":"context === \"SVG\"\n ? md`\n>~~~html\n>\n>~~~\n`\n : md`\n>~~~js\n>context.stroke(new Path2D(\"${abbr(test)}\"))\n>~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"_parse = md`---\n\n## parse\n- \\`parse(pathString)\\` → \\`[{type: \"M\", values: […]}, …]\\`\n\nTurns a path’s \\`d\\` attribute into an object more suitable for further manipulation (matching the structure of the object that [\\`SVGPathData\\`](https://svgwg.org/specs/paths/#InterfaceSVGPathData) will return). The first regex, \\`/(?=[MmLlHhVvCcSsAaQqTtZz])/\\`, tests for new path commands. Then it gets ugly because path strings are too clever about implicit delimiters! The second regex, \\`/([0-9]*\\.[0-9]*)\\./\\`, tests for a period after a number that already has a decimal point; \\`.4.2\\` acts the same as \\`.4 .2\\`. Similarly, the third, \\`/([0-9.])-/g\\`, tests for hyphens after numbers (including numbers ending in a decimal point); \\`4-5\\` acts the same as \\`4 -5\\`. Finally, \\`/[\\\\n\\\\s,]/\\` tests for newlines, spaces, and commas, which are [equivalent valid delimiters](https://www.w3.org/TR/SVG/paths.html#PathDataBNF).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"parse = d =>\n d\n .trim()\n .split(/(?=[MmLlHhVvCcSsAaQqTtZz])/)\n .map(d => ({\n type: d.charAt(0),\n values: replaceRecursive(d.substr(1), /([0-9]*\\.[0-9]*)\\./, \"$1 .\")\n .replace(/([0-9.])-/g, \"$1 -\")\n .split(/[\\n\\s,]/)\n .filter(d => d.length)\n .map(d => +d)\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"parse(test)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"_stringify = md`---\n\n## stringify\n- \\`stringify(pathObject)\\` → \\`pathString\\`\n\nTurns the object created by \\`parse\\` back into a path string for the path’s \\`d\\` attribute.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"stringify = pathObject =>\n pathObject.map(d => d.type + d.values.join(\" \")).join(\"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"md`The round-trip \\`stringify(parse(test))\\` ought to leave the path string unaffected, aside from normalizing all delimiters to spaces:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"stringify(parse(test))","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"_getBBox = md`---\n\n## getBBox\n- \\`getBBox(pathString)\\` → \\`{x, y, width, height}\\`\n- \\`getBBoxObj(pathObject)\\` → \\`{x, y, width, height}\\`\n\nSame as [\\`SVGGraphicsElement.getBBox\\`](https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox), returns \\`{x, y, width, height}\\`. Takes a path string, doesn’t touch the DOM. Caveat: only gets the control points! Works poorly for \\`A\\` (arc) commands!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"getBBox = pathString => getBBoxObj(parse(pathString))","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"getBBoxObj = pathObject => {\n if (pathObject.some(isRelative)) pathObject = toAbsoluteObj(pathObject);\n\n const x = [].concat(...pathObject.map(getX));\n const x0 = Math.min(...x);\n const x1 = Math.max(...x);\n\n const y = [].concat(...pathObject.map(getY));\n const y0 = Math.min(...y);\n const y1 = Math.max(...y);\n\n return {\n x: x0,\n y: y0,\n width: x1 - x0,\n height: y1 - y0\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"getBBox(test)","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"showTest(path => {\n const bb = getBBox(path);\n return `M${bb.x} ${bb.y}l${bb.width} 0 0 ${bb.height} -${bb.width} 0Z`;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"_center = md`---\n\n## center\n- \\`center(pathString)\\` → \\`pathString\\`\n\nCenters the path on \\`(0, 0)\\`, so you don’t have to do \\`transform(-50%, -50%)\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"center = pathString => stringify(centerObj(parse(pathString)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"centerObj = pathObject => {\n if (pathObject.some(isRelative)) pathObject = toAbsoluteObj(pathObject);\n const bb = getBBoxObj(pathObject);\n return translateObj(-(2 * bb.x + bb.width) / 2, -(2 * bb.y + bb.height) / 2)(\n pathObject\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"showTest(center)","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"_translate = md`---\n\n## translate\n\n- \\`translate(x, y)(pathString)\\` → \\`pathString\\`\n\nMoves everything right \\`x\\` and down \\`y\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"translate = (x, y) => pathString =>\n stringify(translateObj(x, y)(parse(pathString)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"translateObj = (x, y) => pathObject =>\n toAbsoluteObj(pathObject).map(({ type, values }) => ({\n type,\n values: applyXY(d => d + x, d => d + y)({ type, values })\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"viewof transformX = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":465,"value":"viewof transformY = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2319,"value":"md`~~~js\ntranslate(${transformX}, ${transformY})(\"${abbr(test, 40)}\")\n// ${abbr(translate(transformX, transformY)(test), 40)}\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"showTest(translate(transformX, transformY))","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"_scale = md`---\n## scale\n- \\`scale(x, [y])(pathString)\\` → \\`pathString\\`\n\nExamples:\n- \\`scale(0.5)(pathString)\\` halves both dimensions\n- \\`scale(0.5, 2)(pathString)\\` halves \\`x\\` and doubles \\`y\\`\n- \\`scale(fx, fy)(pathString)\\` applies \\`fx\\` to \\`x\\` and \\`fy\\` to \\`y\\`\n\nI’d like to refactor this into a simpler linear \\`scale\\` function and a more abstract \\`project\\` function that takes fancy functions of \\`(x, y)\\` and returns \\`[x, y]\\`, so it could interop with \\`d3-geo\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"scale = (x, y) => pathString => stringify(scaleObj(x, y)(parse(pathString)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"scaleObj = (x, y) => {\n if (!y) y = x;\n if (typeof x === \"number\") {\n let _x = x;\n x = d => d * _x;\n }\n if (typeof y === \"number\") {\n let _y = y;\n y = d => d * _y;\n }\n return pathObject =>\n pathObject.map(({ type, values }) => ({\n type,\n values: applyXY(x, y, x, y)({ type, values })\n }));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":469,"value":"viewof scaleSlider = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2314,"value":"md`~~~js\nscale(${scaleSlider})(\"${abbr(test, 40)}\")\n// ${abbr(scale(scaleSlider)(test), 40)}\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"showTest(scale(scaleSlider))","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"md`You can pass some weird nonlinear scaling functions if you’re _out of your goddamn mind!_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"showTest(\n scale(d => 115 + 115 * Math.sin(d / (300 * Math.sin(now / 1000))), d => d)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":650,"value":"_size = md`---\n\n## size\n\n- \\`size([width], [height])(pathString)\\` → \\`pathString\\`\n\nExamples:\n\n- \\`size(240, 120)(pathString)\\` scales the path such that its width is ≤ 240 and its height is ≤ 120\n- \\`size(240)(pathString)\\` scales to a width of 240, with a proportionate height\n- \\`size(undefined, 120)(pathString)\\` scales to a height of 120, with a proportionate width\n\nPreserves proportions (like, aspect ratio), with a transform-origin of the origin. Maybe best used with \\`center\\`, idk, that’s what I have in mind. Just a pretty thin pass-through to \\`scale\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"size = (w, h) => pathString => stringify(sizeObj(w, h)(parse(pathString)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"sizeObj = (w = Infinity, h = Infinity) => pathObject => {\n const bb = getBBoxObj(pathObject);\n const ratio = Math.min(w / bb.width, h / bb.height);\n return scaleObj(ratio)(pathObject);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2289,"value":"viewof sizeXSlider = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2291,"value":"viewof sizeYSlider = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2297,"value":"md`~~~js\nsize(${sizeXSlider}, ${sizeYSlider})(\"${abbr(test, 40)}\")\n// ${abbr(size(sizeXSlider, sizeYSlider)(test), 40)}\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":664,"value":"showTest(size(sizeXSlider, sizeYSlider))","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"_combine = md`---\n\n## combine\n\n- \\`combine(arrayOfPathStrings)\\` → \\`pathString\\`\n\nEvery path string begins with an \\`M\\` or \\`m\\` MoveTo command, so you can almost just concatenate them. But if it’s an \\`m\\`, it’s in relative coordinates, which are relative to \\`(0, 0)\\` at the start of a path string, but would be changed by concatenation. So you can just change the lowercase to uppercase and leave the numbers untouched — _except_ that if it has more than 2 arguments, the later ones are implicitly treated as \\`l\\` relative-coordinate LineTo commands. So you caa just just stick an \\`l\\` after the first two args and it should work!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"combine = arr =>\n arr\n .map(parse)\n .map(path => {\n if (path[0].type === \"m\" && path[0].values.length > 2) {\n return [\n {\n type: \"M\",\n values: path[0].values.slice(0, 2)\n },\n {\n type: \"l\",\n values: path[0].values.slice(2)\n },\n ...path.slice(1)\n ];\n } else if (path[0].type === \"m\") {\n return [\n {\n type: \"M\",\n values: path[0].values\n },\n ...path.slice(1)\n ];\n }\n return path;\n })\n .map(stringify)\n .join(\"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":731,"value":"showTest(() =>\n combine(\n Array(3)\n .fill(test)\n .map((d, i) => translate(10 * i, 10 * i)(d))\n )\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"_toAbsolute = md`---\n\n## toAbsolute\n\n- \\`toAbsolute(pathString)\\` → \\`pathString\\`\n\nConverts all relative path commands to absolute path commands, which is currently necessary for some of these other things to work. Which ones? You’ll have to guess! As will I!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"toAbsolute = pathString => stringify(toAbsoluteObj(parse(pathString)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":806,"value":"// TODO: this should probably just be a loop, not recursive…\nfunction toAbsoluteObj(pathObject, last = [0, 0], initial = [0, 0]) {\n if (!pathObject.length) return [];\n const [first, ...rest] = normalizeImplicitCommandsObj(pathObject);\n const newFirst = {\n type: first.type.toUpperCase(),\n values: isRelative(first)\n ? applyXY(x => x + last[0], y => y + last[1])(first)\n : first.values\n };\n last = getEndPoint(newFirst, last, initial);\n if (newFirst.type === \"M\") initial = last;\n return [newFirst, ...toAbsoluteObj(rest, last, initial)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1181,"value":"showTest(toAbsolute)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1454,"value":"_compress = md`---\n\n## compress\n\n- \\`compress(precision)(pathString)\\` → \\`pathString\\`\n\nRounds values to \\`precision\\` number of decimal places.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1455,"value":"compress = precision => pathString => stringify(compressObj(precision)(parse(pathString)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1458,"value":"compressObj = precision => pathObject =>\n pathObject.map(({ type, values }) => ({\n type,\n values: values.map(d => +d.toFixed(precision))\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1155,"value":"_normalizeImplicitCommands = md`---\n\n## normalizeImplicitCommands\n\n- \\`normalizeImplicitCommands(pathString)\\` → \\`pathString\\`\n\nWith all SVG path commands, you can pass as many params as you’d like and it’ll treat them as implicit repetitions of the last command. This function makes them explicit for easier manipulation elsewhere (notably, toAbsolute below).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"normalizeImplicitCommands = pathString =>\n stringify(normalizeImplicitCommandsObj(parse(pathString)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1126,"value":"normalizeImplicitCommandsObj = pathObject =>\n [].concat(\n ...pathObject.map(({ type, values }) => {\n if (!values.length) return { type, values };\n const chunks = [];\n for (let i = 0; i < values.length; i += paramLengths[type]) {\n chunks.push(values.slice(i, i + paramLengths[type]));\n }\n return chunks.map((chunk, i) => {\n let newType = type === \"M\" ? \"L\" : type === \"m\" ? \"l\" : type;\n return { type: i ? newType : type, values: chunk };\n });\n })\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":1998,"value":"showTest(normalizeImplicitCommands)","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"_normalizeHV = md`---\n## normalizeHV\n- \\`normalizeHV(pathString)\\` → \\`pathString\\`\n\nConverts \\`H\\` and \\`V\\` to \\`L\\` path commands, so that other functions can assume the first element is the \\`x\\` coordinate and the second is the \\`y\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"normalizeHV = pathString => stringify(normalizeHVObj(parse(pathString)))","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"// TODO: rewrite; not as reliable as toAbsolute right now, I think it chokes on Z\nfunction normalizeHVObj(pathObject, initial = [0, 0]) {\n if (!pathObject.length) return [];\n const [{ type, values }, ...rest] = pathObject;\n let newValues;\n switch (type) {\n case \"H\":\n newValues = [values[0], initial[1]];\n return [\n {\n type: \"L\",\n values: newValues\n },\n ...normalizeHVObj(rest, newValues)\n ];\n case \"V\":\n newValues = [initial[0], values[0]];\n return [\n {\n type: \"L\",\n values: newValues\n },\n ...normalizeHVObj(rest, newValues)\n ];\n default:\n return [\n { type, values },\n ...normalizeHVObj(rest, type === \"C\" ? values.slice(4) : values)\n ];\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"showTest(normalizeHV)","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`---\n\n### Internal helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1891,"value":"pathstuff = ({\n parse,\n stringify,\n getBBox,\n center,\n translate,\n scale,\n size,\n combine,\n toAbsolute,\n compress,\n normalizeImplicitCommands,\n normalizeHV\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1123,"value":"paramLengths = ({\n M: 2,\n m: 2,\n L: 2,\n l: 2,\n H: 1,\n h: 1,\n V: 1,\n v: 1,\n C: 6,\n c: 6,\n S: 4,\n s: 4,\n Q: 4,\n q: 4,\n T: 2,\n t: 2,\n A: 7,\n a: 7\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2557,"value":"function replaceRecursive(str, regex, newThing) {\n return regex.test(str)\n ? replaceRecursive(str.replace(regex, newThing), regex, newThing)\n : str;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"isRelative = d => d.type === d.type.toLowerCase()","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"getX = ({ type, values }) => {\n switch (type) {\n case \"A\":\n case \"a\":\n return [values[5] - values[0], values[5] + values[0]];\n case \"H\":\n return values;\n case \"V\":\n return [];\n case \"L\":\n case \"l\":\n return values.filter((_, i) => !(i % 2));\n case \"C\":\n case \"c\":\n return values.filter((_, i) => i % 6 === 4);\n case \"Q\":\n case \"q\":\n return values.filter((_, i) => i % 4 === 2);\n default:\n return values.filter((_, i) => !(i % 2));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"getY = ({ type, values }) => {\n switch (type) {\n case \"A\":\n case \"a\":\n return [values[6] - values[1], values[6] + values[1]];\n case \"H\":\n return [];\n case \"V\":\n return values;\n case \"L\":\n case \"l\":\n return values.filter((_, i) => i % 2);\n case \"C\":\n case \"c\":\n return values.filter((_, i) => i % 6 === 5);\n case \"Q\":\n case \"q\":\n return values.filter((_, i) => i % 4 === 3);\n default:\n return values.filter((_, i) => i % 2);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"// \"rx\" is in x-units but not zero-based, notably arc radius, so it should be rescaled but not translated, as even in the absolute coords commands it's relative. same with \"ry\".\napplyXY = (x, y, rx, ry) => ({ type, values }) => {\n switch (type) {\n case \"A\":\n case \"a\":\n return values.map((d, i) => {\n switch (i % paramLengths[type]) {\n case 0:\n return rx ? rx(d) : d;\n case 1:\n return ry ? ry(d) : d;\n case 5:\n return x(d);\n case 6:\n return y(d);\n default:\n return d;\n }\n });\n case \"H\":\n case \"h\":\n return values.map(x);\n case \"V\":\n case \"v\":\n return values.map(y);\n default:\n return values.map((d, i) => (i % 2 ? y(d) : x(d)));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"getEndPoint = ({ type, values }, [x = 0, y = 0], [x0 = 0, y0 = 0]) => {\n switch (type) {\n case \"A\":\n case \"C\":\n case \"L\":\n case \"M\":\n case \"Q\":\n case \"S\":\n case \"T\":\n return values.slice(values.length - 2);\n case \"H\":\n return [values[values.length - 1], y];\n case \"V\":\n return [x, values[values.length - 1]];\n case \"a\":\n case \"c\":\n case \"l\":\n case \"m\":\n case \"q\":\n case \"s\":\n case \"t\":\n const [dx, dy] = values.slice(values.length - 2);\n return [x + dx, y + dy];\n case \"h\":\n return [x + values[values.length - 1], y];\n case \"v\":\n return [x, y + values[values.length - 1]];\n case \"Z\":\n case \"z\":\n return [x0, y0];\n default:\n return [x, y];\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1565,"value":"showPath = path => {\n const bb = getBBox(path);\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3025,"value":"abbr = (str, len = 20) =>\n str.length > len\n ? str.substr(0, len / 2) + \"…\" + str.substr(str.length - len / 2)\n : str","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"md`---\n\n### Test helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2767,"value":"test = userString || presetString","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2538,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":2542,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1527,"value":"lineBreakTest = `\nM4 -4a4 4 0 1 1 0.1 0Z\nM36 -4a4 4 0 1 1 0.1 0Z`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"simpleTest = \"M10 15L30 40L15 30Z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1475,"value":"mayanZeroGlyph = \"M32 0a32 16 0 1 0 1 0zm-30 11q30 18 61 0m-42 -10q-7 8 0 18m12 -19q-8 10 0 20m11 -19q-7 8 0 18\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"simpleRelativeTest = \"m 10 10 l 5 0 5 0 0 5 0 5 -5 0 -5 0 0 5 0 5 5 0 m 5 0 5 0 M 5 0 0 5 m 30 15 30 10 c 30 -15 5 10 20 20\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2212,"value":"simpleArc = \"M20 -4a4 4 0 1 1 0.1 0Z\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":2352,"value":"showTest = context === \"SVG\" ? showTestSVG : showTestCanvas","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"showTestSVG = fn => {\n const bb = getBBox(test);\n return svg``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2350,"value":"showTestCanvas = fn => {\n const bb = getBBox(test);\n const context = DOM.context2d(bb.x + bb.width, bb.y + bb.height);\n context.canvas.style.border = \"1px solid gray\";\n context.canvas.style.transform = \"scale(0.75)\";\n context.strokeStyle = \"#dddddd\";\n context.stroke(new Path2D(test));\n context.strokeStyle = \"red\";\n context.stroke(new Path2D(fn(test)));\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1938,"value":"testOptions = Object.entries({\n complexTest,\n kochFlake,\n texas,\n relativeTest,\n lineBreakTest,\n simpleTest,\n simpleArc,\n mayanZeroGlyph,\n simpleRelativeTest\n}).map(([label, value]) => ({\n label,\n value\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1907,"value":"import { select, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2029,"value":"noneed = md`---\n\n### You may not need this if…\n\nMy actual use case that started all this was just wanting to scale a path without affecting the stroke width. See what happens to the stroke as you scale with an SVG (or CSS) transform?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2135,"value":"viewof scaleSlider2 = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2017,"value":"{\n const bb = getBBox(test);\n return html`\n \n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2160,"value":"md`I didn’t want to have to keep dynamically setting the stroke width inverse to the scale transform. But it turns out that, if this is all you care about, there’s a much easier way: the [\\`vector-effect\\`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/vector-effect) SVG attribute! Try scaling the glyph above and then change this from the default \\`none\\` to \\`non-scaling-stroke\\`:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2140,"value":"viewof vectorEffect = radio({\n options: [\n \"none\",\n \"non-scaling-stroke\",\n \"non-scaling-size\",\n \"non-rotation\",\n \"fixed-position\"\n ],\n value: \"none\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2151,"value":"md`~~~html\n\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2190,"value":"md`You don’t need any JavaScript at all! (The other options have no effect here, are included for completeness.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"md`---\n\n### Notes to self, messing around with other libraries\n\n\\`path-data-polyfill\\` doesn’t work when you import these functions to another Observable notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":983,"value":"// require('https://bundle.run/path-data-polyfill@1.0.3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":990,"value":"// pathDataPolyfill = pathString =>\n// svg``\n// .querySelector(\"path\")\n// .getPathData({ normalize: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1005,"value":"// {\n// const node = svg``;\n// const path = node.querySelector(\"path\");\n// path.setPathData(pathDataPolyfill(test));\n// const newPath = translate(0, -852.36216)(path.getAttribute(\"d\"));\n// return newPath;\n// return svg``;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":1991,"value":"md`\\`svg-path-parser\\` works OK…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1030,"value":"// svgPathParser = require('https://bundle.run/svg-path-parser@1.1.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1258,"value":"// svgPathParser.makeAbsolute(svgPathParser(test))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1302,"value":"md`A polyfill for \\`SVGElement.prototype.getTransformToElement\\`, which was removed from Chrome, from [jointjs](https://www.jointjs.com/blog/announcement-gettransformtoelement-polyfill) and \n[dagrejs](https://github.com/dagrejs/dagre-d3/issues/202#issuecomment-173653044). Haven’t actually used this lol, but I will come back to it and, yknow, re-aquaint myself with matrices…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"// getTransformToElement = elem =>\n// elem\n// .getScreenCTM()\n// .inverse()\n// .multiply(this.getScreenCTM())","pinned":true,"hidden":false,"mode":"ojs"},{"id":2285,"value":"md`When I do get into matrices, I’ll want to remember [which entries correspond to which parameters](https://stackoverflow.com/questions/17824145/parse-svg-transform-attribute-with-javascript/41102221#41102221) of the named transformations…`","pinned":false,"hidden":false,"mode":"ojs"},{"id":836,"value":"todo = md`---\n\n### To-do\n- Add function \\`project([x, y])\\` → \\`[x, y]\\`\n- Add function \\`rotate\\`\n- Add functions \\`centerX\\` and \\`centerY\\`\n- Improve \\`getBBox\\` or add DOM alternative; it fails on Bézier commands (\\`CcSsQqTt\\`) because it doesn’t understand control points, and on arc commands (\\`A\\`) because \\`getX\\` and \\`getY\\` don’t know which way the arc goes\n- Rewrite or eliminate \\`normalizeHVObj\\`\n- Am I wasting cycles converting to absolute repeatedly?\n- Reduce recursion lol`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}