Animating ticks and crosses with SVG

Firstly, I love this article on animating SVGs because it really de-mystified them for me:

I wanted to add a really simple animation effect to a quiz app I wrote for the Labour Party (see: ). 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>

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"

And that’s it! Animate your ticks and crosses to add a bit of extra emphasis where needed.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s