` for the title bar or as a tooltip pointer\n- `` for adding in a full description\n\n**Basic Shapes**\n- ``\n - structure = location and size\n - cx = center x-coordinate\n - cy = center y-coordinate\n - r = radius\n - presentation = colors and other styles\n - stroke = outline color\n - fill = fill color ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"{\n const a = \"\";\n return htl.html`\n
\n
Grouping Graphic Objects
\n
\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"**Transforming the Coordinate System**\n- `` - transforms the original `whiskers` group. Edit the code to see the attributes\n- `scale(-1, 1)` - the point `(75, 79)` will now become `(-75, 79)`\n- `translate(-140,0)` - we move the coordinate system 140px to the right (the negative direction) to get the whiskers to where we want to be. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"**Other Basic Shapes**\n- `` - pairs of x and y coordinates\n- `` - all basic shapes are shortcuts for this general element. Path = sequence of lines and curves.\n - `/` translates to:\n - Move to coordinate `(75, 90)`\n - Draw a line to coordinate `(65, 90)`\n - Draw an elliptical arc with an x-radius of 5 and y-radius of 10, ending back at `(75, 90)`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"**Text**\n- Use this element to render pure text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"

3e:null 3f:["$","title",null,{"children":"SVG Essentials - Chapter 1 | Momo | Observable"}] 45:[] 43:{"id":"e92c1448ae4275d7","slug":null,"title":"SVG Essentials - Chapter 1","thumbnail":"48bd4f85a9d732a6032d48ec6a3e61964c51b9d609993178b9755438d04267ea","access_level":"public","create_time":"$D2023-09-10T21:35:42.831Z","update_time":"$D2023-09-12T17:13:16.006Z","view_time":null,"first_public_time":"$D2023-09-10T21:35:42.831Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"aa9094725c2de5c1","login":"momoworkspace","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/ea6e105144503866c5b3a069ec819d39bbff1f613b3f106ad6dc38539185a6b4","tier":"starter_2024","bio":"","following":false},"version":103,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d38a3daf7b8ff260","login":"momo123","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/6b9aaaa3b53378579c37db4055f91c6c90c2b657c50565b56343f45f6c68e064","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"d38a3daf7b8ff260","login":"momo123","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/6b9aaaa3b53378579c37db4055f91c6c90c2b657c50565b56343f45f6c68e064","tier":null,"role":"editor"},{"type":"team","id":"aa9094725c2de5c1","login":"momoworkspace","name":"Momo","avatar_url":"https://avatars-next.observableusercontent.com/ea6e105144503866c5b3a069ec819d39bbff1f613b3f106ad6dc38539185a6b4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"149643df131c83a3","slug":"svg-essentials","title":"SVG Essentials","owner":{"id":"aa9094725c2de5c1","login":"momoworkspace","name":"Momo"}},"type":"notebook","body":{"titling":"auto","title":"SVG Essentials - Chapter 1","cells":[{"id":0,"value":"# SVG Essentials - Chapter 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"SVG = Scaleable Vector Graphics; an application of XML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"# Graphics Systems\n**Raster Graphics**\n- Image represented as a rectangular array of pixels\n- Cannot change shape/color\n- Formats: jpeg, gif, png\n\n**Vector Graphics**\n- Image described as a series of geometric shapes. A vector viewing program receives commands to draw shapes at specified sets of **coordinates**\n- Can change shape/color\n- Formats: svg\n- Files are encoded in binary format or tightly packed bitstreams\n- Can be scalable without loss of image quality, unlike raster graphics","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"# Creating an SVG Graphic\n**Document Structure**\n- root `