Generative artist, sharing my journey in visual experiments.
seed = Date.now()
noiseScale = 450
n = 120
p = getRandomPalette()
palette = shuffle(p)
// palette = ["#2e3035", "#33453d", "#e9e3d3", "#e10602", "#f1da00"]
// palette = ['black', 'white']
svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="${palette[0]}"></rect>
<g transform="translate(${randInt(w)}, ${randInt(h)})">
${array(n).map(i => {
const rad = 20 + i * 8
const c = palette[randInt(1, palette.length)]
return `<path
d="${array(360).map(j => {
const angle = j / 360 * TAU
const c = Math.cos(angle)
const s = Math.sin(angle)
const noise = sn.noise3D(c, s, seed) * .5 + .5
const r = rad * (1 + noise * ((i / n) ** 3))
const x = c * r
const y = s * r
return `${j === 0 ? 'M' : 'L'} ${x} ${y}`
}).join(' ')} Z"
fill="${i==0 ? c : 'none'}"
stroke="${c}"
stroke-width="${map(i, 20, n, 5, 11, true)}"
stroke-linejoin="round"
stroke-linecap="square"
${i === 0 ? '' : `stroke-dasharray="${array(200).map(j => j % 2 === 1 ? randInt(5, i) : random() > i/n ? randInt(200) : randInt(3, 10)).join(' ')}"`}
/>`
}).join('\n')}
</g>
</svg>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
