{let c = document.createElement("canvas");
c.setAttribute("width","400px;")
c.setAttribute("height","180px;")
let ctx = c.getContext("2d");
ctx.fillStyle = "#FF8888";
ctx.strokeStyle = "#888888";
ctx.lineWidth = "10";
ctx.beginPath();
ctx.rect(50, 20, 150, 150);
ctx.stroke();
ctx.fill();
ctx.font = "40px Source Serif Pro";
ctx.fillStyle = "#000000";
ctx.fillText("Canvas",60,110);
return c;
}
html`<svg width="70" height="70">
<circle cx="35" cy="35" r="25" stroke="blue" fill="none" stroke-width="5"/>
<circle cx="35" cy="35" r="1" stroke="red" stroke-width="5"/>
</svg>`
html`<svg width="200" height="70">
<ellipse cx="35" cy="35" rx="25" ry="25" stroke="blue" fill="none" stroke-width="5"/>
<circle cx="35" cy="35" r="1" stroke="red" stroke-width="5"/>
<ellipse cx="135" cy="35" rx="25" ry="10" stroke="blue" fill="none" stroke-width="5"/>
<circle cx="135" cy="35" r="1" stroke="red" stroke-width="5"/>
</svg>`
html`<svg width="70" height="70">
<rect x="10" y="10" width="50" height="50" stroke="darkcyan" fill="none" stroke-width="5"/>
<circle cx="10" cy="10" r="1" stroke="red" stroke-width="5" />
</svg>`
html`<svg width="400" height="70">
<rect x="10" y="10" width="50" height="50" rx="5" ry="5" stroke="darkcyan" fill="none" stroke-width="5"/>
<circle cx="10" cy="10" r="1" stroke="red" stroke-width="5" />
<rect x="110" y="10" width="50" height="50" rx="25" ry="10" stroke="darkcyan" fill="none" stroke-width="5"/>
<circle cx="110" cy="10" r="1" stroke="red" stroke-width="5" />
<rect x="210" y="10" width="50" height="50" rx="25" ry="25" stroke="darkcyan" fill="none" stroke-width="5"/>
<circle cx="210" cy="10" r="1" stroke="red" stroke-width="5" />
</svg>`
html`<svg width="70" height="70">
<line x1="10" y1="10" x2="60" y2="60" stroke="orange" fill="none" stroke-width="5"/>
<circle cx="10" cy="10" r="1" stroke="red" stroke-width="5" />
<circle cx="60" cy="60" r="1" stroke="red" stroke-width="5" />
</svg>`
html`<svg width="300" height="70">
<polyline points="10,10 15,20 20,15 25,30 30,25 35,40 40,35 45,50 50,45"
stroke="orange" fill="none" stroke-width="5"/>
<polyline points="110,10 150,10 150,50" stroke="orange" fill="none" stroke-width="5"/>
<circle cx="110" cy="10" r="1" stroke="red" stroke-width="5" />
<circle cx="150" cy="10" r="1" stroke="red" stroke-width="5" />
<circle cx="150" cy="50" r="1" stroke="red" stroke-width="5" />
</svg>`
html`<svg width="300" height="70">
<polygon points="25,20 30,35 45,35 35,45 40,60 25,50 10,60 15,45 5,35 20,35"
stroke="green" fill="none" stroke-width="5"/>
<polygon points="110,20 150,20 150,60 110,60" stroke="green" fill="none" stroke-width="5"/>
<circle cx="110" cy="20" r="1" stroke="red" stroke-width="5" />
<circle cx="150" cy="20" r="1" stroke="red" stroke-width="5" />
<circle cx="150" cy="60" r="1" stroke="red" stroke-width="5" />
<circle cx="110" cy="60" r="1" stroke="red" stroke-width="5" />
</svg>`
html`<svg width="70" height="70">
<text x="10" y="50" font-size="25px">Hallo</text>
<circle cx="10" cy="50" r="3" fill="red" />
</svg>`
html`<svg width="170" height="70">
<path d="M 20,30 Q 40,5 50,30 T 90,30"
fill="none" stroke="darkturquoise" stroke-width="5"/>
</svg>`
html`<svg height="160"">
<path d="M 10,80 C 40,10 65,10 95,80 S 150,150 180,80"
stroke="darkturquoise" stroke-width="5" fill="none"/>
<polyline points="10,80 40,10 65,10 95,80" stroke="red" fill="transparent"/>
<polyline points="95,80 125,150 150,150 180,80" stroke="blue" fill="transparent"/>
<circle cx="10" cy="80"r="1" stroke="red" stroke-width="5"/>
<circle cx="40" cy="10" r="1" stroke="red" stroke-width="5"/>
<circle cx="65" cy="10" r="1" stroke="red" stroke-width="5"/>
<circle cx="95" cy="80" r="1" stroke="red" stroke-width="5"/>
<circle cx="125" cy="150" r="1" stroke="blue" stroke-width="5"/>
<circle cx="150" cy="150" r="1" stroke="blue" stroke-width="5"/>
<circle cx="180" cy="80" r="1" stroke="blue" stroke-width="5"/>
</svg>`
html`<svg width="500" height="120">
<rect x="10" y="10" width="100" height="100"/>
<rect x="150" y="10" width="100" height="100" fill="green"/>
<rect x="290" y="10" width="100" height="100" fill="green" fill-opacity="0.5"/>
</svg>`
md`Linejoin:`
html`
<svg width=100 height=100 style='border: 1px dashed'>
<circle cx="50" cy="50" r="40" stroke="black" fill="yellow" />
<!-- CODE HIER -->
<ellipse cx="35" cy="35" rx="5" ry="10" stroke="black" />
<ellipse cx="65" cy="35" rx="5" ry="10" stroke="black" />
<path d="M 25,60 L 75,60 C 70,85 30,85 25,60 Z" stroke-width="3" stroke="black" fill="black"/>
<path d="M 30,60 L 70,60 70,65 C 65,68 35,68 30,65 Z" stroke-width="0" stroke="none" fill="white"/>
<path d="M 40,77 C 45,70 55,70 60,77 C 55,80 45,80 40,77" fill="salmon" />
</svg>
`
html`<svg viewBox="-10,0,125,68" width="800" height="550" class="footballfield">
<rect x=-20 y=-20 width=165 height=108 fill="green" />
<rect x=0 y=0 width=105 height=68 stroke="white" fill="none" />
<!-- linke Seite -->
<circle cx="11" cy="34" r="9.15" fill="green" stroke="white" /> <!-- Strafkreis -->
<rect x=0 y=13.85 width=16.5 height=40.3 stroke="white" fill="green" /> <!-- Strafraum -->
<rect x=0 y=24.85 width=5.5 height=18.3 stroke="white" fill="none" /> <!-- 5-Meter-Raum -->
<rect x=-2.4 y=30.35 width=2.4 height=7.3 stroke="white" fill="none" /> <!-- Tor -->
<circle cx=11 cy=34 r=1 fill="white "/> <!-- Elfmeterpunkt -->
<path d="M0,3 A 3,3 0,0,0 3,0" stroke="white" fill="none" /> <!-- Ecke oben links -->
<path d="M3,68 A 3,3 0,0,0 0,65" stroke="white" fill="none" /> <!-- Ecke unten links -->
<!-- Mitte -->
<line x1=52.5 y1=0 x2=52.5 y2=68 stroke="white" fill="none" /> <!-- Mittellinie -->
<circle cx="52.5" cy="34" r="1" fill="white" /> <!-- Mittelpunkt -->
<circle cx="52.5" cy="34" r="9.15" stroke="white" fill="none" /> <!-- Mittelkreis -->
<!-- rechte Seite -->
<circle cx="94" cy="34" r="9.15" fill="green" stroke="white" /> <!-- Strafkreis -->
<rect x="88.5" y="13.85" width="16.5" height="40.3" stroke="white" fill="green" /> <!-- Strafraum -->
<rect x=99.5 y=24.85 width=5.5 height=18.3 stroke="white" fill="none" /> <!-- 5-Meter-Raum -->
<rect x=105 y=30.35 width=2.4 height=7.3 stroke="white" fill="none" /> <!-- Tor -->
<circle cx=94 cy=34 r=1 fill="white "/> <!-- Elfmeterpunkt -->
<path d="M102,0 A 3,3 0,0,0 105,3" stroke="white" fill="none" /> <!-- Ecke oben rechts -->
<path d="M105,65 A 3,3 0,0,0 102,68" stroke="white" fill="none" /> <!-- Ecke unten rechts -->
</svg>`
html`<svg width="400px" height="200px">
<rect x="0" y="0" width="400" height="200" stroke="black" fill="none"/>
<g>
<rect x="100" y="50" width="100" height="100" fill="lightgreen"/>
<text x="120" y="110" font-size="30px">BOX</text>
</g>
<rect x="100" y="50" width="100" height="100" stroke="black" fill="none" stroke-dasharray="5"/>
</svg>`
html`<svg width="400px" height="200px">
<rect x="0" y="0" width="400" height="200" stroke="black" fill="none"/>
<g transform="scale(2)">
<rect x="100" y="50" width="100" height="100" fill="lightgreen"/>
<text x="120" y="110" font-size="30px">BOX</text>
</g>
<rect x="100" y="50" width="100" height="100" stroke="black" fill="none" stroke-dasharray="5"/>
</svg>
<code>transform="scale(2)"</code>`
html`<svg width="400px" height="200px">
<rect x="0" y="0" width="400" height="200" stroke="black" fill="none"/>
<g transform="scale(2,1)">
<rect x="100" y="50" width="100" height="100" fill="lightgreen"/>
<text x="120" y="110" font-size="30px">BOX</text>
</g>
<rect x="100" y="50" width="100" height="100" stroke="black" fill="none" stroke-dasharray="5"/>
</svg>`
html`<svg width="400px" height="200px">
<rect x="0" y="0" width="400" height="200" stroke="black" fill="none"/>
<g transform="translate(100,0)">
<rect x="100" y="50" width="100" height="100" fill="lightgreen"/>
<text x="120" y="110" font-size="30px">BOX</text>
</g>
<rect x="100" y="50" width="100" height="100" stroke="black" fill="none" stroke-dasharray="5"/>
</svg>`
html`<svg width="400px" height="200px">
<rect x="0" y="0" width="400" height="200" stroke="black" fill="none"/>
<g transform="scale(2) translate(-100,-50)">
<rect x="100" y="50" width="100" height="100" fill="lightgreen"/>
<text x="120" y="110" font-size="30px">BOX</text>
</g>
<rect x="100" y="50" width="100" height="100" stroke="black" fill="none" stroke-dasharray="5"/>
</svg>
<code>transform="scale(2) translate(-100,-50)"</code>`
html`<svg width="400px" height="200px">
<rect x="0" y="0" width="400" height="200" stroke="black" fill="none"/>
<g transform="translate(-100,-50) scale(2)">
<rect x="100" y="50" width="100" height="100" fill="lightgreen"/>
<text x="120" y="110" font-size="30px">BOX</text>
</g>
<rect x="100" y="50" width="100" height="100" stroke="black" fill="none" stroke-dasharray="5"/>
</svg>`
html`<svg width="400px" height="200px">
<rect x="0" y="0" width="400" height="200" stroke="black" fill="none"/>
<g transform="translate(50,0) scale(2) translate(-100,-50)">
<rect x="100" y="50" width="100" height="100" fill="lightgreen"/>
<text x="120" y="110" font-size="30px">BOX</text>
</g>
<rect x="100" y="50" width="100" height="100" stroke="black" fill="none" stroke-dasharray="5"/>
</svg>`
html`<svg width="400px" height="200px">
<rect x="0" y="0" width="400" height="200" stroke="black" fill="none"/>
<g transform="translate(200,150) scale(-1) translate(-100,-50)">
<rect x="100" y="50" width="100" height="100" fill="lightgreen"/>
<text x="120" y="110" font-size="30px">BOX</text>
</g>
</svg>`
html`<svg viewBox="-10,0,125,68" width="800" height="550" class="footballfield">
<g stroke-width="0.5" stroke="white" fill="none">
<rect x=-20 y=-20 width=165 height=108 fill="green" />
<rect x=0 y=0 width=105 height=68 />
<!-- linke Seite -->
<g>
<circle cx="11" cy="34" r="9.15" fill="green" stroke="white" /> <!-- Strafkreis -->
<rect x=0 y=13.85 width=16.5 height=40.3 stroke="white" fill="green" /> <!-- Strafraum -->
<rect x=0 y=24.85 width=5.5 height=18.3 stroke="white" fill="none" /> <!-- 5-Meter-Raum -->
<rect x=-2.4 y=30.35 width=2.4 height=7.3 stroke="white" fill="none" /> <!-- Tor -->
<circle cx=11 cy=34 r=1 fill="white "/> <!-- Elfmeterpunkt -->
<path d="M0,3 A 3,3 0,0,0 3,0" stroke="white" fill="none" /> <!-- Ecke oben links -->
<path d="M3,68 A 3,3 0,0,0 0,65" stroke="white" fill="none" /> <!-- Ecke unten links -->
</g>
<!-- Mitte -->
<g>
<line x1=52.5 y1=0 x2=52.5 y2=68 stroke="white" fill="none" /> <!-- Mittellinie -->
<circle cx="52.5" cy="34" r="1" fill="white" /> <!-- Mittelpunkt -->
<circle cx="52.5" cy="34" r="9.15" stroke="white" fill="none" /> <!-- Mittelkreis -->
</g>
<!-- rechte Seite -->
<g transform="translate(105,0) scale(-1,1)">
<circle cx="11" cy="34" r="9.15" fill="green" stroke="white" /> <!-- Strafkreis -->
<rect x=0 y=13.85 width=16.5 height=40.3 stroke="white" fill="green" /> <!-- Strafraum -->
<rect x=0 y=24.85 width=5.5 height=18.3 stroke="white" fill="none" /> <!-- 5-Meter-Raum -->
<rect x=-2.4 y=30.35 width=2.4 height=7.3 stroke="white" fill="none" /> <!-- Tor -->
<circle cx=11 cy=34 r=1 fill="white "/> <!-- Elfmeterpunkt -->
<path d="M0,3 A 3,3 0,0,0 3,0" stroke="white" fill="none" /> <!-- Ecke oben rechts -->
<path d="M3,68 A 3,3 0,0,0 0,65" stroke="white" fill="none" /> <!-- Ecke unten rects -->
</g>
</g>
</svg>`
import {slider} from "@jashkenas/inputs"
import {radio} from "@jashkenas/inputs"
import {checkbox} from "@jashkenas/inputs"
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.
