<html>
<head>
<style>

* {
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 {
margin:100px;
width:100px;
height:30px;
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> body { ' + ' 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> .border-img { margin:100px; width:100px; height:30px; border-image: url("data:image/svg+xml,' + tv + '"); border-image-slice: 40 40 40 40 fill; border-image-width: 10px; border-image-outset: 25px 10px; background-size: contain; } ';
}
</script>
</head>
<body>
<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%;>
<tr><th>Cursor<span id=soc style=display:none;><br>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=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>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></th></tr>
<td style='vertical-align:top;'><details id=mydetails open><summary></summary>
<textarea id=tc style='width:100%;height:200px;' 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><strong>Border Image</strong><br>
<textarea 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></td>
<td> </td><td class="border-img ok" id=righttd style='vertical-align:top;'>
<textarea 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></td>
</table>

<div id=dstyle></div>

</body>
</html>