Generative artist, sharing my journey in visual experiments.
svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" fill="black" />
<g>
${array(N).map((d, i, arr) => {
const y = map(i, 0, N, margin, h-margin)
const r = Math.sin(i/N*PI) * w * 0.7
return `<rect
transform="translate(${w/2}, ${y}) scale(1, .2) rotate(${(Date.now()/20 + i/2) % 360})"
x="-${r/2}"
y="-${r/2}"
width="${r}"
height="${r}"
rx="${(Math.cos(Date.now()/700) + 1) * 50 | 0}"
fill="rgba(0, 0, 0, 0.08)"
stroke="${palette[randInt(palette.length)]}"
stroke-width="3"
stroke-dasharray="${dashes[i]}"
/>`
}).join('\n')}
</g>
</svg>`
dashes = array(N).map(() => array(30).map(i => i===0 ? randInt(2) * randInt(80) : randInt(40)))
p = getRandomPalette()
palette = shuffle(p)
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.
