Ana Tudor's "Morph SVG grid" - SMIL variation

ana-tudor-s-morph-svg-grid-smil-variation.markdown

Ana Tudor's "Morph SVG grid" - SMIL variation

Based on Ana's pen [1], rewritten into "more pure SVG" to get wider browser support: should work in most non-IE browsers [2].

[1] https://codepen.io/thebabydino/pen/yQewOm [2] https://caniuse.com/#feat=svg-smil Original description:

Codevember #8/ 2018. Chrome only, as it sets the path data d from the CSS. If you like my work in general and this demo in particular and you wish me to be able to continue putting out stuff, please consider one of the following:

• being a cool cat 😺 and becoming a patron on Patreon

• getting me something off my Amazon WishList

🎁 🇺🇸 / 🎁 🇬🇧

• or at least sharing this to show the rest of the world what can be done with CSS these days

A Pen by myf on CodePen.

License.

style.css

html {
  background-size: 111px;
	background-repeat: round repeat;
  background-image: url('data:image/svg+xml,<?xml version="1.0"?> \
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" \
[ <!ENTITY FG "dimgrey"> \
  <!ENTITY BG "black"> \
  <!ENTITY FROM "M-2,-2q+1,+1+2,0+1,-1+2,0-1,1+0,2+1,1+0,2-1,-1-2,0-1,+1-2,0+1,-1+0,-2-1,-1+0,-2"> \
  <!ENTITY MORF "M-2,-2q+1,-1+2,0+1,+1+2,0+1,1+0,2-1,1+0,2-1,+1-2,0-1,-1-2,0-1,-1+0,-2+1,-1+0,-2"> \
  <!ENTITY D "2.8284271247461903"> \
  <!ENTITY DD "5.656854249492381"> \
]> \
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-&D;,-&D; &DD; &DD;" width="100" height="100"> \
  <path d="M-3,-3h6v6h-6z"> \
    <animate \
      attributeName="fill" \
      values="&FG;;&BG;;&BG;;&FG;" \
      dur="4s" \
      calcMode="discrete" \
      repeatCount="indefinite" \
    /> \
  </path> \
  <g> \
    <path id="SHAPE"> \
      <animate \
        attributeName="fill" \
        values="&BG;;&FG;;&FG;;&BG;" \
        dur="4s" \
        calcMode="discrete" \
        repeatCount="indefinite" \
      /> \
      <animate \
        attributeName="d" \
        values="&FROM;;&MORF;;&FROM;" \
        dur="4s" \
        repeatCount="indefinite" \
      /> \
      <animateTransform \
        attributeName="transform" \
        type="rotate" \
        to="90" \
        dur="2s" \
        repeatCount="indefinite" \
      /> \
    </path> \
    <use href="%23SHAPE" x="&DD;" /> \
    <use href="%23SHAPE" y="&DD;" /> \
    <use href="%23SHAPE" x="&DD;" y="&DD;" /> \
    <animateTransform \
      attributeName="transform" \
      type="translate" \
      dur="4s" \
      values="0,0;-&D;,-&D;;-&D;,-&D;;0,0" \
      calcMode="discrete" \
      repeatCount="indefinite" \
    /> \
  </g> \
</svg>');
}
@media screen and (min-width: 333px) {
  html {
    background-size: calc(111px + (222 - 111) * ((100vw - 222px) / (1234 - 333)));
  }
}
@media screen and (min-width: 1234px) {
  html {
		background-size: 20vw;
  }
}