2c:null 2d:["$","title",null,{"children":"Transforming and Rotating a Kale Leaf in Various Ways | Audrey Roy Greenfeld | Observable"}] 32:T5bc,kale = svg``33:T617,{ let x = svg``; x.setAttribute('transform', 'translate(200, 20)'); return d3.select(x).node(); }34:T63e,//kale.setAttribute('transform', 'rotate(90)') { let y = svg``; y.setAttribute('transform', 'rotate(90)'); return d3.select(y).node(); }35:T638,{ let z = svg``; return d3 .select(z) .transition() .duration(7500) .attr('transform', 'rotate(180)') .node(); }36:T604,{ let svgNode = svg``; while (true) { yield d3.select(svgNode).node(); } }37:T6f5,{ const a = svg``; const node = d3.select(a); let x = 0; let y = 0; while (true) { x += 100; y += 100; //svgNode.attr("transform", d => `translate(${x}, ${y})`); yield node.node(); await node .transition() .duration(2000) .attr("transform", d => `translate(${x}, ${y})`); } }38:T69c,{ const a = svg``; const node = d3.select(a); let theta = 0; while (true) { theta += 10; yield node.node(); await node .transition() .duration(100) .attr("transform", d => `rotate(${theta})`); } }39:[] 30:{"id":"87efe9eb3ccfd45f","slug":"transforming-and-rotating-a-kale-leaf-in-various-ways","title":"Transforming and Rotating a Kale Leaf in Various Ways","thumbnail":"83906e801023d756b02dd9d1655fa08cf1d083f44cd2b977078cbbf3149191e3","access_level":"public","create_time":"$D2019-10-14T03:53:21.404Z","update_time":"$D2019-10-14T21:58:08.462Z","view_time":null,"first_public_time":"$D2019-10-14T21:59:37.627Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"90e841cf88d04d69","login":"audreyfeldroy","name":"Audrey Roy Greenfeld","avatar_url":"https://avatars-next.observableusercontent.com/3d373a731c438f2d3c00430b66ede2708c86b1bcd00b1a4e789dfed0ada12a09","tier":"starter_2024"},"version":165,"publish_version":165,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d71ae4a4a021327","login":"audreyfeldroy","name":"Audrey Roy Greenfeld","avatar_url":"https://avatars-next.observableusercontent.com/3d373a731c438f2d3c00430b66ede2708c86b1bcd00b1a4e789dfed0ada12a09","tier":null}],"members":[{"type":"individual","id":"5d71ae4a4a021327","login":"audreyfeldroy","name":"Audrey Roy Greenfeld","avatar_url":"https://avatars-next.observableusercontent.com/3d373a731c438f2d3c00430b66ede2708c86b1bcd00b1a4e789dfed0ada12a09","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Transforming and Rotating a Kale Leaf in Various Ways","cells":[{"id":0,"value":"md`# Transforming and Rotating a Kale Leaf in Various Ways\n\nI'm very excited about the idea of getting my SVG files into Observable. Vector illustration has been my longtime hobby (15 years!), and I can't wait to use those SVGs in Observable notebooks and JS projects.\n\nI created the following kale leaf in Inkscape in 2012. Let's see if we can get it into Observable and animate it.\n\n## Getting the Basics of Display Down\nFirst I optimized it with [SVGOMG](https://jakearchibald.github.io/svgomg/). I downloaded it and opened it in a text editor. I copied the raw SVG code. Then I pasted it into a \\`svg\\` block.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"md`It looks like when you use the \\`svg\\` function, you get a \\`SVGSVGElement\\`:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"kale","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`## Getting One-Time Animations Working\n\nFirst, I tried translation: using the SVG API to move it over 200 to the right, 20 down:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"md`Next, I tried rotating it by 90 degrees:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"md`Then I tried a d3 transition, which is a one-time operation:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"md`## Getting an Animation Loop Working\nNow I'm trying a generator loop, which is *Option 2* of [Animation Loops](https://observablehq.com/@mbostock/animation-loops):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"md`Let's see if I can modify its position in the while loop. The following worked, but you'll probably have to re-run the cell since the kale's probably drifted completely out of view by now.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":150,"value":"md`I should probably use rotation instead, since it's going beyond the page:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":71,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"d3 = require(\"d3@5\", \"d3-transition@1.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 31:"$30:body"