3e:null 3f:["$","title",null,{"children":"Svelte,SVG and D3(2) | gefercan | Observable"}] 45:[] 43:{"id":"6f4148cdfa9d7290","slug":null,"title":"Svelte,SVG and D3(2)","thumbnail":"f53088df575bf84d2bb2ffae2965782c476fa0b85dea85e9e9b3baf7873bcae8","access_level":"public","create_time":"$D2023-07-08T18:21:23.405Z","update_time":"$D2023-07-15T18:14:03.119Z","view_time":null,"first_public_time":"$D2023-07-08T18:21:23.405Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b4d67296fbb33425","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":"starter_2024","bio":"","following":false},"version":92,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afe72ce25af1b858","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"afe72ce25af1b858","login":"gefercan","name":"gefercan","avatar_url":"https://avatars-next.observableusercontent.com/875d286da15d03fe3c437d0ef7e1d69dd380e4e2eb9c13a6cc5aed49cfe3b65b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Svelte,SVG and D3(2)","cells":[{"id":0,"value":"# Svelte,SVG and D3(2)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"
\n
\nSVG
\nA graphic format to make vector visual on the browser trough coordinates\n
\n1) < svg/ >\n
\nThe default size is 300px by 150px, but we can change that using width and height","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"//declaring the svg element\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"2) < rect />\nThe attributes are the position: \"x\" and \"y\", as well as size and height with rounded corners \"rx\" and \"ry\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"//declaring the svg element\n\n //creating the rectangle \n \n\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"3) < colors />\n background color is \"fill\", border color is \"stroke\", and \"stroke-width\", just like it is in p5.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"//declaring the svg element\nx","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"4) < circle /> and \nthe position is by \"cx\" and \"cy, and size is \"r\" for the radius or can be \"rx\" and \"ry\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"//declaring the svg element\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"5) Layering\n
elements lower in the DOM and are drawn on top, z-index does not work here","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"//declaring the svg element\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"6) < line />\nthe position coordinates are x1, x2 for one point and y1,y2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"7) < polyline /> and < polygon />\nhere the parameters are the points ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"8) text
\nthe parameters are \"x\" and\"y\" as well as horizontal alignment \"text-anchor\", \"sominant baseline\" and \"font-family\", \"font-size\", \"font-weight\" and \"font-style\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"9)Path
\nIs the most flexible one and very used to complex shapes. The parameters are \"d\" fro path data and letters have specific meanings like \"M\" to move x and y, \"l\" for a line to x and y, \"H\" for horizontla line and \"V\" for vertical ones, while \"C\" is for curves a nd \"Z\" closes the path and \"Q\" makes a quadratic curve","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"10) Groups: < g />
\nGroups element together, must be used like \" div\" in HTML , a general element to divide\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"//files in app.svelte","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"11) There are other elements like < linearGradient /> and < radialGradient />","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"//files in app svelte","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"