3 ms·
(Here is realization of that "plain SVG in SVG in CSS" approach: https://codepen.io/myf/pen/QRgVdN https://codepen.io/myf/pen/QRgVdN It is in fact nothing mor
by myfonj 7y ago
(Here is realization of that "plain SVG in SVG in CSS" approach:
https://codepen.io/myf/pen/QRgVdN https://codepen.io/myf/pen/QRgVdN
It is in fact nothing more than
body {
background-color: dimgray;
background-image: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
viewBox="-3 -3 6 6" stroke-width=".1">\
<path id="p" fill="none" stroke="black" \
d="M-2-1v1h1v-1h1v-1h-1zh-1v1h1zh-1v-2h2v1h1v-1h-1.51l-1.5 1.5" />\
<use href="%23p" transform="rotate(90)"/>\
<use href="%23p" transform="rotate(180)"/>\
<use href="%23p" transform="rotate(-90)"/>\
</svg>');
background-size: 25vw;
}
(Rotations instead of flipping because reasons. Making this work in IE would require extra URI encoding of bracket characters (at least).)