<html>
<head>
<style>

.spans {
font-size: 9px;
color: black;
text-shadow: -1px 1px 1px #e52dff;
}

th {
text-align: left;
}

* {
cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='126' viewport='0 0 100 100'><polyline points='40,2 20,15 80,10 60,20 126,30 86,48' style='fill:none;stroke:black;stroke-width:3' /><text y='90%'>\002753</text><ellipse cx='24' cy='20' rx='22' ry='13' style='fill:purple' /><ellipse cx='22' cy='17' rx='19' ry='12' style='fill:lime' /><ellipse cx='21' cy='14' rx='16' ry='12' style='fill:yellow' /><rect x='40' y='20' width='80' height='25' style='fill:blue'><animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='5s' repeatCount='indefinite' /></rect>Sorry, your browser does not support inline SVG.</svg>") 16 16, crosshair;
}

body {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='48' width='126' viewport='0 0 100 100'><polyline points='40,2 20,15 80,10 60,20 126,30 86,48' style='fill:none;stroke:black;stroke-width:3' /><text y='90%'>\002753</text><ellipse cx='24' cy='20' rx='22' ry='13' style='fill:purple' /><ellipse cx='22' cy='17' rx='19' ry='12' style='fill:lime' /><ellipse cx='21' cy='14' rx='16' ry='12' style='fill:yellow' /><rect x='40' y='20' width='80' height='25' style='fill:blue'><animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='5s' repeatCount='indefinite' /></rect>Sorry, your browser does not support inline SVG.</svg>");
background-repeat: no-repeat;
}

.border-img {
border: 30px solid transparent;
margin:100px;
width:100px;
height:31px;
border-image: url('data:image/svg+xml,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30" rx="10" fill="red"/></svg>');
border-image-slice: 40 40 40 40 fill;
border-image-width: 10px;
border-image-outset: 25px 10px;
background-size: contain;
}

.border-img.ok {
height: 31px
}

h1 {
text-shadow: -1px 1px 1px #e52dff;
}

</style>
<script type=text/javascript>

// thanks to https://stackoverflow.com/questions/71117619/css-svg-border-image-broken-rendering

function docursor(tio) {
var tv=tio.value;
if (tv.indexOf(String.fromCharCode(10)) != -1) { while (tv.indexOf(String.fromCharCode(10)) != -1) { tv=tv.replace(String.fromCharCode(10),' '); } tio.value=tv; }
document.getElementById('dstyle').innerHTML+='<style> *' + ' { ' + ' cursor: ' + document.getElementById('icur').value + 'url("data:image/svg+xml;utf8,' + tv + '") 16 16, crosshair; } ';
}

function dobackground(tio) {
var tv=tio.value;
if (tv.indexOf(String.fromCharCode(10)) != -1) { while (tv.indexOf(String.fromCharCode(10)) != -1) { tv=tv.replace(String.fromCharCode(10),' '); } tio.value=tv; }
document.getElementById('dstyle').innerHTML+='<style> bo' + 'dy { ' + ' background: ' + document.getElementById('itbg').value + 'url("data:image/svg+xml;utf8,' + tv + '"); background-repeat: ' + document.getElementById('brepeat').innerHTML + '; } ';
}

function doborder(tio) {
var tv=tio.value;
if (tv.indexOf(String.fromCharCode(10)) != -1) { while (tv.indexOf(String.fromCharCode(10)) != -1) { tv=tv.replace(String.fromCharCode(10),' '); } tio.value=tv; }
document.getElementById('dstyle').innerHTML+='<style> .bor' + 'der-img { ' + document.getElementById('pretbi').value.replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)) + ' border-image: url("data:image/svg+xml,' + tv + '"); ' + document.getElementById('posttbi').value.replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)).replace(String.fromCharCode(10),String.fromCharCode(32)) + ' } ';
}

