Generative artist, sharing my journey in visual experiments.
p = getRandomPalette()
palette = shuffle(p)
// palette = ['black', 'white']
svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="${palette[0]}"></rect>
${layer(randInt(5, 30))}
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="${palette[0]}" opacity="0.1"></rect>
${layer(randInt(40, 80))}
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="${palette[0]}" opacity="0.1"></rect>
${layer(randInt(100,300))}
</svg>`
layer = n => array(n).map(i => {
const y = i * h / n
const sw = h / n - 3
const dashes = array(50).map(() => `${expRand(1, 150, 8)|0} ${random(1, 25)|0}`).join(' ')
const offset = randInt(1, 5)
return `<g opacity="1">
<polyline
opacity="0.5"
points="${-10 - offset} ${y + sw/2 + 1 + offset} ${w + 10 - offset} ${y + sw/2 + 1 + offset}"
fill="none"
stroke="black"
stroke-width="${sw}"
stroke-dasharray="${dashes}"
/>
<polyline
points="-10 ${y + sw/2 + 1} ${w + 10} ${y + sw/2 + 1}"
fill="none"
stroke="${palette[randInt(palette.length)]}"
stroke-width="${sw}"
stroke-dasharray="${dashes}"
/>
</g>`
}).join('\n')
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.
