SVG ANIMATIONS

How Does This Work

SVGs allow you to embed CSS stylesheets. Each animation is no more than a series of CSS animations moving around or transforming basic SVG elements.

<svg
  preserveAspectRatio="xMidYMid meet"
  version="1.1"
  viewBox="0 0 100 100"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg"
>
  <style>
    /* <![CDATA[ */
      .example1-rect {
        animation:
          example1-animation
          2s
          ease-in-out
          infinite
          alternate;
      }
      @keyframes example1-animation {
        from {
          transform:
            translate(50%, 20%)
            rotate(0);
        }
        to {
          transform:
            translate(50%, 80%)
            rotate(180deg);
        }
      }
    /* ]]> */
  </style>
  <rect
    class="example1-rect"
    x="-7.5"
    y="-7.5"
    height="15"
    width="15"
  />
</svg>

In many cases animations are stacked on top of each other using groups of elements to create more complex motions.

<svg
  preserveAspectRatio="xMidYMid meet"
  version="1.1"
  viewBox="-50 -50 100 100"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg"
>
  <style>
    /* <![CDATA[ */
      .example2-group {
        animation:
          example2-animation
          10s
          linear
          infinite
          reverse;
      }
      .example2-rect {
        animation:
          example2-animation
          2.5s
          linear
          infinite;
      }
      @keyframes example2-animation {
        from {
          transform: rotate(360deg) translate(20%, 0);
        }
        to {
          transform: rotate(0deg) translate(20%, 0);
        }
      }
    /* ]]> */
  </style>
  <g class="example2-group">
    <rect
      class="example2-rect"
      x="-7.5"
      y="-7.5"
      height="15"
      width="15"
    />
  </g>
</svg>

I also made liberal use animating dash-offsets on paths (see Jake Archibald's fantastic explanation on how this works).

<svg
  preserveAspectRatio="xMidYMid meet"
  version="1.1"
  viewBox="-50 -50 100 100"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg"
>
  <style>
    /* <![CDATA[ */
      .example3-rect {
        stroke: black;
        stroke-width: 1%;
        stroke-dasharray: 10, 6;
        fill: none;
        animation:
          example3-animation
          2.5s
          linear
          infinite;
      }
      .example3-rect:nth-of-type(odd) {
        animation-direction: reverse;
      }
      @keyframes example3-animation {
        from {
          stroke-dashoffset: 0;
        }
        to {
          stroke-dashoffset: 16%;
        }
      }
    /* ]]> */
  </style>
  <rect
    class="example3-rect"
    x="-8"
    y="-8"
    height="16"
    width="16"
  />
  <rect
    class="example3-rect"
    x="-16"
    y="-16"
    height="32"
    width="32"
  />
  <rect
    class="example3-rect"
    x="-24"
    y="-24"
    height="48"
    width="48"
  />
</svg>

What Libraries Did You Use

gl-matrix — For vector/matrix manipulation.
postcss — For processing/modifying inline stylesheets.
perfectionist — For cleaning up the inline stylesheets.
css-property-parser/css-selector-parser — To namespace selectors and do a few other manipulations.
A bunch of other utilities like lodash, eases, case, and seedrandom.
11ty — To generate this static site.

For rendering SVGs I wrote my own tiny (read: horrible) renderer as I wanted a chance to play around with proxy objects.

Credits

While the majority of the designs underlying the animations are of my own creation, I did find a number of inspirations on places like pinterest and google image search. Any animations that are based on the work of others has attribution included inline, but I also wanted to call them all out in one place:

10 - D: Based on SE16-690 by Pierre Voisin at DAILYMINIMAL.
20 - A: Based on JA15-078 by Pierre Voisin at DAILYMINIMAL.
20 - C: Based on No. 148 by Pierre Voisin at DAILYMINIMAL.
22 - A: Based on JA15-090 by Pierre Voisin at DAILYMINIMAL.
24 - A, B, C, D: Based on AP15-183 by Pierre Voisin at DAILYMINIMAL.
25 - A, B, C, D: Inspired by this pin (original artist unknown).
26 - A, B, C, D, E: Based on JA15-080 by Pierre Voisin at DAILYMINIMAL.
28 - A, B, C, D: Based on SE.BS 24-30 by Pierre Voisin at DAILYMINIMAL.
46 - A, B, C: Based on sketch-001.js by Amie Chen.

Notes

† — (ಥ﹏ಥ) There are two reasons why there are some rasterized images in the repo:
1. Few browsers support SVG favicons, as of late 2019 anyway.
2. Since most websites that parse Open Graph metadata don't support SVGs as og:image values, I wrote a small puppeteer script to render each SVG animation as a jpg. These images will only be served to bots and other sites.
‡ — JavaScript was used to generate this site and each animation, but no javascript is actually running when you load the page in your browser (except for google analytics).

SVG + CSS =

⦗21 - 3 VARIATIONS⦘

⦗22 - 2 VARIATIONS⦘

⦗23 - 4 VARIATIONS⦘

⦗24 - 4 VARIATIONS⦘

⦗25 - 4 VARIATIONS⦘

⦗26 - 5 VARIATIONS⦘

⦗27 - 6 VARIATIONS⦘

⦗28 - 4 VARIATIONS⦘

⦗29 - 3 VARIATIONS⦘

⦗30 - 9 VARIATIONS⦘

How Does This Work

What Libraries Did You Use

Credits

Notes