27:null 28:["$","title",null,{"children":"\"Thickened\" line with SVG filled Bezier | Eric Field | Observable"}] 2d:[] 2b:{"id":"1a3909541baf6fb1","slug":null,"title":"\"Thickened\" line with SVG filled Bezier","thumbnail":"27e271953997908f140886bb80ecb6b067bc00def1ee1f2f94a69e66d9347686","access_level":"public","create_time":"$D2023-04-12T21:41:28.510Z","update_time":"$D2023-04-19T01:17:12.334Z","view_time":null,"first_public_time":"$D2023-04-13T01:06:44.849Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":199,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"407c620feb10695c","slug":"misc","title":"misc","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"title":"\"Thickened\" line with SVG filled Bezier","cells":[{"id":0,"value":"# \"Thickened\" line with SVG filled Bezier","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"A simple bezier curve, using `` with the C command. \nSee [this explanation](https://css-tricks.com/svg-path-syntax-illustrated-guide/) about 1/3 of the way down the page.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"viewof point1 = Inputs.range([0, 300], {label: \"left control point X\", step: 1, value: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"viewof point2 = Inputs.range([0, 300], {label: \"right control point X\", step: 1, value: 250})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"viewof height = Inputs.range([0, 100], {label: \"height\", step: 1, value: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"---\n## \"thicken\" a line using this\nNow draw on y=0 for control (using the to be able to easily go negative (up)) \nMirror the coordinates about the line (using +/- flip about 0 for vertical coordinates makes this easy) \nand draw a line (L) to connect them, and close (Z) to start. \nThen give it a fill. \nThe `` object is just there for visual reference and can be removed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":163,"value":"M: move to coordinate without drawing \nC: Bezier curve. Sequence is handle_control_point, handle_control_point, ending_point_of_curve \nL: Draw straight line to coordinate \nZ: Close polygon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"---\n## Now turn the inputs into variables\nincluding location and rotation to be able to use this in many places.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"lineStartX = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"lineLengthX = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"startHalfWidth = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"endHalfWidth = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"innerControlPointHalfWidth = 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"leftControlPointX = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"rightControlPointX = 270","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"translateX = 50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"translateY = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"rotate = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"### ^^ Edit the variable values to see the result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"### Then use code / data / calculations to set these values and instantiate.\nof course we can create a function that generates this given inputs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"