Published
Edited
Feb 3, 2020
10 stars
svg_element = html`<svg>
<rect x="10" y="10" width="100" height="100" fill="#c00" />
</svg>
`
html`
<h4> <rect> </h4>
<svg width=50 height=50>
<rect x="0" y="0" width="50" height="50" stroke="black" stroke-width="2" fill="none" />
</svg>
`
html`
<h4> <circle> </h4>
<svg width=50 height=50>
<circle cx="25" cy="25" r="20" fill="orange" />
</svg>
`
html`
<h4> <line> </h4>
<svg width=200 height=50>
<line x1="0" y1="25" x2="100%" y2="10" stroke="salmon" stroke-width="5" />
</svg>
`
html`
<h4> <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/polygon"> <polygon> </a> </h4>
<svg width=50 height=50 fill="#4a4">
<polygon points="0,40 20,10 20,30 40,0" />
</svg>
`
html`
<h4> <text> </h4>
<svg width=50 height=50 fill="#22a">
<text x="2" y="20"> Hello </text>
</svg>
`
html`<svg width=300 height=150>
<line x1="0" y1="50" x2="100" y2="50" stroke="black" />
<rect x="100" y="25" width="50" height="50" stroke="black" fill="none" />
<text x="115" y="60" fill="black" style="font-size:28;font-family:sans-serif">H</text>
<line x1="150" y1="50" x2="280" y2="50" stroke="black" />
<circle cx="210" cy="50" r="6" fill="black" />
<line x1="210" y1="50" x2="210" y2="130" stroke="black" />
<line x1="0" y1="120" x2="280" y2="120" stroke="black" />
<circle cx="210" cy="120" r="10" fill="none" stroke="black" />
</svg>`
html`<svg>
<path d="M 10 10
L 100 100
V 10
H 10
M 100 100
L 80 20
L 100 10" stroke="red" fill="none">
</svg>
`
html`<svg>
<path d="M 10 10
l 100 100
v -100
h 100
l -50 50" stroke="#0a0" fill="none">
</svg>
`
html`<svg>
<g transform="translate(40, 40)">
<line x1="-6" x2="6" y1="0" y2="0" style="stroke: black"/>
<line y1="-6" y2="6" x1="0" x2="0" style="stroke: black"/>
</g>
</svg>
`
html`<svg width=200 height=200>
<g transform="translate(100, 100)">
<line x1="-6" x2="6" y1="0" y2="0" style="stroke: black"/>
<line y1="-6" y2="6" x1="0" x2="0" style="stroke: black"/>
<circle cx="-50" cy="-50" r="20" fill="#61d4b3" />
<circle cx="40" cy="50" r="20" fill="#fdd365" />
<g transform="scale(1.5)">
<circle cx="25" cy="-30" r="20" fill="#fb8d62" />
</g>
</g>
</svg>
`
html`<svg width=200 height=200>
<g transform="translate(100, 100)">
<line x1="-6" x2="6" y1="0" y2="0" style="stroke: black"/>
<line y1="-6" y2="6" x1="0" x2="0" style="stroke: black"/>
<circle cx="-50" cy="-50" r="20" fill="#61d4b3" />
<circle cx="40" cy="50" r="20" fill="#fdd365" />
<g transform="scale(1.5) translate(-50, 50)">
<circle cx="25" cy="-30" r="20" fill="#fb8d62" />
</g>
</g>
</svg>
`
html`<svg width=200 height=200>
<g transform="translate(100, 100) rotate(30)">
<line x1="-6" x2="6" y1="0" y2="0" style="stroke: black"/>
<line y1="-6" y2="6" x1="0" x2="0" style="stroke: black"/>
<circle cx="-50" cy="-50" r="20" fill="#61d4b3" />
<circle cx="40" cy="50" r="20" fill="#fdd365" />
<g transform="scale(1.5)">
<circle cx="25" cy="-30" r="20" fill="#fb8d62" />
</g>
</g>
</svg>
`
html`<svg width=200 height=200>
<g transform="rotate(${counter}) translate(100, 100)">
<line x1="-6" x2="6" y1="0" y2="0" style="stroke: black"/>
<line y1="-6" y2="6" x1="0" x2="0" style="stroke: black"/>
<circle cx="-50" cy="-50" r="20" fill="#61d4b3" />
<circle cx="40" cy="50" r="20" fill="#fdd365" />
<g transform="scale(1.5)">
<circle cx="25" cy="-30" r="20" fill="#fb8d62" />
</g>
</g>
</svg>
<svg width=200 height=200>
<g transform="translate(100, 100) rotate(${counter})">
<line x1="-6" x2="6" y1="0" y2="0" style="stroke: black"/>
<line y1="-6" y2="6" x1="0" x2="0" style="stroke: black"/>
<circle cx="-50" cy="-50" r="20" fill="#61d4b3" />
<circle cx="40" cy="50" r="20" fill="#fdd365" />
<g transform="scale(1.5)">
<circle cx="25" cy="-30" r="20" fill="#fb8d62" />
</g>
</g>
</svg>
`
html`<svg width=200 height=200> \
<g transform="translate(100, 100)"> \
<line x1="-6" x2="6" y1="0" y2="0" style="stroke: black"/> \
<line y1="-6" y2="6" x1="0" x2="0" style="stroke: black"/> \
<circle cx="-50" cy="-50" r="20" fill="#61d4b3" /> \
<circle cx="40" cy="50" r="20" fill="#fdd365" /> \
<g transform="scale(${Math.sin(counter/10.0)*0.5 + 1.5})"> \
<circle cx="0" cy="0" r="20" fill="#fb8d62" /> \
</g> \
</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.
