Public
Edited
Jul 15, 2023
//declaring the svg element
<svg style="border:1px solid">
</svg>
//declaring the svg element
<svg
style="border: 1px solid"
width="100%"
height="350">
//creating the rectangle
<rect x="20"
y="20"
width="50"
height="50"
/>
</svg>
`
//declaring the svg element
<svg style="border: 1px solid"
width="100%"
heigth="350">
//modifying the rectangle
<rect x="20"
y="20"
width="50"
height="50"
fill="green"
stroke="red"
stroke-width="3"
/>
</svg>x
//declaring the svg element
<svg style="border: 1px solid"
width="100%"
height="350">
//creating the circle
<circle cx="100"
cy="100"
r="50"
/>
</svg>
//declaring the svg element
<svg style="border: 1px solid"
width="100%"
height="350">
//creating a rectangle
<rect x="30"
y="50"
width="150"
height="70"
fill="brown"
/>
//creating a circle
<circle cx="100"
cy="130"
r="50"
fill="skyblue"
/>
</svg>
<svg style="border: 1px solid"
width="100%"
height="350">
<line x1="20"
y1="20"
x2="200"
y2="200"
stroke="green"
stroke-width="10" />
</svg>
<svg style="border:1px solid"
width="100%"
height="350">
<polyline points="20,100 20,20 100,20"
stroke="green"
stroke-width="10"
/>
<polygon points="120,100 120,20 200,20"
stroke="green"
stroke-width="10"
/>
</svg>
<svg style="border: 1px solid"
width="100%"
height="350"
<text x="20"
y="120"
text-anchor="start"
dominant-baseline="middle"
font-family="sans-serif"
font-size="120px"
font-weight="900"
>Hello, world</text>
</svg>
<svg style="border: 1px solid"
width="100px"
height="350"
<path d="M 50,100 L 150,200 L 250,100 l 100,100 l 100,-100"
fill="none"
stroke="green"
stroke-width="10"
/>
</svg>
//files in app.svelte
//files in app svelte
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.
