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 SVGsSVG templateGenerating SVGsGenerating SVGsSVG templateGenerating SVGs
Generating SVGs
seed = Date.now()
noiseScale = 800
colorScale = randomProc()
svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
<g transform="translate(${w/2}, ${h/2}) scale(1.7) translate(-${w/2}, -${h/2})">
${triangles().map(d => d.draw())}).join('\n')}
</g>
</svg>`
class Triangle {
constructor(a, b, c) {
[this.a, this.b, this.c] = shuffle([a, b.clone(), c.clone()])
this.ab = PVector.lerp(this.a, this.b, .5)
this.bc = PVector.lerp(this.b, this.c, .5)
this.ca = PVector.lerp(this.c, this.a, .5)
this.center = this.ab.clone().add(this.bc).add(this.ca).mult(1/3)
this.r = random() // used for fill using lerpColor
this.n = ((simplex.noise3D(this.center.x/noiseScale, this.center.y/noiseScale, seed) * .6 + .5) ** 2) * 70 | 0 // number of lines to draw proportionnally to the triangle size
}
draw() {
let s = `<path
stroke="black"
stroke-width="3"
fill="${colorScale(this.r)}"
d="M ${this.ab.x},${this.ab.y} C ${this.b.x},${this.b.y} ${this.b.x},${this.b.y} ${this.bc.x},${this.bc.y} S ${this.c.x},${this.c.y} ${this.ca.x},${this.ca.y} S ${this.a.x},${this.a.y} ${this.ab.x},${this.ab.y}"
/>`
s += this.drawLines(this.a, this.b, this.c)
s += this.drawLines(this.b, this.a, this.c)
s += this.drawLines(this.c, this.b, this.a)
return s
}
drawLines(from, to1, to2) {
let lines = ''
const c = .3
for(let i = 0; i < this.n ; i++){
const p1 = PVector.lerp(from, to1, (i+1) / this.n)
const p2 = PVector.lerp(from, to2, (i+1) / this.n)
lines += `<polyline
opacity=".6"
stroke="black"
stroke-width="1"
fill="none"
points="${[p1.x, p1.y, p2.x, p2.y].join(' ')}"
/>`
}
return lines
}
}
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.
