3 ms·
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
by myfonj 7y ago
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 7y ago(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).)