Published
Edited
Mar 28, 2020
1 fork
2 stars
Insert cell
Insert cell
html`
<h3>Examples adtapeted from Pocket Guide to Writing SVG</h3>
<p>Complete text available: <a href="https://svgpocketguide.com/book/">here</a></p>
<img src="https://svgpocketguide.com/book/images/cover3.svg"/>`
Insert cell
Insert cell
svg`
<svg width="300" height="200">
<circle cx="150" cy="100" r="50">
</circle>
</svg>
`
Insert cell
Insert cell
Insert cell
Insert cell
svg`
<svg>
<rect x="20" width="200" height="100" fill="#BBC42A" />
</svg>
`
Insert cell
Insert cell
svg`<svg>
<circle cx="75" cy="75" r="75" fill="#ED6E46" />
</svg>
`
Insert cell
Insert cell
svg`<svg>
<ellipse cx="100" cy="100" rx="100" ry="50" fill="#7AA20D" />
</svg>
`
Insert cell
Insert cell
svg`<svg>
<line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8"/>
</svg>`
Insert cell
Insert cell
svg`
<svg height="200">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
fill="#fff" stroke="#BBC42A" stroke-width="6" />
</svg>
`
Insert cell
Insert cell
svg`
<svg>
<polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="#ED6E46"
stroke="#BBC42A" stroke-width="6"/>
</svg>
`
Insert cell
Insert cell
svg`
<svg width="258px" height="184px">
<path fill="#7AA20D" stroke="#7AA20D" stroke-width="9" stroke-linejoin="round"
d="M248.761,92
c0,9.801 -7.93,17.731 -17.71,17.731
c-0.319,0-0.617,0-0.935-0.021
c-10.035,37.291-51.174,65.206-100.414,65.206
c-49.261,0-90.443-27.979-100.435-65.334
c-0.765,0.106-1.531,0.149-2.317,0.149
c-9.78,0-17.71-7.93-17.71-17.731
c0-9.78,7.93-17.71,17.71-17.71
c0.787,0,1.552,0.042,2.317,0.149
C39.238,37.084,80.419,9.083,129.702,9.083
c49.24,0,90.379,27.937,100.414,65.228
h0.021
c0.298-0.021,0.617-0.021,0.914-0.021
C240.831,74.29,248.761,82.22,248.761,92
z" />
<circle cx="248.761" cy="92" r=5 fill="#000"/>
</svg>
`
Insert cell
svg`
<svg>
<path fill="none" stroke="#333333" stroke-width="3"
d="M10,55 C10,5 100,5 100,55" />
<circle cx="10" cy="55" r="5" fill="red"/>
<circle cx="10" cy="5" r="5" fill="red"/>
<circle cx="100" cy="5" r="5" fill="red"/>
</svg>
`
Insert cell
svg`<svg>
<path fill="none" stroke="#333333" stroke-width="3"
d="M20,50 Q60,5 100,50" />
<circle cx="60" cy="5" r="5" fill="red"/>
</svg>
`
Insert cell
Insert cell
svg`<svg width="200" height="200">
<path d="M0,40 L40,40 L40,80 L80,80 L80,120 L120,120 L120,160"
fill="white" stroke="#BBC42A" stroke-width="6" />
</svg>
`
Insert cell
Insert cell
svg`<svg width="200" height="200">
<path d="M0,40 H40 V80 H80 V120 H120 V160"
fill="white" stroke="#BBC42A" stroke-width="6" />
</svg>
`
Insert cell
Insert cell
svg`<svg width="200" height="200">
<path d="M0,40 h40 v40 h40 v40 h40 v40"
fill="white" stroke="#BBC42A" stroke-width="6" />
</svg>
`
Insert cell
Insert cell
Insert cell
svg`
<svg width="200" height="200">
<g opacity="30%">
<path d="M0,40 h40 v40 h40 v40 h40 v40"
fill="white" stroke="#BBC42A" stroke-width="6" />
</g>
<g opacity="100%" transform="translate(45,50)">
<path d="M0,40 h40 v40 h40 v40 h40 v40"
fill="white" stroke="#BBC42A" stroke-width="6" />
</g>
</svg>
`
Insert cell
svg`
<svg width="200" height="200">
<g opacity="30%">
<path d="M0,40 h40 v40 h40 v40 h40 v40"
fill="white" stroke="#BBC42A" stroke-width="6" />
</g>
<g opacity="100%" transform="rotate(-10)">
<path d="M0,40 h40 v40 h40 v40 h40 v40"
fill="white" stroke="#BBC42A" stroke-width="6" />
</g>
</svg>
`
Insert cell
svg`
<svg width="200" height="200">
<g opacity="30%">
<path d="M0,40 h40 v40 h40 v40 h40 v40"
fill="white" stroke="#BBC42A" stroke-width="6" />
</g>
<g opacity="100%" transform="translate(100,100)scale(0.5)">
<path d="M0,40 h40 v40 h40 v40 h40 v40"
fill="white" stroke="#BBC42A" stroke-width="6" />
</g>
</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