Some doodles using this approach:
- Using SVG as real XML and explotiting custom entities for fun:
- Comparing SVG with CSS shape emulation using gradients:
- SMIL animated SVG background:
It is in fact nothing more than
<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)"/>\
(make sure you allow the cross site request of http://bytesizematters.com/bytesize.js which is hosted on another of her domains if nothing is displaying)
Then the seed could be a path with only seven line segments.
That could then be scaled by -1 to get the other half to arrive at the author's seed.
Finally, a few <pattern> elements would be enough to fill in the rest, though I'm not certain which way would produce the least amount of code. There's probably even a tinier code path using nested <pattern> elements. :)
Edit: Also-- either two continuous line segments with one overlap, or three with no overlap. And some "v" and "h" commands in there to be extra terse. :)
(Technically you could do it using HTML in an SVG by leveraging the ForeignObject element as well, but that's still more complicated than CSS.)
Hover states work fine in SVG as well, and if you don't care about those, you could just use a pattern.
What I see is that CSS is slowly becoming more and more of a programming/Turing complete and/or graphics language, rather than simply just stylesheets.
Could you just position the mouse somewhere, never move it again, and let CSS flicker drive everything? It gives you a natural clock.
HTML, CSS, SVG, etc. are wonderful things that I hope we perpetuate.
The webkit reflect operation can be decomposed into a CSS transform and repetition. If there was some sort of template expansion, you could avoid the repetition entirely.
But people have a hard on for doing it this way instead, even though it just means adding more special case operators to CSS, instead of designing a proper layout and styling system based on orthogonality.
Wonderful is not the word I'd use.
If we're talking artwork, I do get it. But most websites are not work of art. They're business, mainly.