Test Your Own SVG
RJM Programming - December, 2022
Thanks to
https://stackoverflow.com/questions/71117619/css-svg-border-image-broken-rendering
Cursor
Opacity:
Background
no-repeat
Opacity:
<style> *
{
cursor: url("
<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; } </style>
Border Image
<style> .bord
er-img
{
border: 30px solid transparent; margin:100px; width:100px; height:31px;
borde
r-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;
} </style>
<style> bo
dy {
cursor: url("
<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>
"); </style>