28:null 29:["$","title",null,{"children":"SVGs | Arjun | Observable"}] 2e:T6a68, 2f:T60f, 30:Tc11, 31:Tb94, 32:T2d07, 33:[{"id":"416f0d0acb196e787ff5bc8336706ba33cd67dee774f733eb924dd6d35b683754538bd9d3fb04179527c3e5295b6546aaa6cd380c254d06a810c6130bba79025","href":"https://static.observableusercontent.com/files/416f0d0acb196e787ff5bc8336706ba33cd67dee774f733eb924dd6d35b683754538bd9d3fb04179527c3e5295b6546aaa6cd380c254d06a810c6130bba79025","name":"image.png","type":"image/png","lastModified":1789063830108,"size":368942}] 2c:{"id":"22c41de8cb74786f","slug":"beaver","title":"SVGs","thumbnail":"ab1564c3aa9d7a1f087035c6175e08d3ef5a7f3944eea780310d767e055dccf8","access_level":"public","create_time":"$D2026-09-10T18:06:01.032Z","update_time":"$D2026-09-11T19:06:22.380Z","view_time":null,"first_public_time":"$D2026-09-11T16:59:07.344Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a2152f3a213269e6","login":"arjun-patel","name":"Arjun","avatar_url":"https://avatars-next.observableusercontent.com/755f69d7afecbd46b10be332adf20404f7746643eeacbe824b603ddf69723a95","tier":"starter_2024"},"version":316,"publish_version":316,"role":null,"authored":false,"authors":[{"type":"individual","id":"49fa66f01bed5781","login":"arjun-patel","name":"Arjun","avatar_url":"https://avatars-next.observableusercontent.com/755f69d7afecbd46b10be332adf20404f7746643eeacbe824b603ddf69723a95","tier":null}],"members":[{"type":"team","id":"a2152f3a213269e6","login":"arjun-patel","name":"Arjun","avatar_url":"https://avatars-next.observableusercontent.com/755f69d7afecbd46b10be332adf20404f7746643eeacbe824b603ddf69723a95","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"SVGs","cells":[{"id":1,"value":"#### Technical Assignment 1 - Arjun Patel\n# SVGs\nThis is the technical assignment for the class Visualising Insights. I wil be making 3 SVGs, three different ways. First in Illustrator, second coding on Observable in html and third using an LLM (Claude).\n\nAbout the image, this is a beaver and I am using a meme as a reference to create this illustration in Adobe Illustrator first.\n\n1. Reference Image\n2. Created in Illustrator\n3. Created in Observable (no LLM)\n4. Created with an LLM\n5. Learnings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"----\n## 1. Reference image\n\nHere is the reference image. It is a beaver on top of a hill, screaming at the world. (maybe my spirit animal)\n\n\n[Source](https://in.pinterest.com/pin/820710732098128967/)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"display(html`

`)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"----\n## 2. Created in Illustrator\n\n\nThis is the version that I created in illustrator.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$2e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"pray for me, as I recreate this by hand","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"----\n## 3. Recreated by me in Observable\n\n\n\n\n#### 3.1 Attempt 1\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$2f","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"#### 3.2 Attempt 2\n\nFor this attempt, I established styles so that I do not have to keep using hastags for colors (suggested by Claude).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"---\n ## 4 Created with Claude\n\n #### 4.1 Attempt 1\n Fed my LLM my illustration, the reference image and asked it generate the SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$31","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"After refinement","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$32","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"----\n ## Learnings\n\n 1. Coding is hard. It rewards logic.\n 2. Styles are an easy way to cut down work.\n 3. I think there is value in knowing how a SVGs work. It enables you to find where the issue is. I think LLMs can help you fix them if you know where to look.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 2d:"$2c:body"