Generative artist, sharing my journey in visual experiments.
Abstract paintingsGenerating SVGsBlend modes & ClipPathsRecursive TruchetGenerative SVG templateAnimating SVGsGenerating SVGsGenerating SVGsGenerating SVGsSVG templateGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsGenerating SVGsSVG templateGenerating SVGsGenerating SVGsSVG templateGenerating SVGs
SVG template
seed = Date.now()
step = 50
noiseScale = 800
p = getRandomPalette()
palette = shuffle(p)
svg`<svg width="${w}" height="${h}">
<defs>
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
<feColorMatrix result = "matrixOut" in = "offOut" type = "matrix" values = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="${palette[0]}"></rect>
<g opacity="0.9">
<circle cx="${w/2}" cy="${h/2}" r="${150}" fill="black" />
<path
transform="translate(${w/2}, ${h/2}) scale(0.7)"
fill="black"
stroke="none"
d="M${-w/2 - 5} ${h/2} L${w/2 - 5} ${-h/2} L${w/2 + 5} ${-h/2} L${-w/2 + 5} ${h/2} Z"
/>
</g>
<g transform="translate(${marginX}, ${marginY})">
${array(1500).map(i => {
const center = PVector(w/2, h/2)
const v = PVector.random2D().setMag(random(5)).add(center)
return `<path
stroke="${palette[randInt(1, palette.length)]}"
stroke-width="${expRand(2, 10, 3) | 0}"
stroke-join="round"
stroke-linecap="square"
stroke-dasharray="${array(50).map(i => `${randInt(3, 100)} ${randInt(2, 20)}`).join(' ')}"
fill="none"
opacity="${i/1500}"
d="M${v.x} ${v.y} ${array(trailLength).map(() => {
const angle = simplex.noise3D(v.x/noiseScale, v.y/noiseScale, seed + i / 600) * TAU
v.add(PVector.fromAngle(angle).setMag(stepLength))
return `L${v.x} ${v.y}`
}).filter(d => d).join(' ')}"
/>`
}).join('\n')
}).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.
