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!