Animating ticks and crosses with SVG

Friday, April 1, 2016

Firstly, I love this article on animating SVGs because it really de-mystified them for me: https://css-tricks.com/svg-line-animation-works/

I wanted to add a really simple animation effect to a quiz app I wrote for the Labour Party (see: http://www.labour.org.uk/content/aprilfools ). A little bit of animation goes a long way in making something more visually interesting and therefore engaging, so I wanted  a big red cross to draw itself  when a user gets an answer wrong.

Firstly, the CSS that creates the animation:

.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Now here is the markup for a 100px by 100px red cross:

<svg width="100px" height="100px">
     <path class="path" d="M95 95 L 5 5" stroke="#e4003b" stroke-width="15" fill="none"></path>
     <path class="path" d="M5 95 L 95 5" stroke="#e4003b" stroke-width="15" fill="none"></path>
</svg>

And for a green tick of similar dimensions:

<svg width="100px" height="100px">
    <path class="path" d="M5 70 L 30 90 L 90 5" stroke="#32cd32" stroke-width="15"
          fill="none"></path>
</svg>

This was my first foray into SVG animations; I think they’re pretty neat!