Assignments DE.SVG.1

Handing In Assignments

You must hand in by using git

Hand In by git

  • Create an empty repo on bitbucket.org, gitlab.com, or github.com,
  • git push your local repo to the above remote repo.
  • For node assignments please put the line(s)

    node_modules/

    into your .gitignore file.

Send a mail to with:

  • The word 'handin <subjectname>' in the subject line of your mail
  • The url of your repo(s).

Assignment DE.SVG.11

You must, in JavaScript, create an SVG of the flag of Greenland. Use functions in such a way that the size may be adapted to differently sized viewports. If the viewport does not fit the proportions, adapt the flag so that it scales properly within the viewport. Display it on an HTML5 page. The necessary info on dimensions:

The entire flag measures 18 by 12 parts; each stripe measures 6 parts; the disk is 8 parts in diametre, horizontally offset by 7 parts from the hoist to the centre of the circle, and vertically centered.[12]

Assignment DE.SVG.12

You must, in JavaScript, create an SVG of the flag of Denmark. Use functions in such a way that the size may be adapted to differently sized viewports. If the viewport does not fit the proportions, adapt the flag so that it scales properly within the viewport. Display it on an HTML5 page. The necessary info on dimensions:

A red field charged with a white Nordic cross that extends to the edges; the vertical part of the cross is shifted to the hoist side. Dimensions: 3:1:3 width / 3:1:4.5 to 3:1:5.25 length.[13]

Assignment DE.SVG.13

You must, in JavaScript, create an SVG of the flag of the USA. Use functions in such a way that the size may be adapted to differently sized viewports. If the viewport does not fit the proportions, adapt the flag so that it scales properly within the viewport. Display it on an HTML5 page. The necessary info on dimensions:

Dimensions 10:19. Thirteen horizontal stripes alternating red and white; in the canton, 50 white stars of alternating numbers of six and five per horizontal row on a blue field.[14]

Assignment DE.SVG.14

Take the code from the section called “Animated Position” and adapt it so that the disk moves horizontally and vertically simultaneously.

Assignment DE.SVG.15

Take the code from your solution to the previous assignment and adapt it so that the you have several disks moving simultaneously with a minimum of code. DRY is the principle.