Untitled

dabblet.css

*{
	/* set variable, needs to start with "--" */
	--my-color: #009688;
}


.demo {  
	border: solid 5px var(--my-color);  
	box-shadow: 0 0 5px var(--my-color);  
	color: var(--my-color);    
	font-size: 80px;  
	text-align: center;  
	font-family: monospace;
}


svg {
	height: 0.8em;
	fill: var(--my-color, black);
}

dabblet.html

<div class="demo">  
	Let them eat
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
		<path d="M448 384c-28.02 0-31.26-32-74.5-32-43.43 0-46.825 32-74.75 32-27.695 0-31.454-32-74.75-32-42.842 0-47.218 32-74.5 32-28.148 0-31.202-32-74.75-32-43.547 0-46.653 32-74.75 32v-80c0-26.5 21.5-48 48-48h16V112h64v144h64V112h64v144h64V112h64v144h16c26.5 0 48 21.5 48 48v80zm0 128H0v-96c43.356 0 46.767-32 74.75-32 27.951 0 31.253 32 74.75 32 42.843 0 47.217-32 74.5-32 28.148 0 31.201 32 74.75 32 43.357 0 46.767-32 74.75-32 27.488 0 31.252 32 74.5 32v96zM96 96c-17.75 0-32-14.25-32-32 0-31 32-23 32-64 12 0 32 29.5 32 56s-14.25 40-32 40zm128 0c-17.75 0-32-14.25-32-32 0-31 32-23 32-64 12 0 32 29.5 32 56s-14.25 40-32 40zm128 0c-17.75 0-32-14.25-32-32 0-31 32-23 32-64 12 0 32 29.5 32 56s-14.25 40-32 40z"/>
	</svg> 
	!
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}