Chinese Window Lattice and CSS

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 &quot;pure SVG&quot; into CSS as a background-image and let CSS do the tiling: vector goodness remains preserved, no &quot;DOM polution&quot; happens, and everything stays in CSS, even could remain in readable state.<p>Some doodles using this approach: - Using SVG as real XML and explotiting custom entities for fun: -- <a href="https:&#x2F;&#x2F;codepen.io&#x2F;myf&#x2F;pen&#x2F;yqjQdz?editors=0100" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;myf&#x2F;pen&#x2F;yqjQdz?editors=0100</a> - Comparing SVG with CSS shape emulation using gradients: -- <a href="https:&#x2F;&#x2F;codepen.io&#x2F;myf&#x2F;pen&#x2F;Bzmmry?editors=0100" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;myf&#x2F;pen&#x2F;Bzmmry?editors=0100</a> - SMIL animated SVG background: -- <a href="https:&#x2F;&#x2F;codepen.io&#x2F;myf&#x2F;pen&#x2F;ZNbrLq?editors=0100" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;myf&#x2F;pen&#x2F;ZNbrLq?editors=0100</a>

One of the example images causes an optical illusion for me:<p><a href="https:&#x2F;&#x2F;yuanchuan.dev&#x2F;assets&#x2F;images&#x2F;post&#x2F;lattice&#x2F;going-deep.png" rel="nofollow">https:&#x2F;&#x2F;yuanchuan.dev&#x2F;assets&#x2F;images&#x2F;post&#x2F;lattice&#x2F;going-deep....</a>

If you like this, you may like Lea Verou&#x27;s CSS3 Patterns Gallery library. <a href="https:&#x2F;&#x2F;leaverou.github.io&#x2F;css3patterns&#x2F;" rel="nofollow">https:&#x2F;&#x2F;leaverou.github.io&#x2F;css3patterns&#x2F;</a><p>(make sure you allow the cross site request of <a href="http:&#x2F;&#x2F;bytesizematters.com&#x2F;bytesize.js" rel="nofollow">http:&#x2F;&#x2F;bytesizematters.com&#x2F;bytesize.js</a> which is hosted on another of her domains if nothing is displaying)

With SVG seems like you could divide the author&#x27;s seed in half (as if using a backslash for the slicer).<p>Then the seed could be a path with only seven line segments.<p>That could then be scaled by -1 to get the other half to arrive at the author&#x27;s seed.<p>Finally, a few &lt;pattern&gt; elements would be enough to fill in the rest, though I&#x27;m not certain which way would produce the least amount of code. There&#x27;s probably even a tinier code path using nested &lt;pattern&gt; elements. :)<p>Edit: Also-- either two continuous line segments with one overlap, or three with no overlap. And some &quot;v&quot; and &quot;h&quot; commands in there to be extra terse. :)

Impressive.<p>What I see is that CSS is slowly becoming more and more of a programming&#x2F;Turing complete and&#x2F;or graphics language, rather than simply just stylesheets.

If I have to guess, maybe this wasn&#x27;t accepted because if you nest your elements wrong, you could easily eat up all your CPU cycles.