2c:null 2d:["$","title",null,{"children":"The Eye of TAU | Brett Cooper | Observable"}] 32:T6a7,

The SVG Gradients

33:[] 30:{"id":"9f81f3b9feb5bded","slug":"the-eye-of-tau","title":"The Eye of TAU","thumbnail":"3cc0eeebc38ddf796bcf4f13926e7a9af2abb3eb743544f736ea96e91c66ae56","access_level":"public","create_time":"$D2022-06-18T23:27:38.371Z","update_time":"$D2022-06-29T06:05:26.402Z","view_time":null,"first_public_time":"$D2022-06-29T06:03:43.069Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":567,"publish_version":567,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"viewof pets = Inputs.range([5, 420], {label: \"Pettles\", step: 1, value: 226})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"viewof outter = Inputs.range([-w/4,w/2], {label: \"Outter Size\", step: 1, value: 140})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"viewof inner = Inputs.range([-w/4, w/2], {label: \"Inner Size\", step: 1, value: 42})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"viewof edge = Inputs.toggle({label: \"Draw stroke?\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"viewof opacity = Inputs.range([0, 100], {label: \"Stroke opacity %\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"viewof gradient = Inputs.select([\"gradient0\", \"gradient1\", 'gradient2', 'gradient3', \"gradient4\"], {label: \"Select gradient\", value:'gradient4'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"radius = [outter, inner]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"Tau = 2 * PI","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"PI = Math.PI;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":" cos = Math.cos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":" sin = Math.sin","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"h = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"w = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"