Published
Edited
Nov 6, 2021
<svg width="800" height="500">
<rect x="0" y="0" width="800" height="500" fill="lightblue"></rect>
<circle cx="133" cy="125" r="115" fill="rgba(0,0,255,0.2)" stroke="red" stroke-width="18"></circle>
<circle cx="399" cy="125" r="115" fill="rgba(0,0,255,0.2)" stroke="green" stroke-width="18"></circle>
<circle cx="665" cy="125" r="115" fill="rgba(0,0,255,0.2)" stroke="blue" stroke-width="18"></circle>
<circle cx="266" cy="250" r="115" fill="rgba(0,0,255,0.2)" stroke="orange" stroke-width="18"></circle>
<circle cx="532" cy="250" r="115" fill="rgba(0,0,255,0.2)" stroke="brown" stroke-width="18"></circle>
<circle cx="399" cy="375" r="115" fill="rgba(0,0,255,0.2)" stroke="pink" stroke-width="18"></circle>
</svg>
<svg width="800" height="500">
<rect x="0" y="0" width="800" height="500" fill="hsl(200,30%,30%)"></rect>
<circle cx="133" cy="125" r="90" fill="hsla(10,100%,80%,0.5)" stroke="hsla(0,50%,70%,0.5)" stroke-width="50"></circle>
<circle cx="399" cy="125" r="90" fill="hsla(40,100%,80%,0.5)" stroke="hsla(40,50%,70%,0.5)" stroke-width="50"></circle>
<circle cx="665" cy="125" r="90" fill="hsla(70,100%,80%,0.5)" stroke="hsla(80,50%,70%,0.5)" stroke-width="50"></circle>
<circle cx="266" cy="250" r="90" fill="hsla(100,100%,80%,0.5)" stroke="hsla(120,50%,70%,0.5)" stroke-width="50"></circle>
<circle cx="532" cy="250" r="90" fill="hsla(130,100%,80%,0.5)" stroke="hsla(160,50%,70%,0.5)" stroke-width="50"></circle>
<circle cx="399" cy="375" r="90" fill="hsla(160,100%,80%,0.5)" stroke="hsla(200,50%,70%,0.5)" stroke-width="50"></circle>
</svg>
<svg width="200" height="100">
<rect x="0" y="0" width="200" height="100"></rect>
</svg>
<svg width="200" height="100">
<circle cx="100" cy="50" r="50"></circle>
</svg>
<svg width="200" height="100">
<ellipse cx="100" cy="50" rx="100" ry="50"></ellipse>
</svg>
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
<svg width="200" height="100">
<line x1="0" y1="0" x2="200" y2="100" stroke="blue"></line>
</svg>
<svg width="200" height="100">
<text x="100" y="50" font-family="serif" font-size="20" fill="red">超簡単！</text>
</svg> <!-- yの値はベースラインを決める。フォントや色は親要素のものが引き継がれる。svgのスタイルかな？そのため、自分で指定したい場合は上のように書く。 -->
<svg width="200" height="50">
<text x="100" y="50" font-family="serif" font-size="20" fill="red">超簡単！</text>
</svg>
<!-- ベースラインの座標yがheightと同じ場合、ディゼンダ部分がSVGの境界からはみ出し、切れてしまう。 -->
<svg width="50" height="50">
<circle cx="25" cy="25" r="20" fill="yellow" stroke="orange" stroke-width="2"></circle>
</svg>
<svg width="50" height="50">
<circle cx="25" cy="25" r="20" class="pumpkin"></circle>
</svg>
<style>
svg .pumpkin {
fill: yellow;
stroke: orange;
stroke-width: 2;
}
</style>
<!-- cssでスタイルを設定するやり方。circle要素の方でclassを設定しておく。
メリットが多い書き方である。svg .class名という書き方をしておくと他のhtmlのcssと見分けがつきやすい。-->
<svg width="500" height="70">
<rect x="0" y="0" width="10" height="10" fill="green"></rect>
<rect x="5" y="5" width="20" height="20" fill="lightgreen"></rect>
<rect x="10" y="10" width="30" height="30" fill="yellow"></rect>
<rect x="20" y="20" width="40" height="40" fill="orange"></rect>
<rect x="30" y="30" width="50" height="50" fill="red"></rect>
</svg>
<svg width="500" height="100">
<circle cx="50" cy="50" r="40" fill="rgba(125,100,100,0.5)"></circle>
<circle cx="90" cy="50" r="40" fill="rgba(155,100,100,0.5)" stroke="rgba(230,200,139,0.4)" stroke-width="20"></circle>
<circle cx="130" cy="50" r="40" fill="rgba(185,100,100,0.5)" stroke="rgba(200,140,200,0.6)" stroke-width="20"></circle>
</svg>
<svg width="500" height="100">
<circle cx="50" cy="50" r="40" fill="green" stroke="blue" stroke-width="10" opacity="0.5"></circle>
<circle cx="90" cy="50" r="40" fill="red" stroke="yellow" stroke-width="20" opacity="0.3"></circle>
</svg>
<svg width="500" height="100">
<circle cx="50" cy="50" r="40" fill="rgba(45,100,100,0.75)" opacity="0.2"></circle>
<circle cx="90" cy="50" r="40" fill="rgba(110,100,100,0.75)" stroke="rgba(210,200,139,0.75)" stroke-width="20" opacity="0.5"></circle>
<circle cx="130" cy="50" r="40" fill="rgba(233,100,100,0.75)" stroke="rgba(230,140,200,0.75)" stroke-width="20" opacity="0.9"></circle>
</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.
