It's All Points On A Plane, Really

I have set out on a personal mission to improve my deepen my knowledge of animations and mathematics. While I am definitely not entirely green when it comes to animating things, going back to the fundamentals, as I see them, is not a bad idea. Using HTML, CSS and JavaScript, we have access to quite a number of ways to “draw” if you apply some creativity. For me, the two that instantely come to mind are scalable vector graphics ⤴ (SVG) and canvas ⤴.

While — or should I say because — <canvas> allows for more freedom it is naturally a bit more complex to get into. Though, it is commonly the first one a new developer encounters. <svg> has a very declarative way of “painting” when compared to <canvas> which is much more imperative; <svg> also uses vectors while <canvas> is rasterized.

Putting Canvas aside for now, with an ambition of being able to breath life into two-dimensional graphics, the first milestone is to gain a deep understanding of SVG’s.

Vector Graphics

To draw using vectors, it is naturally necessary to know what vectors, also known as points, are. When drawing something like a line, be it in a drawing app or on actual paper, we never really think in vectors, but something along the lines of “from the middle to the upper-right corner” and leave the rest to our body. A computer would not be able to understand exactly what that means, so we need to be more precise.

Vectors enables that level of precision.

A vector or, again, a point, refers to a spot on our digital paper and is commonly specified using x,y, i.e. 0,0. Exactly where that is really depends on the circumstances. Defining a horizontal like, for example, would require two points: 0,0 and 1,0.

The View Box

In real life we have many different sizes of paper, ranging from things like A3, A4, A5, Letter, B5… and so on. On the contrary, in the context of <svg>, our paper’s size cannot be specified. But it is huge.

We can’t define our paper, or canvas, however, we can control the portion of the paper’s viewport, the part that is visible, using the viewBox attribute. viewBox is defined by a space-separated list of numbers and has the following syntax:

<min-x> <min-y> <width> <height>

It also has slightly different behavior depending on which other attributes are specified, most importantly width and height of the <svg> element.

A few examples will make it clearer; have a look at a box where the upperleft corner is placed at 0,0 and has sides that are 100. Actually, I made four different boxes to get the different colors, but for the sake of simplicity it is easier to imagine one box.

From the above we can tell that if we want to scale <svg> properly, as in the third example, when we are setting dimensions, we should be specifying viewBox.

Creating a Graph

Happy coding!