2a:null 2b:["$","title",null,{"children":"SVG Art Exercise - Keval | Keval Parekh | Observable"}] 30:T411,31:[] 2e:{"id":"d9126f8616ebe1ce","slug":"svg-art-exercise","title":"SVG Art Exercise - Keval","thumbnail":"807b74baccec06555c7d6a3ba40a4fc3386aaae7abc510a2f35db129b0509455","access_level":"public","create_time":"$D2022-09-13T23:20:29.982Z","update_time":"$D2022-09-15T20:28:33.082Z","view_time":null,"first_public_time":"$D2022-09-13T23:55:50.616Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c13ce79fb895c9f0","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":"starter_2024"},"version":39,"publish_version":39,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f1c0408c5c585a9","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":null}],"members":[{"type":"individual","id":"1f1c0408c5c585a9","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SVG Art Exercise - Keval","cells":[{"id":0,"value":"# SVG Art Exercise - Keval\n- Piet Mondrian's Composition (No. 1) Gray-Red (https://www.artic.edu/artworks/65821/composition-no-1-gray-red)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"$30","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"# My Approach\n- I started off by drawing a sketch of the art and mapping all the coordinates (my artboard size is 800px x 800px)\n- Assuming that svg follows the same sequential process of rendering elements similar to HTML, I built a base white background rectangle\n- Then I made the two grey rectangles (As per the original, the top-left rectangle looks like a perfect square and the bottom-left looks like a rectangle with width greater than the height). So I tried replicating that with a lot of trial and error\n- After this, I made the two vertical lines and three horizontal lines that divide the art (there was a lot of triial and error to make it look very similar to the original - for example, the spacing in between the horizontal lines, the square that forms at the intersection of the vertical and horizontal lines)\n- After this, I moved on to the bottom-right shapes - red and grey rectangles and the lines\n- I used an online colour picker tool to replicate the colours ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"# A try at another work of art [WIP]\n\n**Flowers by Andy Warhol** (https://www.artic.edu/artworks/229355/flowers)\n\n- This was way too difficult, especially tracing the flowers to make it very similar to the original art piece\n- I wanted to work on something more challenging than the one above and I was especially interested in learning to use the path element in svg.\n- I looked at **Quadratic** curves and **Cubic** curves to replicated the curves of the flower petals\n- Not sure how would I attempt to code the background of the artwork!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"