Published
Edited
Apr 17, 2022
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svg`<svg width="${dimensions.displayWidth}" height="${
dimensions.displayHeight
}">
<rect x=0 y=0 width=${dimensions.displayWidth} height=${
dimensions.displayHeight
} fill="${background}"/>
${flower(CENTERX, CENTERY, CENTERR)}
</svg>`
Insert cell
flower(CENTERX, CENTERY, CENTERR)
Insert cell
function flower(x, y, r) {
if (r < 10) return [svg.fragment`</>`];
else {
return angleArray
.map((t, i) => {
let x2 = x + r * Math.sin(t);
let y2 = y + r * Math.cos(t);
return Array(
svg.fragment`<circle cx=${x2} cy=${y2} r=${r} fill=${fill} opacity=${opacity}></circle>`,
flower(x2, y2, 0.5 * r)
).flat();
})
.flat();
}
}
Insert cell
Insert cell
svg = htl.svg
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more