
Chinese Window Lattice and CSS - spirit23
https://yuanchuan.dev/2019/05/15/window-lattice-and-css.html
======
myfonj
Nice demo. Reflecting complex content like text with effects is hard and this
reflection technique could definitely help, but for simple geometry and tiling
it is quite trivial to put "pure SVG" into CSS as a background-image and let
CSS do the tiling: vector goodness remains preserved, no "DOM polution"
happens, and everything stays in CSS, even could remain in readable state.

Some doodles using this approach: \- Using SVG as real XML and explotiting
custom entities for fun: \--
[https://codepen.io/myf/pen/yqjQdz?editors=0100](https://codepen.io/myf/pen/yqjQdz?editors=0100)
\- Comparing SVG with CSS shape emulation using gradients: \--
[https://codepen.io/myf/pen/Bzmmry?editors=0100](https://codepen.io/myf/pen/Bzmmry?editors=0100)
\- SMIL animated SVG background: \--
[https://codepen.io/myf/pen/ZNbrLq?editors=0100](https://codepen.io/myf/pen/ZNbrLq?editors=0100)

~~~
myfonj
(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).)

------
robocat
One of the example images causes an optical illusion for me:

[https://yuanchuan.dev/assets/images/post/lattice/going-
deep....](https://yuanchuan.dev/assets/images/post/lattice/going-deep.png)

------
Raphmedia
If you like this, you may like Lea Verou's CSS3 Patterns Gallery library.
[https://leaverou.github.io/css3patterns/](https://leaverou.github.io/css3patterns/)

(make sure you allow the cross site request of
[http://bytesizematters.com/bytesize.js](http://bytesizematters.com/bytesize.js)
which is hosted on another of her domains if nothing is displaying)

~~~
myfonj
Or [https://www.heropatterns.com/](https://www.heropatterns.com/) seems nice.
Not CSS "gradient shapes" like Lea's collection but SVG background images.

------
jancsika
With SVG seems like you could divide the author's seed in half (as if using a
backslash for the slicer).

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. :)

~~~
onion2k
You could do this easily in SVG, or canvas, or webgl if you're only drawing
lines. The benefit of CSS is that you can use any HTML element, and it'll be
interactive so hover states and event handlers will work (on the original at
least, and I assume the reflection as well, but I'd need to test that). That's
a big win.

(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.)

~~~
microcolonel
> _The benefit of CSS is that you can use any HTML element, and it 'll be
> interactive so hover states and event handlers will work (on the original at
> least, and I assume the reflection as well, but I'd need to test that)._

Hover states work fine in SVG as well, and if you don't care about those, you
could just use a pattern.

------
adamzegelin
Impressive.

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.

~~~
jrumbut
Becoming a programming language and enabling awesome creative, aesthetic, and
cultural expressions. Both processes feeding off each other.

HTML, CSS, SVG, etc. are wonderful things that I hope we perpetuate.

~~~
cotelletta
The article is basically a long exercise in avoiding repetition of the source
content. For no good reason other than code aesthetics.

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.

------
foxfired
If I have to guess, maybe this wasn't accepted because if you nest your
elements wrong, you could easily eat up all your CPU cycles.

