ynonp/dabblet.css

## dabblet.css
/**
 * An SVG Smiley face
 */
html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height:100%;
}

svg {
	display: block;
	width: 100px;
	margin: 0 auto;
}

## dabblet.html
<!-- content to be placed inside <body>…</body> -->

<svg>
  <g transform='translate(0,60)'>
  	<rect width=100 height=100 />
	<circle r=15 fill='red' id='c' cx=25 cy=30 />
	<circle r=15 fill='red' id='c' cx=75 cy=30 />
	<g transform='translate(15,65)'>
		<path d="M0,0 A40,40 10 0,0 65,0" fill=none stroke=white stroke-width=5 />
	</g>
  </g>
</svg>

## settings.json
{"page":"css","view":"split"}
	/**
	* An SVG Smiley face
	*/
	html {
	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height:100%;
	}

	svg {
	display: block;
	width: 100px;
	margin: 0 auto;
	}
	<!-- content to be placed inside <body>…</body> -->

	<svg>
	<g transform='translate(0,60)'>
	<rect width=100 height=100 />
	<circle r=15 fill='red' id='c' cx=25 cy=30 />
	<circle r=15 fill='red' id='c' cx=75 cy=30 />
	<g transform='translate(15,65)'>
	<path d="M0,0 A40,40 10 0,0 65,0" fill=none stroke=white stroke-width=5 />
	</g>
	</g>
	</svg>