Generative artist, sharing my journey in visual experiments.
Published unlisted
Edited
Feb 10, 2021
svg1 = svg`<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200" />
</svg>`
FileAttachment("svg-image-rasterization.png").image()
imageURL = FileAttachment("mk135@1.png").url()
svg2 = svg`<svg width="50" height="50">
<image href="${imageURL}" width="50" height="50" />
<circle cx="25" cy="25" r="12" fill="red" stroke="none" />
</svg>`
FileAttachment("svg2.png").image()
viewof file = html`<input type="file" accept="image/*">`
img = {
const img = new Image()
img.src = URL.createObjectURL(file)
return img
}
svg`<svg width="200" height="200" style="background: black">
<image href="${img.src}" width="100%" height="100%" />
</svg>`
FileAttachment("svg-image-rasterization@1.png").image()
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.
