4 ms·

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 seg

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 8y ago
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 8y ago
  > 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.