2c:null 2d:["$","title",null,{"children":"Art Tools, Part 2B: SVG Basics | Anjana Vakil | Observable"}] 32:T509, 33:[{"id":"d7f2206f9df3753f1f8af50ca9ab743bbf39869a9018825e0fb9b76f300398aefb582f2ebdd538cb50fa33c04cd97c3d27537e61f7a22fa08b764596af8182d0","href":"https://static.observableusercontent.com/files/d7f2206f9df3753f1f8af50ca9ab743bbf39869a9018825e0fb9b76f300398aefb582f2ebdd538cb50fa33c04cd97c3d27537e61f7a22fa08b764596af8182d0","name":"image@1.png","type":"image/png","lastModified":1632966839565.834,"size":1786193}] 30:{"id":"ba772bd123d566d7","slug":"art-tools-part-2b-svg-basics","title":"Art Tools, Part 2B: SVG Basics","thumbnail":"eb1d067de9ed28cc0ca4925feffbeff7a5fbbafe4fb5a516dba6f4d9b72e3204","access_level":"public","create_time":"$D2021-09-30T01:53:59.565Z","update_time":"$D2021-09-30T15:56:22.328Z","view_time":null,"first_public_time":"$D2021-09-30T14:06:31.085Z","has_unpublished_edits":null,"fork":{"id":"cc7ca819bfa17f8d","slug":"art-tools-part-2a-observable-basics","title":"Art Tools, Part 2A: Observable Basics","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"stars":2,"starred":false,"owner":{"type":"team","id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":"starter_2024"},"version":1376,"publish_version":1376,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}],"members":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"c7f05ec6ff3b45e0","slug":"building-generative-art-tools-with-observable","title":"Building Generative Art Tools with Observable","owner":{"id":"8cc6a24956698638","login":"anjana","name":"Anjana Vakil"}},"type":"notebook","body":{"titling":"auto","title":"Art Tools, Part 2B: SVG Basics","cells":[{"id":0,"value":"# Art Tools, Part 2B: SVG Basics\n\nNow that we know some fundamentals about Observable notebooks, let's start making art!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`In this tutorial, we'll render our art as [Scalable Vector Graphics](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction). As an introduction, let's see how we can draw some [basic shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) (for more advanced curvature, see the [documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) for \\`\\` elements):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":791,"value":"### Coordinate system\n\nSVG `(x,y)` coordinates start from the origin point `(0,0)` at the top left, with `x` increasing to the right and `y` increasing to the left. \n\nPlay with the sliders below to move the black dot around the coordinate space & get a feel for it!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"viewof cx = Inputs.range([0, 400], { label: \"X coordinate\", value: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"viewof cy = Inputs.range([0, 300], { label: \"Y coordinate\", value: 0 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"### Basic shapes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"Some of the [basic SVG shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes) include:\n- ``: rectangle\n- ``: circle\n- ``: text label\n- ``: straight line between two points\n- ``: series of connected lines\n- ``: enclosed shape\n- ``: arbitrary lines, curves, arcs, & more\n\nSee a few examples in the SVG below, and refer to [each element's documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) for more details:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$32","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1067,"value":"displayCaution(`CHALLENGE\n
\nEdit the SVG above to:\n

Position the circle in the bottom-right corner of the SVG\n

Change the color of the text \n

Make the green line thicker`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md`While the above shapes are basic, they can be manipulated, transformed, and animated to create complex figures, like these animated blobs by [@luukschipperheyn](https://observablehq.com/@luukschipperheyn/animated-svg-bezier-blobs):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"display_blobs","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"Exploring the many nuances of SVG allows the creation of incredible work, such as that of [Lionel Radisson (@makio135)](https://observablehq.com/@makio135/creative-coding):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"FileAttachment(\"image@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"## Programatically generating SVGs\n\nWhen making generative art we probably won't want to hard-code our SVGs completely by hand, but rather generate elements/properties of those SVGs programmatically. \n\nFor example, if we want to create a series of concentric circles, we can map over a range array to create the circle elements:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1215,"value":"Note that when programmatically inserting elements into the SVG, as in the example above, we need to wrap our generated circle elements inside an svg\\`` tag (similar to the html\\`` tag we saw earlier) in order for them to be rendered properly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"displayCaution(`CHALLENGE\n
\nCreate a stripe pattern in the SVG below by programmatically drawing a series of vertical lines spaced 20 pixels apart`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"md`### Connecting Inputs to SVGs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"md`As you may have guessed at this point, the key to building generative art tools is creating user interface inputs that control SVG outputs. In the next step, we'll add randomness, but for now, we'll see how to control SVG elements through inputs:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"viewof num_circles = Inputs.range([1, 50], {\n step: 1,\n value: 10,\n label: \"Number of circles\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"displayCaution(`CHALLENGE\n
\nEdit the SVG above and add new cells to:\n

Use a new slider to control the X position of the circles\n

Use a new color-type text input to control the circles' outline (stroke) color`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"## Recap\n\nRecall, in context, we're moving through these steps:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"steps","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"What we've seen so far helps us tackle steps 1 & 2. In the next part of the workshop we'll practice these fundamental steps before moving on to steps 3 & 4.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1316,"value":"## Next step\n\n[**Part III:** Foundations practice](https://observablehq.com/d/9f8cccc3a34d3b7a)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"----------------\n## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import { code_styles, displayCaution } from \"@info474/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"import { display_blobs } from \"@mkfreeman/animated-svg-bezier-blobs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"import { concentric } from \"@mkfreeman/generating-svgs/2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"code_styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"import { steps } from \"4d56a357862d802f\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"