${name} ${color(name)}

30:[] 2e:{"title":"Letter Avatar","cells":[{"id":0,"value":"md`# Letter Avatar`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1067,"value":"viewof size = Inputs.range([10, 200], {step: 1, value: 100, label: \"size\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"viewof nnames = Inputs.range([1, 1000], {step: 1, value: 40, transform: Math.log, label: \"number\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1077,"value":"viewof rounded = Inputs.range([0,50], {step: 1, value: 50, label: \"rounded corners\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"html` ${names.map(avatar).join('')}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"color = (name) => {\n const value = hash(name);\n let hex = swatches[value % swatches.length];\n hex = \"#\" + value.toString(16).padStart(6, \"0\").slice(0, 6);\n return chroma(hex);\n return scale(value % 1000);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1091,"value":"viewof name = Inputs.text({\n placeholder: \"Enter your name\",\n value: \"Nomen Nescio\",\n label: \"Name\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"svg`${avatar(name)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"`${avatar(name)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"viewof saturation = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"avatar = name => {\n const text = initials(name).slice(0,4)\n const textSize = [80, 80, 80, 60, 50][text.length]\n const fontWeight = [300,300,300,400,400][text.length]\n const style=`\n background:${color(name)};\n font-weight:${fontWeight};\n font-size:${textSize};\n border-radius:${rounded}%;\n letter-spacing:-2;\n display:inline-block;\n margin:0 4px;`\n return ``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"textElement = txt => `\n ${txt}\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"colors = [\n '#fa0', \n '#f0a', \n '#0d9', \n '#86c',\n].map(\n v => chroma(v) \n //.set('lch.l', luminosity)\n .set('lch.c', saturation)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"scale = { \n return chroma\n .scale(colors)\n .mode('lch')\n .mode('rgb')\n //.mode('hsl')\n //.mode('lab')\n .domain([0, 1000])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"swatches = [\"#fce94f\" ,\"#fcaf3e\" ,\"#edd400\" ,\"#f57900\" ,\"#c4a000\" ,\"#ce5c00\" ,\"#8ae234\" ,\"#729fcf\" ,\"#73d216\" ,\"#3465a4\" ,\"#4e9a06\" ,\"#204a87\" ,\"#ad7fa8\" ,\"#ef2929\" ,\"#75507b\" ,\"#c00\" ,\"#5c3566\" ,\"#a40000\" ,\"#e9b96e\" ,\"#c17d11\",\"#8f5902\" ,\"#d3d7cf\" ,\"#babdb6\" ,\"#69f\" ,\"#888a85\" ,\"#36c\" ,\"#555753\" ,\"#039\" ,\"#9c3\"]\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"hash = s => {\n // simple string hasher\n let h = 0\n for (let i=0; i < s.length; i++)\n h = Math.imul(31, h) + s.charCodeAt(i)\n return Math.abs(h) | 0\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"hash('håken').toString(16).slice(0,6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"initials = R.pipe(\n R.unless(R.identity, R.always('?')),\n R.toUpper,\n R.split(/[-\\s.]/),\n R.map(R.head),\n R.join(''),\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"names=fakeNames(nnames)","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"html`

${names.map(n => `${n}`).join('\\n')}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"fakeNames = R.pipe(\n R.range(0),\n R.map(() => faker.name.findName()),\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"chroma = require('chroma-js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"R = require('ramda@0.25.0/dist/ramda.min.js')","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"faker=require('https://bundle.run/faker@4.1.0')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1025,"value":"TextToSVG = require('https://bundle.run/text-to-svg@3.1.5')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}