Making an Animated SVG Checkbox
While watching MSNBC cover the results of the recent political primaries, I noticed the animated graphics used for their scrolling marquee.
As winners were projected, a little animated checkbox would appear next to the candidate’s name and photo.
It was such a subtle element compared to all the other visuals. But the way the box and check mark drew itself on the screen was captivatingly fun to watch.
Coincidentally, I recently finished coding a small, similar animation for a client site, The Art of Etiquette. Essentially, a curved line draws itself underneath a main navigation link when users move their cursor over each one.
To expand on what I learned, I thought figuring out MSNBC’s checkbox animation would be a fun challenge.
What we're going to build
This animation only uses HTML and CSS. The HTML is just a few lines of SVG code, which you can easily get from a vector graphics program, such as Adobe Illustrator. How you do that varies on the program you are using.
What is SVG?
SVG stands for scalable vector graphics. Vector images are resolution independent, which means you can make them super large or teeny tiny, and they will never pixelate.
Why? The various points and lines in the image are mathematically drawn as it’s resized. Basically, the browser does all the math for us to make sure our SVG image is tack sharp all the time.
Conversely, raster graphics (like JPG or PNG images) are an assortment of shaded pixels that are usually difficult to modify without loss of information.
Making the box
If you make a square in Adobe Illustrator and save it out as a SVG, you’ll end up with either a <path> or <polygon> element with a string of attribute data that tells the browser how to make the square.
There’s nothing wrong with this. But to make it so humans can easily read it, we're going to use a different element inherent to SVG -- the <rect> element.
In the code above, we have our <rect> element with an assortment of attributes:
- X
- Y
- Width
- Height
- Transform
The x and y values tell the browser where in the <svg> to put the <rect>. We have to accommodate for some accidental clipping if we put the box flush at 0,0 because the stroke is drawn centered within the path -- not on the inside or outside.
The height and width is specified as 100px each, and the transform helps us rotate the box so that the eventual line will be drawn starting in the upper right instead of the upper left.
All we are doing is turning the box (and only the box) on its side. You won’t notice a difference until the animation is in place.
Making the check mark
The check mark is a simple <path> element typically used for lines. I created the mark in Illustrator and exported the code and inserted it right after the <rect> element.
The CSS
The SVG shapes are pretty clean and simple, but I added special class names to make them easily identifiable for this tutorial.
The beauty of using inline SVG elements, instead of .svg files as a substitute for a .png or .jpg image, is that you can edit the styling with CSS.
SVG has some inherit defaults, which can be easily changed in your CSS. The stroke color and fill color are black by default. If your SVG shape has a stroke on it when you export, the stroke width you set will be styled inline.
Above, we are setting the stroke color to a special blue, the stroke width to 12px, and fill to none.
The stroke-dasharray and stroke-dashoffset are two properties I didn’t know much about until working on my line animation for the Art of Etiquette website.
Stroke Dasharray and Dashoffset
First, a tip of the hat to CSS Tricks, which wrote the tutorial I referenced heavily while figuring out my first line animation.
There are two CSS properties that make this line-drawing effect possible and are available only to SVG elements: stroke-dasharray and stroke-dashoffset.
SVG lines can be dashed, and stroke-dasharray lets you specify how long each dash should be. Similarly, stroke-dashoffset lets you move the dashes around from their original spot.
So how do you draw the line? Essentially, you need to create a dash as long as your path, then move it that exact amount so it has the illusion of being drawn.
For this exercise, I mainly guessed and kept the numbers round until I got the desired result.
If you wanted to be exact, you can use JavaScript like so:
var path = document.querySelector('.yourPath');
var length = path.getTotalLength();
The Animation
To mimic a self-drawing line, we use CSS animations and the keyframes rule.
@keyframes draw {
0% { stroke-dashoffset: -400; }
100% { stroke-dashoffset: 400; }
}
@keyframes check {
0% { stroke-dashoffset: -400; }
100% { stroke-dashoffset: 0; }
}
Each animation is slightly different, but only uses the stroke-dashoffset property.
In the MSNBC animation, the box draws itself and is then erased as the check mark is drawn. In our CSS for .box, we set the stroke-dashoffset to 400.
We also set the stroke-dasharray to 400, which helped us know that a full box is drawn in 400px increments, positive or negative.
The “draw” animation above starts when there is no array segment visible, then essentially draws the box twice – one rotation drawing the line, and another rotation where the 400px space between the array line segments pushes the line out.
The “check” animation is almost the same, except it ends after one 400px iteration – stopping when the line is drawn.
Next, we assign the animations to each element through CSS:
animation: draw 1s linear forwards;
The forwards portion of the animation is something new I learned. It specifies how styles should be applied to the associated element before and after the animation.
Forwards forces the element to keep the styles applied to the end of the animation once it is finished. Otherwise, the check mark would flash back to being transparent.
Conclusion
Hopefully seeing see the HTML and CSS helps illustrate how simple this animation is to make with a basic understanding of SVG and an intermediate knowledge of CSS.
Many of the styles are repeated for convenience, but you could make this much more DRY (Don’t Repeat Yourself) in production.
Your biggest challenge may be in getting SVG code if you do not have access to Adobe Illustrator. Inkscape doesn’t do a bad job, but may need to be cleaned up by hand.
Browser Support
SVG: All major modern browsers. Explorer 9+
CSS Animations: All major modern browsers. Explorer 10+