function titletas() {
var ihs=document.head.innerHTML + document.body.innerHTML;
var cursorparts=ihs.split('*' + ' {');
if (eval('' + cursorparts.length) >= 1) {
document.getElementById('tc').title='<style> *' + ' { ' + cursorparts[eval(-1 + cursorparts.length)].split('}')[0].replace(/\&\;/g,'&').replace(/\"\;/g,"'") + ' } </style>';
}
cursorparts=ihs.split('bo' + 'dy {');
if (eval('' + cursorparts.length) >= 1) {
document.getElementById('tbg').title='<style> bo' + 'dy { ' + cursorparts[eval(-1 + cursorparts.length)].split('}')[0].replace(/\&\;/g,'&').replace(/\"\;/g,"'") + ' } </style>';
}
cursorparts=ihs.split('.bor' + 'der-img {');
if (eval('' + cursorparts.length) >= 1) {
document.getElementById('tbi').title='<style> .bor' + 'der-img { ' + cursorparts[eval(-1 + cursorparts.length)].split('}')[0].replace(/\&\;/g,'&').replace(/\"\;/g,"'") + ' } .borde' + 'r-img.ok { height: 31px; } </style>';
document.getElementById('pretbi').title='<style> .bor' + 'der-img { ' + cursorparts[eval(-1 + cursorparts.length)].split('}')[0].replace(/\&\;/g,'&').replace(/\"\;/g,"'") + ' } .borde' + 'r-img.ok { height: 31px; } </style>';
document.getElementById('posttbi').title='<style> .bor' + 'der-img { ' + cursorparts[eval(-1 + cursorparts.length)].split('}')[0].replace(/\&\;/g,'&').replace(/\"\;/g,"'") + ' } .borde' + 'r-img.ok { height: 31px; } </style>';
}
}
</script>
</head>
<body onload=setInterval(titletas,1000);>
<h1>Test Your Own SVG</h1>
<h3>RJM Programming - December, 2022</h3>
<h4>Thanks to <a target=_blank title='https://stackoverflow.com/questions/71117619/css-svg-border-image-broken-rendering' href='https://stackoverflow.com/questions/71117619/css-svg-border-image-broken-rendering'>https://stackoverflow.com/questions/71117619/css-svg-border-image-broken-rendering</a></h4>
<table style=width:100%; border=2>
<tr><th>Cursor<br><span id=soc style=display:none;>Opacity: <input style=display:inline-block;width:80%; type=text placeholder="linear-gradient(rgba(255,255,255,0.0),rgba(255,255,255,0.0))," id=icur onblur="docursor(document.getElementById('tc'));" value=""></input></span></th><th> </th><th>Background <span style='border:1px dotted pink;' id=brepeat contenteditable=true onblur="dobackground(document.getElementById('tbg'));">no-repeat</span><br><span>Opacity: <input style=display:inline-block;width:450px; type=text placeholder="linear-gradient(rgba(255,255,255,0.0),rgba(255,255,255,0.0))," id=itbg onblur="dobackground(document.getElementById('tbg')); doborder(document.getElementById('tbi'));" value=""></input></span></th></tr>
<td style='vertical-align:top;'><span class=spans><style> *<font color=black> {</font> cursor: url("</span><br>
<details id=mydetails open><summary></summary>
<textarea title='' id=tc style='width:100%;height:150px;' onblur=docursor(this);><svg xmlns='http://www.w3.org/2000/svg' height='48' width='126' viewport='0 0 100 100'><polyline points='40,2 20,15 80,10 60,20 126,30 86,48' style='fill:none;stroke:black;stroke-width:3' /><text y='90%'>\002753</text><ellipse cx='24' cy='20' rx='22' ry='13' style='fill:purple' /><ellipse cx='22' cy='17' rx='19' ry='12' style='fill:lime' /><ellipse cx='21' cy='14' rx='16' ry='12' style='fill:yellow' /><rect x='40' y='20' width='80' height='25' style='fill:blue'><animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='5s' repeatCount='indefinite' /></rect>Sorry, your browser does not support inline SVG.</svg></textarea>
</details><br><span class=spans>") 16 16, crosshair; } </style></span><br><hr><strong>Border Image</strong><br>
<span class=spans><style> .bord<font color=black>er-img</font> {</span><br>
<details><summary></summary><textarea title='' id=pretbi style='width:100%;height:100px;' onblur="doborder(document.getElementById('tbi'));"> border: 30px solid transparent;
margin:100px;
width:100px;
height:31px; </textarea></details><br>
<span class=spans>borde<font color=black>r-image</font>: url("data:image/svg+xml,</span><br>
<textarea title='' id=tbi style='width:100%;height:100px;' onblur=doborder(this);><svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><rect width='30' height='30' rx='10' fill='red'/></svg></textarea>
<span class=spans>");</span><br>
<details><summary></summary><textarea title='' id=posttbi style='width:100%;height:100px;' onblur="doborder(document.getElementById('tbi'));"> border-image-slice: 40 40 40 40 fill;
border-image-width: 10px;
border-image-outset: 25px 10px;
background-size: contain; </textarea></details><br>
<span class=spans>} </style></span></td>
<td> </td><td class="border-img ok" id=righttd style='vertical-align:top;'>
<span class=spans><style> bo<font color=black>dy {</font> cursor: url("</span><br><textarea title='' id=tbg style='width:100%;height:400px;' onblur=dobackground(this);><svg xmlns='http://www.w3.org/2000/svg' height='48' width='126' viewport='0 0 100 100'><polyline points='40,2 20,15 80,10 60,20 126,30 86,48' style='fill:none;stroke:black;stroke-width:3' /><text y='90%'>\002753</text><ellipse cx='24' cy='20' rx='22' ry='13' style='fill:purple' /><ellipse cx='22' cy='17' rx='19' ry='12' style='fill:lime' /><ellipse cx='21' cy='14' rx='16' ry='12' style='fill:yellow' /><rect x='40' y='20' width='80' height='25' style='fill:blue'><animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='5s' repeatCount='indefinite' /></rect>Sorry, your browser does not support inline SVG.</svg></textarea><br><span class=spans>"); </style></span></td>
</table>

<div id=dstyle></div>

</body>
</html>