Generative artist, sharing my journey in visual experiments.
Abstract paintingsGenerating SVGsBlend modes & ClipPathsRecursive TruchetGenerative SVG templateAnimating SVGsSVG templateGenerating SVGsGenerating SVGsGenerating SVGsSVG templateGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsSVG templateGenerating SVGsSVG templateGenerating SVGs
Generating SVGs
seed = Date.now()
colorScale = scales.viridis
svg`<svg width="${w}" height="${h}">
<defs>
${array(ny).map(i => {
const Y = (h + 200) / (ny - 1) * i - 100
const step = w / nx
return `<linearGradient id="linegrad${i}" x1="0" y1="0" x2="1" y2="0">
${array(nx).map(j => {
let x = j * step
let n = simplex.noise3D(x, Y/noiseScale, seed) + .2
return `<stop offset="${j / nx * 100}%" stop-color="${colorScale(n)}"/>`
}).join('\n')}
</linearGradient>`
}).join('\n')}
</defs>
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
<g>
${(() => {
return array(ny).map(i => {
const Y = (h + 200) / (ny - 1) * i - 100
const step = w / nx
let x = 0
let y = Y + simplex.noise3D(x, Y/noiseScale, seed) * amp
return `<path stroke-width="1.5"
d="M 0 ${y} ${array(nx).map(() => {
let px = x
x = x + step
let py = y
y = Y + simplex.noise3D(x/noiseScale, y/noiseScale, seed) * amp
return `C ${px + step / 4} ${py}, ${x - step / 4} ${y}, ${x} ${y}`
}).join(' ')}"
stroke="url(#linegrad${i})"
fill="none"
/>`
}).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.
