We want to display a dot at the center of the screen, like this:

Below is the complete code to draw a dot like this, but don’t type it in your editor yet! We are going to recreate it together, step by step.

We are going to use a technology called

. It’s all about drawing shapes on the screen. Let’s install an Elm Package to help us work with SVG. Go to

and type

in the search box. After a short while a list of suggested packages should show up. Install the one called simply

.

Now that we have

installed, we can write the code that will draw a dot for us. Change the code to look like this:

Click

, you should see something like this:

At this point we have a dot on the screen - it’s at the top left corner of the viewport (the area of the browser window where the content is displayed). We can see only a quarter of it - the rest is outside of the viewport.

It’s a good start, but the dot is not in the center of the screen yet. Let’s try to understand why it is where it is.

First we have to realize that the dot is inside an

element that itself has a position, width and height. We can make the background of the

element pink to see where it is:

Click

and it should reveal something like this:

Since the dot is inside the

element, and the

element doesn’t cover the center of the screen, it’s impossible to place the dot at the center. Before anything else, let’s make the

fill entire

.

To do this we will use a package called

. It makes laying out elements relatively easy. Go to

and install elm-ui.

Now let’s use the package. Change the code to look like this:

Click

to format your code and then click

. The SVG space now fills the entire viewport. Even the small white margin is gone!

It should now be possible to place our dot in the center of the screen. Currently the dot is in the top left corner of the viewport, but at least the parent

element is covering it, so the center of the viewport is somewhere within the

element.

We will now explore how child elements (like our

) are positioned inside the parent

element.

One method is to use the

. To get some intuition about it, imagine that you are a villain in an old James Bond movie. For some sinister purpose you need to tell somebody exactly where a flower pot is located on a large table. The problem is that you can only communicate through an old fashioned phone

. To fool mr. Bond you need to be very precise, so saying something like “it’s roughly in the middle” won’t work.

However, if you had a ruler, you could say: “it’s 63.3cm from the top edge and 27.1cm from the left edge”. To do that you would need to previously agree which edge is left and which is top - not so obvious in case of a table. Fortunately in SVG we have this sort of agreement made for us. We always measure from the top and left edge of the viewport.

The distance from the left edge is called

and the distance from the top is called

. The bigger the

the more to the right goes the element. The bigger the

the more it goes down. Try it out:

Adjust the sliders below to change the

and

coordinates of the dot. It’s like moving the flower pot on the table by describing how far left, right, up or down it should be.

Initially the center of the dot is at a point called

:

. The origin is in the top left corner of the viewport. That’s why only a quarter of the dot is visible. If we want to help our dot get out of hiding, we’ll have to place the center of the dot at a point with positive

and

values.

To change the position of the dot, we can use the

and

attributes of the

element, like this:

Now the dot is not in the corner anymore, but it’s not in the center yet. If we want our dot to be exactly in the center of the screen, we’ll have to set

and

to values equal to exactly half of the

and

of the SVG viewport. We could calculate the position of the circle as:

There is a problem though! We don’t actually know the width and height of the SVG viewport. All we know is that it will fill all the available space, but this can be different on different devices:

Fortunately, we don’t need to know the width and height of the

element! That’s why it’s called

. We can work with it without knowing the actual scale on the screen.

You can imagine an SVG element as an infinite surface on which elements are placed. Which elements you see, depends on where you look. And where you look is called the

. It has four properties:

,

,

and

.

It works a little bit like a photo camera pointing directly at the surface. You can move it up, down (along the

axis) and left and right (along the

axis). You can also change its focal length to cover more or less area. Unlike a lens of the camera you set the width and height separately. If you set it so that the dot is in the middle of your frame, then no matter how big the print of the picture will be, the dot will always be in the center. Increasing the

and

of the viewbox will make more of the surrounding surface visible and the dot will become smaller, but its position won’t change. Let’s see it in action:

On the left and the right side we show the same set of elements: a dot at the origin and two axes (

going from left to right and

going top - down). The pink rectangle represents the viewbox. Normally it is not visible, but we display it here to help you understand how it works.

On the right there is a window with a viewport inside. Everything covered by the viewbox will be displayed in the viewport. Their sizes are independent, so the shapes will be scaled to fit. You can also set the option to preserve the aspect ratio to prevent the shapes from being stretched.

You cannot control the size of the window or the viewport. All you can do is play with the viewbox. Try calibrating the

,

,

and

properties of the viewbox so that the dot is in the center of the viewport.

The formula is simple:

So instead of moving the dot in the SVG plane, we change where we look by moving the viewbox. By setting it that way, we know that the distance from the left and right edge of the screen to the center of the dot will be the same. We don’t know exactly what it will be (because we don’t control the size of the viewport), but it will always be equal. That’s the definition of being in the center!

In the code we set the viewbox as an attribute of the

element, like this:

There are only two changes here. First we reset the

and

attributes of the

back to

(on lines 11 and 12). We want the dot to be back at origin. Then we set up the position of the viewbox on line 20. Try experimenting with different values. If you set them right and refresh the browser the dot should be in the center of the screen.

You can also remove line 19 to remove the pink background, or set it to some other color.

Speaking of colors, now that we’ve centered our dot, it’s time to give it a color! We do it by adding a

attribute to the

element, like this:

The only change is on line 13. Reload the browser and see this:

That’s exactly what we were trying to achieve. Scroll up to the problem section to compare.