A small emoty wooden frame on a bright red wall

The viewBox attribute is one of the first encountered by those new to SVG, and potentially one of the most confusing. While it has been covered by others in the past - Sara Soueidan’s long-form series might be considered one of the canonical resources - designers and developers have been missing a “quick start” guide that provides just the details necessary to get up and running in the most common vector drawing applications. That’s the goal of this article.

In the last article I demonstrated literally straightforward animation, moving a square from one side of the canvas drawing element to the other. In this piece, I’ll show continuous motion of a circle in many different directions, a useful lesson in how to develop a complete JavaScript canvas animation: