SVG dot-to-dot puzzle: shields

Shield with grid overlayIn these puzzles you create your own personal heraldic shield. You will learn to create pictures as programs using the 2D drawing language SVG, as well as the maths of translation. In this simple way to use SVG your drawings are like dot-to-dot puzzles.

  • You won’t need a printer for any of this!
  • For a slower introduction to drawing using SVG see our main Vector Dot-to-Dot Puzzles page.

The SVG language is based on the idea of drawing on a squared paper-like grid. In each instruction you tell it the coordinates of a series of dots. The program then joins the dots, linking the first one back to the last.

Note, when you tell the program to start drawing a line (0,0) is at the top left. You might be more familiar with drawing graphs where zero starts at the bottom left (or the middle if you are drawing a graph with negative numbers).

Getting Started

Open a text editing program on your computer (such as TextEdit for Macs or Notepad.exe for Windows). Paste the following text (in grey) in to the editor, save the file as shield.svg, in a place where you can find it easily (the desktop is good) – see more about text editing programs at the end. Also at the end are copies of the files and solutions.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<rect x="0" y="0" width="10" height="10" fill="cyan" />

    <polygon fill='gold' points='1,1,9,1,8,5,5,9,2,5' />
    <polygon fill='blue'  points='2,4,5,2,8,4,7,5,5,3,3,5' />
    <polygon fill='red'  points='5,5,4,6,5,7,6,6'  />

</svg>

Each of the three lines starting “<polygon…” create a shape by giving the points to connect. A polygon is just a shape made from three or more points like this.

Open your new file shield.svg in a web browser instead of the text editor. You don’t need to be connected to the Internet. On a Mac you can drag the open file’s name onto an open tab, you should see the image on the left, below, appear. It shows a pale blue background with a shield of gold which has a blue chevron on it and a red lozenge below it.

 

 

 

 

 

 

 

On the right is the same image, but shown with a grid overlay. This lets you compare the points in the program above to see what each location represents. For example the point at 5,2 (that’s 5 along from the left and two down from the top) is a blue point – the second point in the chevron which starts at point 2,4:   points=’2,4,5,2,8,4,7,5,5,3,3,5′

Here’s the shield by itself with the five points (points=’1,1,9,1,8,5,5,9,2,5‘) that create it written around it. Remember each point is represented by two numbers, first the x-axis (along the top) then the y-axis (down the side). Think “along the corridor and down the stairs”.

You could also write the instruction anticlockwise as points=’1,1,2,5,5,9,8,5,9,1′ or start at a different point.

Making a bigger picture and more shields

The first lines in our program set the size of our grid and colour it. Let’s make the blue square much larger, so that the shield takes up less space. We just need to change those first instructions.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> 
<rect x="0" y="0" width="20" height="20" fill="cyan" />

That looks like this.

Can you write a program that places the same shield design somewhere else on the pale blue square? Save it in a file with a new name and then look at it in a browser.

  • You could add a shield to the right (so the top of the new shield might go from 11,1 to 19,1. You just need to add 10 to every x point. Try it. In maths that is called a translation operation: moving an object to a new position (This is why geometry is useful!)
  • Experiment, moving the new shield around
  • How would you add a new one below instead?
  • Or how about one diagonally opposite in the bottom right? – see the Solution file below
  • What can you say  (in terms of the x- and y- axes) about the changes between the first shield (top left) and the shield in the top right corner, and the one in the bottom right corner?

Make your own shield

Now you have got the basics, try making different patterns on the shields using your own different dot-to-dot patterns.

  • Experiment with the files below.
  • Each polygon instruction has a colour. Try changing the colours.
  • Change the numbers in a polygon instruction.
  • Add more numbers in a polygon instruction
  • Add more polygon instructions by copying one that is there and then changing the points.
  • Now consciously design your own shield. Perhaps draw it on squared paper first. Then write the program.
  • Design a new, better version of your school shield.

More files to play with

SVG and drawing programs

You may have drawn pictures in a drawing program before. When you do then your drawing may have been recorded in a language like SVG. The drawing program creates the instructions as you add lines and shapes. The drawing may then have saved the program in SVG or a similar language. This way of recording drawings has the advantage that both drawing and viewer programs can transform shapes (like rotating it or making it larger or smaller) using geometry transformations just as we did using translation.

Solution file

Text Editing Programs and saving files

On a Windows computer you can find notepad.exe using either the search option in the task bar (or Windows+R and start typing notepad…). On a Mac use Spotlight Search (Command+spacebar) to search for TextEdit. Save your file as an SVG using the .svg (not .txt) as the ending and then open it in a browser (on a Mac you can grab the title of the open file and drag and drop it into a web page where it will open as the drawn image).

Back for more vector dot-to-dot puzzles

QMUL - Queen Mary University of London logo