2b:null 2c:["$","title",null,{"children":"SVG stroke-dasharray, stroke-dashoffset and pathLength | Shreshth Mohan | Observable"}] 32:[] 2f:{"id":"09a9db89f3214838","slug":"svg-stroke-dasharray-stroke-dashoffset-and-pathlength","title":"SVG stroke-dasharray, stroke-dashoffset and pathLength","thumbnail":"bd4179f026292f65ce9ba0d0c5b39375a7a7d9351d442548276b3f5978dcd69c","access_level":"public","create_time":"$D2022-02-07T16:17:44.503Z","update_time":"$D2022-02-09T08:35:46.449Z","view_time":null,"first_public_time":"$D2022-02-07T17:11:22.219Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan","avatar_url":"https://avatars-next.observableusercontent.com/0e808176c1a435a909a72a1a5c73f111b8f5bef619bff383261ca32002c5de57","tier":"starter_2024"},"version":351,"publish_version":351,"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":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"9397850e71d523f3","slug":"svg-attributes","title":"SVG Attributes","owner":{"id":"73bc516ca29b1924","login":"shreshthmohan","name":"Shreshth Mohan"}},"type":"notebook","body":{"title":"SVG stroke-dasharray, stroke-dashoffset and pathLength","cells":[{"id":0,"value":"# SVG stroke-dasharray, stroke-dashoffset and pathLength","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"Play with the controls below\n- First, change both and see what happens\n- Now increase **stroke-dasharray to the max**, and then drag **stroke-dashoffset from max to min** and reverse all the way. This behaviour can be used to **animate SVG line paths**.","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"viewof strokeDash = Inputs.form({\n offset: Inputs.range([0, 100], {\n value: 20,\n step: 1,\n label: \"stroke-dashoffset\"\n }),\n array: Inputs.range([0, 100], {\n value: 20,\n step: 1,\n label: \"stroke-dasharray\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":84,"value":"md`\n- If we don't set **pathLength**, it will depend on the shape. Think of pathLength like the perimeter of a closed shape. So a larger shape will have a greater pathLength (TODO: show an interactive example: circle radius -> pathLength). By fixing the pathLength we can make sure \\`stroke-dasharray\\` and \\`stroke-dashoffset\\` can be used to make more predictable changes (without having to use JavaScript).\n- Note the when **stroke-dashoffset is 0** and **stroke-dasharray is 100** the \\`\\` has a weird **notch** in one corner! Segue into **stroke-linecap**! 👇🏽`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"## stroke-linecap","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"viewof strokeLinecap = Inputs.select([\"butt\", \"round\", \"square\"], {\n label: \"stroke-linecap\",\n value: \"butt\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"viewof strokeWidth = Inputs.range([1, 50], {\n label: \"stroke-width\",\n value: \"30\",\n step: \"0.5\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"viewof strokeDashArray = Inputs.range([0, 100], {\n label: \"stroke-dasharray\",\n value: \"100\",\n step: \"1\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":117,"value":"md`\n- This \"notch\" issue won't happen when a \\`\\`'s \\`stroke-dasharray\\` is **0(default)**. But you'll see it when you have \\`stroke-dasharray\\` set to any value **other than 0**, since the default \\`stroke-linecap\\` value is **butt**.\n- The same thing will happen with an open \\`\\` too.\n- The \"notch\" won't be noticeable when stroke-width is small.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"## stroke-dasharray\n- One thing isn't clear from the first example, **stroke-dasharray accepts an array of values**.\n- Each **pair** of values represent **a dash and a gap**. If an odd number of values are provided, they are repeated to get pairs.\n- Change the numbers below to see what changes. % values are also accepted.\n- For instance, try 2% 2% 4% 4%","pinned":false,"hidden":false,"mode":"md"},{"id":324,"value":"viewof multipleDashes = Inputs.text({\n label: \"stroke-dasharray\",\n value: \"10 20 30 40\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":181,"value":"## TODOs\n- stroke-linecap static options\n- pathLength interactive (id selector in obs)","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"## More\n- [CSS Tricks: How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/)\n- [CSS Tricks: pathLength trick for fixing pathLength](https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/) pathLength doesn't have to be set to **1** for it to work. In the example above, it's set to 100. That's why input range for `stroke-dasharray` and `stroke-dashoffset` is 0 to 100. It can be any arbitrary but fixed value for the trick to work.\n","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"side = 200","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"