Public
Edited
Jul 19, 2023
Insert cell
md`# Gradient SVG`
Insert cell
html`<svg viewBox="0 0 100 100">
<defs>
<filter id="blur" color-interpolation-filters="linear" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
<g id="gr1" t>
<rect x="-10" width="110" height="110" fill="blue"/>
<rect x="50" width="60" height="110" fill="yellow"/>
<polygon points="50,50, 60,110, 40,110" fill="#0f8"/>
<polygon points="0,0, 100,0, 100,20, 50,50, 0,20" fill="red"/>
<polygon points="0,10, 40,50, 0,40" fill="#f0f"/>
<polygon points="100,60, 150,30, 50,50" fill="#f80"/>
</g>
</circle>
</svg>`
Insert cell

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.
Learn more