31:T439,# [Cubic Béziers curves](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#b%C3%A9zier_curves) Cubic Béziers curves requires a control point on **both the start point and the end point**. ```js C cpx1 cpy1, cpx2 cpy2, x y (or) c cpdx1 cpdy1, cpdx2 cpdy2, dx dy ``` The shortcut for stringing together multiple quadratic Béziers, called with T. ```js S x2 y2, x y (or) s dx2 dy2, dx dy ``` 32:[] 2f:{"title":"World Art Nouveau Day June 10th","cells":[{"id":0,"value":"# World Art Nouveau Day June 10th\t\nhttps://en.wikipedia.org/wiki/World_Art_Nouveau_Day","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"SVG = {\nboop;\nlet path = `M40,20`\n\n path += `C${rnd(100,400)},${rnd(200,400)},${rnd(0,150)},${rnd(0,450)},${40},${380}`\n path += `C${rnd(100,400)},${rnd(200,400)},${rnd(0,150)},${rnd(0,450)},${40},${380} Z`\n \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, w, h])\n .style('background', \"#fff\")\n .attr('width',w)\n .attr('height',h); \n\n const corn = svg.append('g')\n .attr('class','corner');\n corn.append('g')\n .attr('transform','translate(0,400) scale(1,-1) ') \n .append('path')\n .attr('d',path)\n .attr('fill','#FFB86F40')\n .attr('stroke','goldenrod');\n \n corn.append('g')\n .attr('transform',`rotate(90 200 200) translate(-20,-20)`)\n .append('path')\n .attr('d',path)\n \n .attr('fill','#FFB86F40')\n .attr('stroke','goldenrod')\n \n \n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"viewof boop = Inputs.button(\"ReDraw\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"frame = {\n let i = 0\n const svg = d3.create('svg').attr(\"width\", f).attr(\"height\", f)\n const main = svg.append(\"g\").attr('id','main')\n \n let other = d3.select(SVG)\n let group = other.selectAll('.corner').clone(true);\n \n main.selectAll('g')\n .data(data).join('g')\n .attr(\"transform\", ([i, j, r]) => `translate(${i},${j}) rotate(${r})`)\n .attr('id', (d,i) => `C2_${i}`)\n .append(() => group.clone(true).node())\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":421,"value":"data =[[0,0,0], [800,-20,90],[820,780,180],[20,800,270]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"f = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":263,"value":"w = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"h= 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"rnd = (a,b) => d3.randomInt(a,b)()","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"md"}],"files":"$W32","stdlib":"1","titling":"auto"}