SVG
svg`
<svg width="200" height="100">
<rect x="0" y="0" width="100" height="100" fill="steelblue" />
<circle cx="100" cy="50" r="40" fill="indianred" />
</svg>
`
html`
<div style="width:200px">
<svg viewBox="-100 0 200 100">
<rect x="0" y="0" width="100" height="100" fill="steelblue" />
<circle cx="100" cy="50" r="40" fill="indianred" />
</svg>
</div>
`
svg`
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100" height="100" fill="steelblue" />
<circle cx="100" cy="50" r="40" fill="indianred" />
</svg>
`
svg`
<svg width="500" height="100">
<ellipse cx="50" cy="50" rx="30" ry="20" />
<line x1="100" y1="0" x2="200" y2="100" stroke="red" />
<text x="200" y="80">Salut</text>
</svg>
`
svg`
<svg width="500" height="100">
<circle cx="120" cy="80" r="3" fill="red" />
<text x="120" y="80" font-size="50">Salut</text>
</svg>
`
svg`
<svg width="500" height="100">
<circle cx="120" cy="80" r="3" fill="red" />
<text x="120" y="80" font-size="50" text-anchor="middle">Salut</text>
</svg>
`
svg`
<svg width="500" height="100">
<circle cx="120" cy="80" r="3" fill="red" />
<text x="120" y="80" font-size="50" text-anchor="end">Salut</text>
</svg>
`
svg`
<svg width="500" height="100">
<circle cx="50" cy="50" r="40" fill="steelblue" stroke="indianred" />
<text x="100" y="80" font-size="50" fill="none" stroke="indianred">Salut</text>
</svg>
`
svg`
<svg width="500" height="100">
<circle cx="50" cy="50" r="40" fill="steelblue" stroke="indianred" stroke-width="5"/>
<text x="100" y="80" font-size="50" fill="none" stroke="indianred" stroke-width="5">Salut</text>
</svg>
`
svg`
<svg width="500" height="100">
<circle cx="50" cy="50" r="40" fill="steelblue"
stroke="indianred" stroke-width="5" opacity="0.5" />
<circle cx="150" cy="50" r="40" fill="steelblue"
stroke="indianred" stroke-width="5" fill-opacity="0.5"/>
<circle cx="250" cy="50" r="40" fill="steelblue"
stroke="indianred" stroke-width="5" stroke-opacity="0.5"/>
</svg>
`
svg`
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="50" stroke="black"
stroke-width="30" />
<line x1="50" y1="100" x2="250" y2="100" stroke="black"
stroke-width="30" stroke-linecap="round" />
<line x1="50" y1="150" x2="250" y2="150" stroke="black"
stroke-width="30" stroke-linecap="square" />
</svg>
`
svg`
<svg width="300" height="50">
<line x1="0" y1="20" x2="200" y2="20" stroke="black"
stroke-width="5" stroke-dasharray="10" />
<line x1="0" y1="40" x2="200" y2="40" stroke="black"
stroke-width="5" stroke-dasharray="10 2 5 2" />
</svg>
`
svg`
<svg width="200" height="100">
<text x="100" y="80" font-size="60" text-anchor="middle"
font-weight="bold" fill="none" stroke="black"
stroke-dasharray="300" stroke-dashoffset=${offset}>Salut</text>
</svg>
`
svg`
<svg width="200" height="100">
<path d="M 0 90 L 100 0 L 200 90" fill="none" stroke="steelblue" />
</svg>
`
svg`
<svg width="200" height="100">
<path d="M 0 90 L 100 0 L 200 90 Z" fill="none" stroke="steelblue" />
</svg>
`
svg`
<svg width="200" height="100">
<path d="M 20 20 L 180 20" fill="none" stroke="steelblue" />
<path d="M 20 20 C 40 50 160 50 180 20" fill="none" stroke="indianred" />
<circle cx="40" cy="50" r="2" fill="red" />
<circle cx="160" cy="50" r="2" fill="red" />
</svg>
`
svg`
<svg width="200" height="100">
<g fill="indianred" stroke="steelblue" stroke-width="2">
<circle cx="50" cy="50" r="30" />
<rect x="40" y="40" width="60" height="30" />
<text x="100" y="80" font-size="50">Salut</text>
</g>
</svg>
`
svg`
<svg width="200" height="100">
<g fill="indianred" stroke="steelblue" stroke-width="2" transform="translate(-40, 20)">
<circle cx="50" cy="50" r="30" />
<rect x="40" y="40" width="60" height="30" />
<text x="100" y="80" font-size="50">Salut</text>
</g>
</svg>
`
svg`
<svg width="300" height="100">
<g fill="indianred" stroke="steelblue" stroke-width="2" transform="scale(1.2)">
<circle cx="50" cy="50" r="30" />
<rect x="40" y="40" width="60" height="30" />
<text x="100" y="80" font-size="50">Salut</text>
</g>
</svg>
`
svg`
<svg width="200" height="100">
<g fill="indianred" stroke="steelblue" stroke-width="2" transform="rotate(20, 100, 50)">
<circle cx="50" cy="50" r="30" />
<rect x="40" y="40" width="60" height="30" />
<text x="100" y="80" font-size="50">Salut</text>
</g>
</svg>
`
html`<html>
<head>
<style>
#cercle {
fill: red;
stroke: black;
}
#cercle:hover {
fill: blue;
stroke: green;
}
</style>
</head>
<body>
<svg width="100" height="50">
<circle id="cercle" cx="50" cy="25" r="20" />
</svg>
</body>
</html>`
svg`
<svg width="200" height="100">
<circle cx="100" cy="50" r=${rValue} />
</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.
