Chinese Window Lattice and CSS | Hacker News Reader

Chinese Window Lattice and CSS

yuanchuan.dev

122 pointsspirit2317 comments

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 - Comparing SVG with CSS shape emulation using gradients: -- https://codepen.io/myf/pen/Bzmmry?editors=0100 - SMIL animated SVG background: -- https://codepen.io/myf/pen/ZNbrLq?editors=0100

(Here is realization of that "plain SVG in SVG in CSS" approach:

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

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

https://yuanchuan.dev/assets/images/post/lattice/going-deep....

If you like this, you may like Lea Verou's CSS3 Patterns Gallery library. https://leaverou.github.io/css3patterns/

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

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

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

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

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

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.

It already lets you encode a CA but you have to have something to drive transitions like a mouse click, apparently. This one makes me wonder if you could encode a Wang tile or another unidirectional CA into reflections+conditionals and get a true TM in CSS...

> you have to have something to drive transitions like a mouse click, apparently

Could you just position the mouse somewhere, never move it again, and let CSS flicker drive everything? It gives you a natural clock.

What's 'CSS flicker'?

CSS can move or change the size of an element. You can also write CSS rules that fire when a mouse hovers over an element.

You could write a page so that an element grows until it hits the mouse cursor, shrinks until it's not under the cursor again, then starts growing again... The element boundary will jitter under the cursor, with a frequency determined by animation speed.

Worked example: https://dev.to/linxea/css-flicker-on-hover-5gj5

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.

They also allow more nefarious aspects such as advertising, and the power of the content creator to demand how the viewer sees their content. With older protocols such as IRC, Usenet, email it is the viewer who's in control.

If we're talking artwork, I do get it. But most websites are not work of art. They're business, mainly.

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.

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.

Reply on news.ycombinator.com