Published
Edited
Oct 29, 2019
md`# Play with Shapes`
html`
<svg width="400" height="50">
<rect x="0" y="0" width="${value}" height="50" fill="green" />
<circle cx="75" cy="25" r="25" fill="purple" />
<ellipse cx="125" cy="25" rx="25" ry="10" fill="red" />
<line x1="150" y1="5" x2="190" y2="40" stroke="gray" stroke-width="5" />
<polyline fill="none" stroke="blue" stroke-width="2"
points="255,30
265,30
265,20
275,20
275,10
285,10" />
<polygon fill="yellow" stroke="blue" stroke-width="2"
points="205,30
215,10
225,30" />
</svg>
`
viewof value = html`<input type=range />`
value
html`
<svg width="400" height="400">
<image xlink:href="https://images-na.ssl-images-amazon.com/images/I/5108kd2xIrL._SX425_.jpg" />
<circle cx="220" cy="170" r="80" fill="purple" />
</svg>
`
md` # Assignment
* pick any image as your background
* draw roughly over it using svg shapes
* make some of these change size based on input
* make it very scary
`
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.
