SVG experiments

dabblet.css

/* SVG experiments */
svg {
	margin: 50px;
	background: #eee;
}

line {
	stroke: slategray;
	stroke-width: 2;
	marker: url(#circle);
}

dabblet.html

<svg width="180" height="180" viewBox="-20 -20 140 140">
	<defs>
		<marker id="circle" viewBox="0 0 4 4" 
			refX="2" refY="2" markerUnits="strokeWidth">
			<circle cx="2" cy="2" r="1.5" fill="white" stroke="slategray" />
		</marker>
	</defs>
	<path fill="none" stroke="black" stroke-width="4" stroke-linecap="round"
	d="M0,100 C20,50, 40,30, 100,0" />
	<line x1="0" y1="100" x2="20" y2="50" />
	<line x1="100" y1="0" x2="40" y2="30" />
</svg>

settings.json

{"page":"html","view":"split"}