2b:null 2c:["$","title",null,{"children":"SourceCred Logo Color Explorations | Dandelion Mané | Observable"}] 31:T5cd,function explore(settings) { const svg = d3.create("svg") .attr("viewBox", [0, 0, 512+256+64, 64+512]) .style("max-width", `${512+256}px`) .style("border", "1px solid black") svg.append("rect").attr("x", 0).attr("y", 0).attr("width", 512+50).attr("height", 512+64).attr("fill", "black") const nRays = settings.nRays; const L512 = svg.append("g").attr("transform", `translate(32, 32)`) logo(L512, 512, nRays[0], settings) const L256 = svg.append("g").attr("transform", `translate(${512+64},0)`) logo(L256, 256, nRays[1], settings) const L128 = svg.append("g").attr("transform", `translate(${520+64},280)`) logo(L128, 128, nRays[2], settings) const L64 = svg.append("g").attr("transform", `translate(${660+64},310)`) logo(L64, 64, nRays[3], settings) const L32 = svg.append("g").attr("transform", `translate(${600+64},430)`) logo(L32, 32, nRays[4], settings) const L16 = svg.append("g").attr("transform", `translate(${650+64},430)`) logo(L16, 16, nRays[5], settings) const colorTainer = svg.append("g").attr("transform", "translate(620, 505)").attr("font-family", "monospace") let x = 0; for (const [name, color] of [["base", rayBaseColor], ["mid ", rayMidColor], ["edge", rayEdgeColor], ["back", backgroundColor], ["pupl", pupilColor]]) { const str = `${name}: ${color}` colorTainer.append("g").attr("transform", `translate(0, ${x})`).append("text").text(str) x += 16; } return svg.node(); }32:T7b5,function logo(g, size, nRays, settings) { const pupil = settings.pupil || 0.35 const base = settings.base || 0.45 const mid = settings.mid || 0.7; const edge = settings.edge || 0.9; const baseCollapse = settings.baseCollapse || [1] const midCollapse = settings.midCollapse || [1, 0.5] const edgeCollapse = settings.edgeCollapse || [1, 0.5] const rayWidth = settings.rayWidth || 0.5; const backgroundRadius = size / Math.sqrt(2) * 0.7 const pupilRadius = pupil * backgroundRadius; const baseRadius = base * backgroundRadius; const midRadius = mid * backgroundRadius const edgeRadius = edge * backgroundRadius; const internal = g.append("g").attr("transform", `translate(${size/2}, ${size/2})`) // Add background circle internal.append("circle") .attr("fill", backgroundColor) .attr("r", backgroundRadius) // Add pupil circle (usually same as background color) internal.append("circle").attr("fill", pupilColor).attr("r", pupilRadius) const arc = d3.arc(); for (let i=0; i ${styles}

`; const picker = container.querySelector("#picker"); const label = container.querySelector("#label"); // Set color value. const setValue = colorStr => { // Create color object from string. const color = tinycolor(colorStr); // Hex doesn't support alpha (but will in CSS4), so force RGB if alpha is < 1. const actualFormat = tinycolor(color.toString(format)).getFormat(); const forceRGB = actualFormat === "hex" && color.getAlpha() < 1; // Create desired output color string and display it. const finalColorStr = color.toString(forceRGB ? "rgb" : format); label.innerHTML = finalColorStr; // Notify Observable about change in value. container.value = finalColorStr; container.dispatchEvent(new window.Event("input")); }; setValue(defaultValue); // Setup Pickr. const setupPickr = () => { new Pickr({ el: picker, default: tinycolor(defaultValue).toString("rgb"), onChange: c => setValue(c.toRGBA().toString()), comparison: false, components: { preview: true, opacity: true, hue: true, interaction: { hex: true, rgba: true, hsla: true, hsva: true, cmyk: true, input: true, clear: false, save: false } } }); }; // For some reason, Pickr doesn't want to set the default color unless the element is mounted, // so we wait for it to mount here. const interval = setInterval(() => { if (document.body.contains(container)) { clearInterval(interval); setupPickr(); } }, 100); return container; }34:[] 2f:{"id":"b80553f9e7dec32f","slug":"sourcecred-logo-color-explorations","title":"SourceCred Logo Color Explorations","thumbnail":"52d687713e4ff5883be977e1f1984681c95a4f3232ee647c3fb5ac432b3665b4","access_level":"public","create_time":"$D2019-10-18T04:29:23.116Z","update_time":"$D2019-11-19T21:56:12.272Z","view_time":null,"first_public_time":"$D2019-10-18T04:29:28.471Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a69215024e86d1f3","login":"decentralion","name":"Dandelion Mané","avatar_url":"https://avatars-next.observableusercontent.com/3cf971d47c5a169db17c4aa1b64802a03047db2aaff78b2c5c3d591435dcad32","tier":"starter_2024"},"version":902,"publish_version":902,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a01498699547be9","login":"decentralion","name":"Dandelion Mané","avatar_url":"https://avatars-next.observableusercontent.com/3cf971d47c5a169db17c4aa1b64802a03047db2aaff78b2c5c3d591435dcad32","tier":null}],"members":[{"type":"individual","id":"8a01498699547be9","login":"decentralion","name":"Dandelion Mané","avatar_url":"https://avatars-next.observableusercontent.com/3cf971d47c5a169db17c4aa1b64802a03047db2aaff78b2c5c3d591435dcad32","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"SourceCred Logo Color Explorations","cells":[{"id":0,"value":"md`# SourceCred Logo Color Explorations\n\nClick the color swatches to pull up the color picker. Change the color, then screenshot the resulting logo to show off your creative combination!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"md`## Base Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":782,"value":"viewof rayBaseColor = colorPicker(\"#ffbc95\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":827,"value":"md`## Mid Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":784,"value":"viewof rayMidColor = colorPicker(\"#e7a59a\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"md`## Edge Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":786,"value":"viewof rayEdgeColor = colorPicker(\"#87738c\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":830,"value":"md`## Background Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":796,"value":"viewof backgroundColor = colorPicker(\"#282d48\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"md`## Pupil Color`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":821,"value":"viewof pupilColor = colorPicker(\"#111c27\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"explore({\n midCollapse: [1, 0.7],\n edgeCollapse: [0.7],\n rayWidth: 0.75,\n nRays: [20, 20, 20, 20, 20, 20],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":373,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":839,"value":"colorString = `${rayBaseColor} ${rayMidColor} ${rayEdgeColor} ${backgroundColor} ${pupilColor}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-random@2\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"function gaussian(x) {\n\tvar gaussianConstant = 1 / Math.sqrt(2 * Math.PI),\n\t\tmean = 0,\n \tsigma = 1.5;\n\n x = (x - mean) / sigma;\n return gaussianConstant * Math.exp(-.5 * x * x) / sigma;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"gaussian(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":525,"value":"function spiralLength(n) {\n return d3.range(n).map((x) => x/(n-1))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":556,"value":"function spiralLengthNever0(n) {\n return d3.range(n).map((x) => (x+1) / n)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"spiralLength(6)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"colornames = ({\n sky: \"#75B1A9\",\n sunglow: \"#D9B44A\",\n mountains: \"#4F6457\",\n mist: \"#ACD0C0\",\n goldenrod: \"#DB9501\",\n bronze: \"#C05805\",\n seaweed: \"#6E6702\",\n bark: \"#2E2300\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":712,"value":"explore({\n midCollapse: [1,0.7],\n edgeCollapse: [1, 0.9],\n rayWidth: 0.75,\n nRays: [20, 20, 20, 20, 20, 12],\n backgroundColor: \"#20364a\",\n rayBaseColor: \"#ffbc95\",\n rayMidColor: \"#e7a59a\",\n rayEdgeColor: \"#87738c\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":807,"value":"styles = html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":800,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":801,"value":"tinycolor = require(\"tinycolor2@1.4.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"Pickr = require(\"pickr-widget@0.2.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"