31:T6a7,

The SVG Gradients

32:[] 2f:{"title":"The Eye of TAU","cells":[{"id":0,"value":"# The Eye of TAU\n## Tau Day 28 June\nhttps://tauday.com/","pinned":false,"hidden":false,"mode":"md"},{"id":373,"value":"viewof pets = Inputs.range([5, 420], {label: \"Pettles\", step: 1, value: 226})","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"viewof outter = Inputs.range([-w/4,w/2], {label: \"Outter Size\", step: 1, value: 140})","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"viewof inner = Inputs.range([-w/4, w/2], {label: \"Inner Size\", step: 1, value: 42})","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"viewof edge = Inputs.toggle({label: \"Draw stroke?\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"viewof opacity = Inputs.range([0, 100], {label: \"Stroke opacity %\", step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"viewof gradient = Inputs.select([\"gradient0\", \"gradient1\", 'gradient2', 'gradient3', \"gradient4\"], {label: \"Select gradient\", value:'gradient4'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"SVG = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, w, h])\n .style('background', \"#000\")\n .attr('width',w)\n .attr('height',h); \n \n const out = svg.append('g')\n .attr('id','out')\n .attr('transform',`translate(${w/2},${h/2})`) // center circle\n \n for (let i = 0; i < points.ring0.length; ++i) {\n let j = (i==points.ring0.length-1)?0:i+1\n\n let d = ` M ${points.ring0[i].x} ${points.ring0[i].y} \n C ${points.ring0[i].cpx0}, ${points.ring0[i].cpy0}, ${points.ring1[j].cpx1}, ${points.ring1[j].cpy1},\n ${points.ring1[j].x}, ${points.ring1[j].y}, \n C ${points.ring1[j].x}, ${points.ring1[j].y*1.15}, ${points.ring0[i].x} ${points.ring0[i].y},\n ${points.ring0[i].x} ${points.ring0[i].y}`\n\n out.append('path')\n .attr('d',d)\n .attr('fill',`url(#${gradient}`)\n .attr('stroke-width',(edge)?2:0)\n .attr('stroke',`url(#${gradient}`)\n .attr('stroke-opacity',`${opacity}%`)\n\n }\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"radius = [outter, inner]","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"\npoints = {\n let p = ({ ring0: [], ring1: [] })\n let cp0 = radius[0] - radius[1]\n let cp1 = radius[0] - radius[1]\n let other = 1\n \n for (let ring = 0; ring <= other; ring++) { // lables reversed but meh\n for(let inner = 0; inner < pets; inner++) {\n \n let x = radius[ring] * cos( Tau * inner / pets)\n let y = radius[ring] * sin( Tau * inner / pets) \n\n let cpx0 = cp0 * cos( Tau * inner / pets)\n let cpy0 = cp0 * sin( Tau * inner / pets) \n\n let cpx1 = cp1 * cos( Tau * inner / pets)\n let cpy1 = cp1 * sin( Tau * inner / pets) \n \n p[`ring${ring}`].push({x:x,y:y,cpx0:cpx0,cpy0:cpy0,cpx1:cpx1,cpy1:cpy1})\n\n }\n }\n\n return p\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"Tau = 2 * PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"PI = Math.PI;","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":" cos = Math.cos","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":" sin = Math.sin","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"h = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"w = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":489,"value":"$31","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}