<svg height="${side}" viewBox="0 0 ${side * 2.5} ${side}">
<circle cx="${side/2}" cy="${side/2}" r='${side / 2.5}' stroke-width="10" stroke='darkorange' fill='none'
pathLength="100"
stroke-dasharray="${strokeDash.array}"
stroke-dashoffset="${strokeDash.offset}" ></circle>
<rect x="${side}" y='${side/4}' width="${side}" height="${side/2}" stroke-width="10" stroke='mediumpurple' fill="none"
pathLength="100"
stroke-dasharray="${strokeDash.array}"
stroke-dashoffset="${strokeDash.offset}"></rect>
</svg>
<svg viewBox="0 0 1000 200" style="background: antiquewhite">
<line x1="10" x2="990" y1="100" y2="100" stroke-width="3" stroke='gray'
stroke-dasharray="${multipleDashes}"/>
</svg>
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.
