Wise Fool.
Visioneer.
Public
Edited
May 7
<svg width="200" height="200" viewBox="0 0 200 200">
<path d="M0 0l200 200" stroke="red" stroke-width="5"/>
<path
d="
M 50,100
C 50,50 150,50 150,100
C 150,150 50,150 50,100
M 80,100
C 80,80 120,80 120,100
C 120,120 80,120 80,100
"
fill="blue"
fill-rule="evenodd"
/>
</svg>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<mask id="holeMask">
<!-- White background (opaque) -->
<rect width="200" height="200" fill="white"/>
<!-- Black circle (transparent hole) -->
<circle cx="100" cy="100" r="20" fill="black"/>
</mask>
</defs>
<path d="M0 0l200 200" stroke="red" stroke-width="5"/>
<!-- Blob shape with mask applied -->
<path
d="
M 50,100
C 50,50 150,50 150,100
C 150,150 50,150 50,100
"
fill="blue"
mask="url(#holeMask)"
/>
</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.
