2b:null 2c:["$","title",null,{"children":"SVG Attributes stroke-linejoin, stroke-miterlimit | Shreshth Mohan | Observable"}] 32:[] 2f:{"id":"a04a51bd5e47705b","slug":"svg-attributes-stroke-linejoin-stroke-miterlimit","title":"SVG Attributes stroke-linejoin, stroke-miterlimit","thumbnail":"3f48befe7c99d230e5812fad4e2ecc6c0df53418b1dd490955586e04e2b1ea8a","access_level":"public","create_time":"$D2022-02-08T10:39:21.306Z","update_time":"$D2022-02-13T23:49:09.082Z","view_time":null,"first_public_time":"$D2022-02-08T11:06:00.928Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":"starter_2024"},"version":115,"publish_version":115,"role":null,"authored":false,"authors":[{"type":"individual","id":"f190f9c94eb4b295","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":null}],"members":[{"type":"individual","id":"f190f9c94eb4b295","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"9397850e71d523f3","slug":"svg-attributes","title":"SVG Attributes","owner":{"id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan"}},"type":"notebook","body":{"title":"SVG Attributes stroke-linejoin, stroke-miterlimit","cells":[{"id":0,"value":"# SVG Attributes stroke-linejoin, stroke-miterlimit","pinned":false,"hidden":false,"mode":"md"},{"id":58,"value":"- Note as you make the join angle sharp, at a point, the joint gets clipped (bevel joint)\n- Now if you increase the miter limit, that clip can be removed.\n- You can change the type of joint with `stroke-linejoin`","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"viewof xOffset = Inputs.range([10, 100], { step: 1, label: \"Angle control \" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof linejoin = Inputs.select(linejoinOptions, { label: \"stroke-linejoin\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof miterlimit = Inputs.range([0, 100], {\n label: \"stroke-miterlimit\",\n value: 4,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":98,"value":"To check / demo the behavior of stroke-linejoin=\"**arcs**\". Switch between arcs and miter to note if there's a difference. Looks like arcs isn't implemented in any of the browsers yet.","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"viewof linejoin2 = Inputs.select(linejoinOptions, {\n label: \"stroke-linejoin\",\n value: \"arcs\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":64,"value":"## TODOs\n- the math of stroke-miterlimit","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"startX = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"linejoinOptions = [\"miter\", \"arcs\", \"bevel\", \"miter-clip\", \"round\"]","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"