SVG Data URI Background borders

dabblet.css

/**
 * SVG Data URI Background borders
 */

body{
background: #fff;
min-height: 100%;
font-family: sans-serif;
}

h1 {
	font-size: 3em;
	border-bottom: 4px solid black;
	-webkit-border-image: url('data:image/svg+xml;utf8,<svg width="170" height="4" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin" class="logo"><rect stroke="#000000" stroke-opacity="0" id="svg_1" height="3.7702" width="33.93178" y="0" x="135.7271" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#ff00ff"/><rect id="svg_2" stroke="#000000" stroke-opacity="0" height="3.7702" width="33.93178" y="0" x="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#ff0000"/><rect id="svg_3" stroke="#000000" stroke-opacity="0" height="3.7702" width="33.93178" y="0" x="33.93178" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#00ff00"/><rect id="svg_4" stroke="#000000" stroke-opacity="0" height="3.7702" width="33.93178" y="0" x="101.79533" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#0000ff"/><rect id="svg_5" stroke="#000000" stroke-opacity="0" height="3.7702" width="33.93178" y="0" x="67.86356" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="null" fill="#ff7f00"/></svg>') 0 0 4 0  repeat; 
}

dabblet.html

<h1>Test text</h1>

dabblet.js

// alert('Hello world!');

settings.json

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