Component 1

2c:null 2d:["$","title",null,{"children":"Understanding the SVG \\`\\` Element | Lawrence Thatcher | Observable"}] 32:T5e8,md`## The Basics Since MDN does a much better job at [explaining](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Path_commands) these topics than we intend to, we'll defer a more in depth explanation to them. However, the basic principle is that there are several main _**types**_ of path commands: | type | command tokens | |-------------|----------------| | Move To: | M | | Line To: | L, H, V | | Curves: | Q, T, C, S | | Arcs: | A | | Close Path: | Z | > **Note:** Each command also has a _lower-case_ version for _relative_ path changes. For simplicity we will primarily discuss the absolute versions in this notebook. Looking at various \`\` elements you'll notice series of numbers intermixed between command tokens, these are the _parameters_ to the path commands. Each command has an expected number of parameters it takes in: | command | # parameters | |---------|--------------| | M | 2+ | | L | 2+ | | H | 1+ | | V | 1+ | | Q | 4+ | | T | 2+ | | C | 6+ | | S | 4+ | | A | 7+ | | Z | 0 | > **Note:** The commands with a \`+\` next to them can take in any _multiple_ of the specifed number of params generally implictly performing another action of the same command. This however varies such as in the case of \`M\` which is mentioned below. `33:T508,viewof checked = { const div1 = html`Component 1` const div2 = html`Component 2` const div3 = html`Component 3` const div4 = html`Component 4` const div5 = html`Component 5` const result = html`${div1} ${div2} ${div3} ${div4} ${div5}` div1.onclick = () => { vals[0] = div1.querySelector("#t1").checked; } div2.onclick = () => { vals[1] = div2.querySelector("#t2").checked; } div3.onclick = () => { vals[2] = div3.querySelector("#t3").checked; } div4.onclick = () => { vals[3] = div4.querySelector("#t4").checked; } div5.onclick = () => { vals[4] = div5.querySelector("#t5").checked; } let vals = [div1.querySelector("#t1").checked, div2.querySelector("#t2").checked, div3.querySelector("#t3").checked, div4.querySelector("#t4").checked, div5.querySelector("#t5").checked] d3.select(result).property("value", vals).dispatch("input"); return result; }34:[] 30:{"id":"4a5417678cc648a0","slug":"svg-paths","title":"Understanding the SVG \\`\\` Element","thumbnail":"438efaca444567f84bfd904d4a88ff40b628c11f02ee575fd30e140056d92341","access_level":"public","create_time":"$D2018-09-18T23:01:13.833Z","update_time":"$D2018-09-19T09:04:00.391Z","view_time":null,"first_public_time":"$D2018-09-18T23:20:24.864Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"fe780737d88b9b25","login":"lwthatcher","name":"Lawrence Thatcher","avatar_url":"https://avatars-next.observableusercontent.com/0a65531a6560640a422e9d867df27dfaf6b6082c1ff4f92a53372ecbeb785ba0","tier":"starter_2024"},"version":429,"publish_version":429,"role":null,"authored":false,"authors":[{"type":"individual","id":"8450d56c8907b6b4","login":"lwthatcher","name":"Lawrence Thatcher","avatar_url":"https://avatars-next.observableusercontent.com/0a65531a6560640a422e9d867df27dfaf6b6082c1ff4f92a53372ecbeb785ba0","tier":null}],"members":[{"type":"individual","id":"8450d56c8907b6b4","login":"lwthatcher","name":"Lawrence Thatcher","avatar_url":"https://avatars-next.observableusercontent.com/0a65531a6560640a422e9d867df27dfaf6b6082c1ff4f92a53372ecbeb785ba0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Understanding the SVG \\`\\` Element","cells":[{"id":0,"value":"md`# Understanding the SVG \\`\\` Element\nThis notebook is designed to help understand the \\`d\\` attribute within SVG \\`\\` elements.\n\nThe \\`d\\` attribute defines the path with a string represing a series of **_path commands_**. \nUnderstanding what these commands are, and how they are used should help make the \\`\\` element a little less intimidating.\n\n\n_[MDN web docs](https://developer.mozilla.org)_ has several great tutorials and explanations which we'll we drawing from (yes, the pun _was_ intended) in a few interactive examples and tasks. For convenience we'll include some of these links right here:\n\n- [SVG Paths](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths)\n- [path commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#Path_commands)\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`## Task 1: Removing Components\n\nWe'll start by taking a simple example from [Material Design Icon](https://materialdesignicons.com/), using the _\"sticker-emoji\"_ icon developed by Google.\nWe're going examine the path element providied and try to remove the smiley face within the box.\n\nIf we download the SVG version, we'll get something that looks like this:\n> \\`\\`\\`\n\n\\`\\`\\`\n\nIf we drop this into an \\`\\` element, we'll see the icon smiling back at us: \n${html``}\n\nTo **_remove_** the smile we'll need to be able to find the corresponding commands in the path that generate the smile and remove those.\nThis task can be done without requiring a thorough knowledge of each path command, we only really need to understand that each component is defined by a _sub path_ sequence.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`### Individual Components\nThe _**MoveTo**_ command \\`M\\` moves the _current point_ to the specified coordinates,\neffectually creating a new _sub path_.\n\n| command | parameters | explanation |\n| ------- | ---------- | ----------- |\n| M | (x, y)+ | Move the current point to the coordinate x,y. |\n\n> **Note:** Any subsequent coordinate pair(s) are interpreted as parameters for implicit absolute LineTo (L) commands.\n\nThis allows us to split out the seperate components of our icon by using the \\`M\\` token as a delimiter:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"components = {\n let parts = PATH.split(/[M]/).slice(1)\n parts = parts.map(p => \"M\" + p)\n return parts\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"md`We can reconstruct the original path by appending all of our components back together:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"path = {\n return components.reduce((acc,cur) => acc + cur, \"\") \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"md`### Interactive Task\nThe SVG icon on the right recombines the components into a single \\`\\` element with multiple sub paths.\nIndividual components can be **disabled** using the **checkboxes** below.\n\nExperiment with these settings to see how the components interact with eachother.\nSee if you can remove the smiley face.\nUse the SVG on the left for reference (hovering over a component with your mouse will display the component number).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`\n### Splitting Hairs\nAn alternative way of drawing the SVG might have been to seperate each component into it's own path element:\n> \\`\\`\\`\n\n\\`\\`\\`\n\nDoing so, however, might lead to some unexpected results:\n\n| single path | seperate paths |\n| ----------- | -------------- |\n| ${html``} | ${html``} |\n\n**What happened?!** Where did our smiley face go?\n\nTo answer this we need to take a closer look at how the SVG handles each sub path.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"md`### Masking Things\nLet's try drawing the first couple of components individually:\n\n| Component 1 | Component 2 |\n|----|---------|\n|${html``} | ${html``} |\n\nNotice how the areas of \\`Component 1\\` and \\`Component 2\\` overlap?\nWhen drawn as seperate path elements we simply get one black block on top of another,\nbut when drawn as distinct _sub paths_ within the same \\`\\` element this overlap creates a _masking effect_ -- effectively negating the overlapping region.\n\nYou can notice this effect in the interactive example,\nfor instance you can achieve an \"inverse\" of the original by combining the last four components into the same path.\n\n\n${html``}\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"md`## Task 2: Mastering Arcs\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"md`> **COMING SOON**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"md`## Task 3: Curves!\n> **COMING SOON**\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"svg2 = `\n \n \n \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"svg3 = `\n \n \n \n \n \n \n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"PATH = \"M5.5,2C3.56,2 2,3.56 2,5.5V18.5C2,20.44 3.56,22 5.5,22H16L22,16V5.5C22,3.56 20.44,2 18.5,2H5.5M5.75,4H18.25A1.75,1.75 0 0,1 20,5.75V15H18.5C16.56,15 15,16.56 15,18.5V20H5.75A1.75,1.75 0 0,1 4,18.25V5.75A1.75,1.75 0 0,1 5.75,4M14.44,6.77C14.28,6.77 14.12,6.79 13.97,6.83C13.03,7.09 12.5,8.05 12.74,9C12.79,9.15 12.86,9.3 12.95,9.44L16.18,8.56C16.18,8.39 16.16,8.22 16.12,8.05C15.91,7.3 15.22,6.77 14.44,6.77M8.17,8.5C8,8.5 7.85,8.5 7.7,8.55C6.77,8.81 6.22,9.77 6.47,10.7C6.5,10.86 6.59,11 6.68,11.16L9.91,10.28C9.91,10.11 9.89,9.94 9.85,9.78C9.64,9 8.95,8.5 8.17,8.5M16.72,11.26L7.59,13.77C8.91,15.3 11,15.94 12.95,15.41C14.9,14.87 16.36,13.25 16.72,11.26Z\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"css = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"