html`
<svg width=100 height=100>
<path d='M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'
fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
`
html`
<svg width=100 height=150>
<path d='M-20,0 L20,0 L20,100 L0,65 L-20,100 L-20,0'
fill='none' stroke='#000' stroke-width=2 transform='translate(50,10)' />
</svg>
`
html`
<svg width="250" height="100" style="border: 1px dashed">
<rect x="0" y="55" height="45" width="50" stroke-width="2" stroke="black" fill="pink"></rect>
<rect x="50" y="25" height="75" width="50" stroke-width="2" stroke="black" fill="pink"></rect>
<rect x="100" y="40" height="60" width="50" stroke-width="2" stroke="black" fill="pink"></rect>
<rect x="150" y="25" height="75" width="50" stroke-width="2" stroke="black" fill="pink"></rect>
<rect x="200" y="40" height="60" width="50" stroke-width="2" stroke="black" fill="pink"></rect>
</svg>`
{
window.localStorage.petalPath = 'M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'
}
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.
