Hacking federated wiki since 2011.
function flag(tilt, hue) {
let id = "g" + (Math.random()*10000|0).toString(16)
let angle = (tilt % 1) * Math.PI * 2
let [cos, sin] = [Math.cos(angle), Math.sin(angle)]
let [light, dark] = [30, 70].map(n => `hsl(${hue % 1 * 360} 78% ${n}%)`)
return html`<svg viewBox="-32 -32 64 64">
<defs>
<linearGradient id=${id} x1=0 y1=0 x2=${cos} y2=${sin} >
<stop offset="0%" stop-color="${light}" />
<stop offset="100%" stop-color="${dark}" />
</linearGradient>
</defs>
<rect x=-32 y=-32 width=64 height=64 fill="url(#${id})" />
</svg>`
}
html`<h1>Still doesn't work in an image tag</h1><img width=32 src="${aspng(flag(Math.random(),Math.random()))}">`
aspng(flag(Math.random()/5,Math.random()/10))
function aspng (flag) {
var image = new Image();
image.src = `data:image/svg+xml;base64,${btoa(flag.outerHTML)}`
var canvas = document.createElement('canvas');
canvas.width = 64;
canvas.height = 64;
var context = canvas.getContext('2d');
context.drawImage(image, 0, 0);
return canvas.toDataURL('image/png');
}
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.
