Generative artist, sharing my journey in visual experiments.
svg5 = require('https://bundle.run/svg5@0.1.3')
{
// Create an SVG element
svg5.createSVG(width, 400)
// Add content / elements
svg5.background(0)
svg5.fill(255)
svg5.square(svg5.width / 2 - 100, svg5.height / 2 - 100, 200)
// Finally, render the svg
return html`${svg5.getHTML()}`
}
{
// Create an SVG element
svg5.createSVG(width, 400)
// Add content / elements
svg5.background('black')
svg5.stroke(255)
svg5.noFill()
for(let y = -150; y <= svg5.height + 150; y += 5){
svg5.beginShape()
svg5.vertex(-10, svg5.height + 100)
for(let x = -10; x <= svg5.width + 10; x += 10){
svg5.vertex(x, y + svg5.noise(x/500, y/200) * 50)
}
svg5.vertex(width + 10, svg5.height + 100)
svg5.endShape(svg5.CLOSE)
}
// Finally, render the svg
return html`${svg5.getHTML()}`
}
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.
