Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
<svg id="art" style="/*border: 10px solid black; padding: 30px;*/ background-color: white" width=500 height=500 viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
${getPattern("limegreen", "rebeccapurple", 100)}
</svg>
function getPattern(color1, color2, width) {
const scale = Math.sqrt(2) / 2;
const thisTile = `<rect x=0 y=0 width=${width} height=${width} fill="${color1}" />`;
if (width <= 20) {
return svg`${thisTile}`;
}
return svg`${thisTile}
<g transform="translate(${width / 2}) rotate(45) ">
${getPattern(color2, color1, width * scale)}
</g>`;
}
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.
