# Summer dot-to-dot

Explore vector graphics with these vector dot-to-dot puzzles. Draw them by hand (and create your own) and then turn them into the SVG graphics language and see them in a web browser.

## The Puzzles

Summer Puzzle 1: Summer Food (Designed by Elisa)

Plot and join the dots joining the last to the first of each shape, then colour in the shapes in the order given.

```DOT-TO-DOT (16x26) lightblue
white (5,3) (10,3) (12,5) (12,10) (3,10) (3,5)
orange (2,10) (13,10) (13,12) (2,12)
orange (3,12) (12,12) (8,25) (7,25)
red (7,1) (8,1) (9,2) (9,3) (8,4) (7,4) (6,3) (6,2)```

SVG Version:

```<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 26">
<rect fill="lightblue" x="0" y="0" width="16" height="26" />

<polygon fill='white' points='5,3 10,3 12,5 12,10 3,10 3,5 ' />
<polygon fill='orange' points='2,10 13,10 13,12 2,12 ' />
<polygon fill='orange' points='3,12 12,12 8,25 7,25 ' />
<polygon fill='red' points='7,1 8,1 9,2 9,3 8,4 7,4 6,3 6,2 ' />
</svg>```

Now make your own summer dot-to-dot college puzzle either on paper or by editing the above powerpoint. Edit the SVG to create your own SVG summer pictures.

Summer Puzzle 2: Summer Fun (Designed by Elisa)

Plot and join the dots joining the last to the first of each shape, then colour in the shapes in the order given.

```DOT-TO-DOT(28x26) skyblue
blue (3,12) (3,11) (4,8) (6,7) (10,7) (12,8) (13,11)
(13,12) (12,12) (12,11) (10,8) (6,8) (4,11) (4,12)
yellow (13,13) (11,23) (5,23) (3,13) (2,13) (2,12)
(14,12) (14,13)
red (17,17) (19,15) (20,16) (24,12) (24,11) (25,10) (27,12)
(26,13) (25,13) (21,17) (22,18) (20,20)
sandybrown (0,25) (5,23) (10,23) (13,21) (14,18) (15,17) (18,17)
(19,18) (19,19) (21,21) (22,21) (24,23) (26,23) (28,25)```

SVG Version:

```<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 26">
<rect x="0" y="0" width="28" height="26" fill="deepskyblue" />

<polygon fill='blue'
points='3,12 3,11 4,8 6,7 10,7 12,8 13,11 13,12
12,12 12,11 10,8 6,8 4,11 4,12 ' />
<polygon fill='yellow'
points='13,13 11,23 5,23 3,13 2,13 2,12 14,12 14,13 ' />
<polygon fill='red'
points='17,17 19,15 20,16 24,12 24,11 25,10 27,12
26,13 25,13 21,17 22,18 20,20 '/>
<polygon fill='sandybrown'
points='0,26 5,23 10,23 13,21 14,18 15,17 18,17 19,18
19,19 21,21 22,21 24,23 26,23 28,26 '/>
</svg>```

• Puzzle Sheet:  Summer Puzzle 2 (colour-your-own version)  [PDF] TO PRINT
• Puzzle Sheet: Summer Puzzle 2 (ready-coloured)   [PDF] TO PRINT
• Powerpoint Puzzle: Summer Puzzle 2 (in powerpoint) [PPTX]  DO ON COMPUTER
• Powerpoint Puzzle: Summer Puzzle 2 (collage version) [PPTX]
• Solution Sheet: Summer Puzzle 2 (Solution) [PDF]
• Powerpoint Solution:  Summer Puzzle 2 (solution) [PPTX]
• ZIPPED SVG File: summer2.svg [SVG ZIP]

Now make your own summer dot-to-dot college puzzle either on paper or by editing the above powerpoint. Edit the SVG to create your own SVG summer pictures.

Opening and viewing SVG Files

You can open an SVG file in a text editor (eg Notepad or TextEdit) to see the code, or in a browser (eg Chrome or Safari, …) to see the picture. The file above must be unzipped first.

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 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).