Published
Edited
Aug 5, 2021
1 fork
function flag(tilt, hue, light, dark) {
let id = "g" + (Math.random()*10000|0).toString(16)
let angle = 2 * (tilt % 1)
let [cos, sin] = [Math.cos(angle), Math.sin(angle)]
let [l, d] = [light, dark].map(n => `hsl(${(hue%1*360)|0} 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="${l}" />
<stop offset="100%" stop-color="${d}" />
</linearGradient></defs>
<rect x=-32 y=-32 width=64 height=64 fill="url(#${id})" />
</svg>`
}
html`<h1>Doesn't work in an image tag</h1><img width=32 src="data:image/svg+xml;base64,${btoa(flag().outerHTML)}">`
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.
