2b:null 2c:["$","title",null,{"children":"PI Day SVG pie | Jose Jimenez | Observable"}] 31:T583,PIpie = html`` 32:T41c,md`## Adding PI to pie Simple, right? Just copy the SVG path into our SVG container. Like opening a can of filling and dumping it in. PI's path looks like this: `33:T53f,html` `34:T55e,html` `35:T56e,html` `36:T59a,html` `37:T582,PIpieCopy = html`` 38:[] 2f:{"id":"91fa43e4dbdd6fc2","slug":"pi-day-svg-pie","title":"PI Day SVG pie","thumbnail":"5ceb82ce6beeadbe00e888fedb17f6351743be1ffabbf25af90fec0d6dd0da3d","access_level":"public","create_time":"$D2018-03-06T19:36:51.328Z","update_time":"$D2018-03-14T23:22:35.968Z","view_time":null,"first_public_time":"$D2018-03-14T23:24:44.570Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"11eff763c21b0530","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":"starter_2024"},"version":426,"publish_version":426,"role":null,"authored":false,"authors":[{"type":"individual","id":"214adfe1a708eb31","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":null}],"members":[{"type":"individual","id":"214adfe1a708eb31","login":"jjimenez","name":"Jose Jimenez","avatar_url":"https://avatars-next.observableusercontent.com/5d28ac3054c420a200dcd8a0bd3367e2263d2f168c4aa5eaa0c89640622d6088","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"PI Day SVG pie","cells":[{"id":0,"value":"md `# PI Day SVG pie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"md`Have a nice SVG PI Day pie.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"md`If you make changes, save it and share it on twitter. Tag me @jj_jose_jimenez.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":271,"value":"DOM.download(await rasterize(PIpie), null, \"Download as PNG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"md`## What I learned from this\n\nMaking a pie requires the following ingredients:\n* an SVG container\n* a circle to hold the pie crust\n* a circle to emphasize the crust edges\n* PI\n* colors\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":142,"value":"md`## The basic circle\ncreating a circle with SVG is pretty straight forward. I've used an object called [centers](#centers) to decide where to place it.\nHere is the first circle I created.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"basic_circle = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":152,"value":"md`It doesn't have anything in it and the crust edges are just a black line. How boring... Or is it really burnt?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"md`## Making the Crust\nUsing google I found a nice color for the crust and added it to the fill of the circle. \nBut the edges don't look all that great.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"md`## Adding the edges\nThis version adds a color for the edges that is just a bit darker than the crust and starts to crimp the edges using the [stroke-linecap and stroke-dasharray](https://www.w3schools.com/graphics/svg_stroking.asp) attributes. I also changed the width of the stroke`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":166,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"viewof strokeWidth = slider({\n min: 10, \n max: 50, \n step: 1, \n value: 20, \n title: \"Stroke Width\", \n description: \"Play with this slider to see the impact of the stroke width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"viewof edge1_color = color({\n value: \"#c1915b\",\n title: \"The crust edge color\",\n description: \"Pick a different color for the crust edge. I've translated the rgb value I picked out to Hex to make it easier.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"md`That's better, but I think the edges need some more work, you know how there is always a bit of the edge where its a bit more burnt than the rest, even if you use foil to cover the edges?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"md`## A bit darker on the edges\n\nOne way to do this is to add a second circle, make sure the fill is set to none and work on the edges. The second circle should come after the first in the SVG because subsequent items always layer on top of previous when an SVG renders. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":197,"value":"viewof strokeDiff = slider({\n min: 1, \n max: 9, \n step: 1, \n value: 9, \n title: \"Second Stroke Difference from First\", \n description: \"Play with this slider to see the impact of changing the difference of the width of the second circle stroke relative to the first.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"md`So now we have a pie, but it needs a PI. Luckily, we can get PI from [Wikimedia](https://commons.wikimedia.org/wiki/File%3APi-symbol.svg#/media/File:Pi-symbol.svg). And bring it in to our svg directly.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":205,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"md`Ummm... That doesn't turn out the way I expected it to. The PI symbol is too big!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"md`## Scaling and Transforming PI to fit our pie\nLet's start with the size.\nAdding \n\n transform=\"scale()\" \n\nwill change the size based on scaling it by that number. 2 would make it two times the size, 0.5 makes it half as big. For more information about all the transforms check out the [Mozilla transform documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"viewof samplePiScale = slider({\n min: 0.100, \n max: 3.141, \n step: 0.001, \n value: .314, \n title: \"PI Scale\", \n description: \"Play with this slider to see how it impacts the size of PI\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":234,"value":"md`Now lets see about the orientation. I don't think it looks as good just standing up straight like that. \nUsing \"rotate\" in our transform attribute value helps that problem.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":236,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":230,"value":"md`It still isn't right, we need to see about the position. We need to move PI into the center of the pie and we use \"translate\" in our transform for that.\nI based the x and y offsets on the origin of the circle. To figure out where I wanted it, I used the sliders you'll see at the bottom of the notebook.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"md`The final product has the PI symbol colored like a cherry pie filling after baking. That is as simple as picking the right color and setting it in the path's fill attribute. You can head back to the [top]('#PIpie') or keep scrolling down to check that out.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"md`## Settings\nPlay with these to impact the way the pie displays up top (I've placed a copy here too) and some of the interviening steps also.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":278,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"viewof offsetx = slider({\n min: 50, \n max: 250, \n step: 1, \n value: 57, \n title: \"Offset X\", \n description: \"PI offset for x from the circle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":72,"value":"viewof offsety = slider({\n min: 50, \n max: 250, \n step: 1, \n value: 105, \n title: \"Offset Y\", \n description: \"PI offset for y from the circle\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"viewof piScale = slider({\n min: 0.100, \n max: 3.141, \n step: 0.001, \n value: .314, \n title: \"PI Scale\", \n description: \"Scale for PI\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"viewof PIColor = color({\n value: \"#5e1642\",\n title: \"The color of PI\",\n description: \"Pick a different color for the PI filling. I've translated the rgb value I picked out to Hex to make it easier.\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"center = ({x: 200, y:200})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"centers = ({circle: {x: center.x, y:center.y}, pi: {x: center.x - offsetx, y: center.y - offsety}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"md`[Go Back to the Basic circle](#basic_circle)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"md`## Imports and libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":284,"value":"external_link_styles = html`\nThis cell sets up the external link styles, but only displays this text (there are a link and a style tag in the definition of this cell).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"