Mucking around with SVG and CSS

dabblet.css

/**
 * Mucking around with SVG and CSS
 */


.bubble {

}

#gradient stop:nth-child(1) {
	stop-color: black;
	stop-opacity: 0;
}

#gradient stop:nth-child(2) {
	stop-color: black;
	stop-opacity: .2;
}

.bubble circle {
	fill: #FFB900;
}

.bubble .overlay {
	fill: url(#gradient);
}

dabblet.html

<svg>
	<defs>
		<radialGradient id="gradient">
			<stop offset="0%" />
        	<stop offset="100%" />
      	</radialGradient>
	</defs>
</svg>

<svg class="bubble" width="600" height="600">
	<circle r="200" cy="300" cx="300"></circle>
	<circle class="overlay" r="200" cy="300" cx="300"></circle>
</svg>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}