36.5. Assignments DE.SVG.1

Submission
You must submit assignments using git
Create Repo
  • 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 the line node_modules/must be in your .gitignore file.
Submit
By email to with:
  • The word 'submission <subjectname>' in the subject line
  • The url(s) of your repo(s) in the body

36.5.1. 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.[21]

36.5.2. 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.[22]

36.5.3. 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.[23]

36.5.4. Assignment DE.SVG.14

Take the code from Section 36.4.3 and adapt it so that the disk moves horizontally and vertically simultaneously.

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