Public
Edited
Mar 4, 2024
colors = [
// 'white', 'black', 'red'
'black', 'white', 'red'
//'white', 'black', 'white'
]
generate = () => svg`<svg height="700" viewBox="${-margin} ${-margin} ${w + margin*2} ${h + margin*2}" style="background: ${colors[0]};">
${style()}
${array(ny).map(y => array(nx).map(x => {
let p = random() < smoothstep(y, 3, ny-4)
let n = p ? randInt(5) : x % 5
let diff = n != x%5
return `<g transform="translate(${x*10},${y*10})">
${symbols[n]} fill="${diff ? colors[2] : colors[1]}" ${y%2&&!diff ? '': `transform-origin="5 5" transform="rotate(${diff?random([0,90]):90})"`}/>
</g>`
}).join('')).join('')}
</svg>`
palette = ['#FFED00', '#E6007E', '#009FE3']
generate2 = () => svg`<svg height="700" viewBox="${-margin} ${-margin} ${w + margin*2} ${h + margin*2}" style="background: black;">
${style()}
${array(ny).map(y => array(nx).map(x => {
let p = random() < smoothstep(y, 3, ny-4)
let n = p ? randInt(5) : x % 5
let diff = n != x%5
return `<g transform="translate(${x*10},${y*10})">
${symbols[n]} fill="${diff ? palette[randInt(3)] : colors[1]}" ${y%2&&!diff ? '': `transform-origin="5 5" transform="rotate(${diff?random([0,90]):90})"`}/>
</g>`
}).join('')).join('')}
</svg>`
style = () => `<style>
svg {
border: solid 1px black;
}
use {
fill: ${colors[1]};
}
.diff {
fill: ${colors[2]};
}
.c0 {
fill: ${palette[0]};
}
.c1 {
fill: ${palette[1]};
}
.c2 {
fill: ${palette[2]};
}
.white{
fill: white;
}
</style>`
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.
