html`<svg width=400 height=400>
<defs>
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="#p1" result="p1"/>
<feImage xlink:href="#p2" result="p2"/>
<feBlend mode="multiply" in="p1" in2="p2" />
</filter>
</defs>
<path id="p1" d='M100 100 L200 100 L 200 200 L100 200z' fill='#C2D8EA'/>
<path id="p2" d='M150 150 L250 150 L250 250 L150 250 Z' fill='#FC5657'/>
<rect width="100%" height="100%" filter="url(#f1)"/>
</svg>`
html`<style> circle { mix-blend-mode: screen; } .multiply { mix-blend-mode: multiply; } .isolate { isolation: isolate; } </style>`
html`<svg width=400 height=400>
<g class="isolate">
<circle cx="100" cy="100" r="100" fill="red" fill-opacity="1"/>
<circle cx="150" cy="200" r="100" fill="lightgreen" fill-opacity="1"/>
<circle cx="200" cy="100" r="100" fill="blue" fill-opacity="1"/>
</g>
</svg>`
html`<svg width=400 height=400>
<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<linearGradient id="g2">
<stop offset="0%" stop-color="lightgreen"/>
<stop offset="100%" stop-color="crimson"/>
</linearGradient>
<linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="green"/>
<stop offset="100%" stop-color="white"/>
</linearGradient>
</defs>
<g class="isolate">
<circle cx="100" cy="100" r="100" fill="url(#g1)" fill-opacity="1"/>
<circle cx="100" cy="100" r="100" fill="url(#g2)" fill-opacity="1"/>
<circle cx="100" cy="100" r="100" fill="url(#g3)" fill-opacity="1"/>
</g>
</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.
