Nu we geleerd hebben hoe we bogen kunnen tekenen, zijn we klaar om het CoderDojo-logo aan te pakken.

0 1

We werken met een kijkvenster met een breedte en hoogte van 620 dat de oorsprong van het cöordinatenstelsel in het centrum plaatst. De afbeelding zelf geven we een breedte en een hoogte van 400 pixels.

<svg width="400px" height="400px" viewBox="-310 -310 620 620">
  ...
</svg>
-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y

Eerst tekenen we een cirkel waarvan het middelpunt in de oorsprong ligt en met een straal van 300.

<svg width="400px" height="400px" viewBox="-310 -310 620 620">
  <circle cx="0" cy="0" r="300" fill="white" stroke="black" stroke-width="4" />
</svg>
-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y (0,0) 300

Nu komt het moeilijkste deel: de zwarte druppelvorm. Als je die goed analyseert, dan zie je dat die bestaat uit drie halve cirkels. We gebruiken een <path> om die drie cirkelbogen te tekenen. We zullen die eerst tekenen met een zwarte rand zonder opvulling. De eerste halve cirkel start bij het punt \((0, -300)\) en eindigt in de oorsprong. Die cirkel heeft een straal van 150.

<svg width="400px" height="400px" viewBox="-310 -310 620 620">
  <circle cx="0" cy="0" r="300" fill="white" stroke="black" stroke-width="4" />
  <path fill="none" stroke="black" stroke-width="6" d="
    M0,-300
    A150,150,0,0,1,0,0"
  />
</svg>
-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y (0,-300) (0,0) 150

We breiden het pad uit met een tweede halve cirkel met een straal van 150 die start bij de oorsprong en eindigt bij het punt \((0, 300)\).

<svg width="400px" height="400px" viewBox="-310 -310 620 620">
  <circle cx="0" cy="0" r="300" fill="white" stroke="black" stroke-width="4" />
  <path fill="none" stroke="black" stroke-width="6" d="
    M0,-300
    A150,150,0,0,1,0,0
    A150,150,0,0,0,0,300"
  />
</svg>
-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y (0,300) (0,0) 150

De druppelvorm wordt gesloten door het punt \((0, 300)\) terug te verbinden met het punt \((0, -300)\) via een halve cirkel met straal 300.

<svg width="400px" height="400px" viewBox="-310 -310 620 620">
  <circle cx="0" cy="0" r="300" fill="white" stroke="black" stroke-width="4" />
  <path fill="none" stroke="black" stroke-width="6" d="
    M0,-300
    A150,150,0,0,1,0,0
    A150,150,0,0,0,0,300
    A300,300,0,0,0,0,-300" 
  />
</svg>
-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y (0,300) (0,-300) 300

In plaats van de druppelvorm een zwarte rand te geven, kunnen we die nu een zwarte opvulling geven.

<svg width="400px" height="400px" viewBox="-310 -310 620 620">
  <circle cx="0" cy="0" r="300" fill="white" stroke="black" stroke-width="4" />
  <path fill="black" stroke="none" d="
    M0,-300
    A150,150,0,0,1,0,0
    A150,150,0,0,0,0,300
    A300,300,0,0,0,0,-300" 
  />
</svg>
-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y

Het laatste dat we nog moeten doen is de cijfers 0 en 1 op de juiste plaats zetten. Hiervoor kunnen we het text-element gebruiken om een zwart opgevuld cijfer 0 op positie \((0, -150)\) te zetten en een wit opgevuld cijfer 1 op positie \((0, 150)\). We stellen de grootte van de tekst (font-size) ook in op 240.

<svg width="400px" height="400px" viewBox="-310 -310 620 620">
  <circle cx="0" cy="0" r="300" fill="white" stroke="black" stroke-width="4" />
  <path fill="black" stroke="none" d="
    M0,-300
    A150,150,0,0,0,0,300
    A300,300,0,0,0,0,-300" 
  />
  <text x="0" y="-150" fill="black" font-size="240">0</text>
  <text x="0" y="150" fill="white" font-size="240">1</text>
</svg>
-300 -200 -100 0 100 200 300 -300 -200 -100 0 100 200 300 x y 0 1 (0,-150) (0,150)

Je zult echter merken dat bovenstaande code nog niet het gewenste resultaat geeft. We moeten immers nog enkele eigenschappen van de tekst instellen. Omdat die voor beide cijfers hetzelfde zijn, zullen we een style-element gebruiken om de CSS-eigenschappen van alle tekst in de figuur in één keer in te stellen. We stellen het lettertype (font-family) van de tekst (font-size) in op OCR A. Voor computers waarop dit lettertype niet geïnstalleerd is, vallen we achtereenvolgens terug op het lettertype consolas en daarna op het standaard monospace lettertype.

<style>
  text {
    text-anchor: middle;
    dominant-baseline: middle;
    font-family: OCR A, consolas, monospace;
  }
</style>

Normaal gezien ligt het ankerpunt waar de tekst geplaatst wordt in de linkerbovenhoek. Met text-anchor: middle; zorgen we ervoor dat de tekst horizontaal gecentreerd wordt rond het ankerpunt. Met dominant-baseline: middle; zorgen we ervoor dat de tekst verticaal gecentreerd wordt rond het ankerpunt. Dat laatste is echter niet helemaal het geval, waardoor we beide cijfers nog 22 posities lager zetten langs de \(y\)-as om ze op hun gewenste plaats te krijgen. Dit is het eindresultaat:

<svg width="400px" height="400px" viewBox="-310 -310 620 620">
  <style>
    text {
      text-anchor: middle;
      dominant-baseline: middle;
      font-family: OCR A, consolas, monospace;
    }
  </style>
  <circle cx="0" cy="0" r="300" fill="white" stroke="black" stroke-width="4" />
  <path fill="black" stroke="none" d="
    M0,-300
    A150,150,0,0,1,0,0
    A150,150,0,0,0,0,300
    A300,300,0,0,0,0,-300" 
  />
  <text x="0" y="-128" fill="black" font-size="240">0</text>
  <text x="0" y="172" fill="white" font-size="240">1</text>
</svg>
0 1