Animating SVG using CSS

I wanted to animate a vector graphic (SVG) image by making some elements appearing gradually one after the other.

My first first step was to clean up the markup and give meaningful CSS classes to my SVG elements. For example:

<style type="text/css">
  .arrow .line{fill:none;stroke:#8B999E;stroke-width:3;stroke-miterlimit:10;}
  .arrow .head{fill:#8B999E;}
</style>
<g class="arrow">
  <path class="line" d="M160,41.4c9.2-4.9,21-7.2,29.8-8.2"/>
  <polygon class="head" points="187.2,37.9 203.1,32.3 186.5,29.2"/>
  <path class="line" d="M95,90.2c10-18.5,22.7-26.7,22.7-26.7"/>
</g>

My second step was to use CSS animations to gradually make elements appear (go from opacity 0 to 100). To do that, I defined the animation @keyframes. Then I referenced the animation in the CSS class. To make multiple animations in sequence, I simply used the animation-delay attribute, with a computed value using calc() and a CSS variable for the time delay:

    @keyframes appear {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 100;
      }
    }

  .arrow{
    animation-name: appear;
    animation-duration: 60s;
    animation-fill-mode: backwards;
    --spacing: 0.6s;
  }
  .arrow:nth-of-type(2) {
    animation-delay: calc( 1*var(--spacing) );
  }
  .arrow:nth-of-type(3) {
    animation-delay: calc( 2*var(--spacing) );
  }
  .arrow:nth-of-type(4) {
    animation-delay: calc( 3*var(--spacing) );
  }
  .arrow:nth-of-type(5) {
    animation-delay: calc( 4*var(--spacing) );
  }

Here is a recording of the final result. Find the full SVG markup on GitHub.

The final animation, rendered as a gif

Color palette showcase

I really like how Duminda Perera showcased color palettes in “Minimalist Color Palettes 2015“.

I decided to use this technique with the color theme of my wedding.

It is entirely built using HTML, CSS and SVG.  Click the image below to render it in full screen, and see the code in codepen (or gist). The background is a merge of gradient, blur and subtle noise using advanced SVG filters, which is rather CPU-intensive.

Screen Shot 2016-01-25 at 00.04.49

Download it as a wallpaper here