Now that we’ve learned how to draw arcs, we’re ready to tackle the CoderDojo logo.

0 1

We are using a viewport with a width and height of 620 pixels, with the origin of the coordinate system positioned at the center. We set the width and height of the image itself to 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

First, we draw a circle with its center at the origin and a radius of 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

Now comes the hardest part: the black teardrop shape. If you analyze it carefully, you’ll see that it consists of three semicircles. We’ll use a <path> to draw those three arcs. We’ll start by drawing them with a black outline and no fill. The first semicircle starts at the point \((0, -300)\) and ends at the origin. That circle has a radius of 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 extend the path with a second semicircle of radius 150 that starts at the origin and ends at the point \((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

The teardrop shape is closed by connecting the point \((0, 300)\) back to the point \((0, -300)\) via a semicircle with a radius of 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

Instead of adding a black border to the teardrop shape, we can now fill it with black.

<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

The last thing we need to do is place the digits 0 and 1 in the correct positions. To do this, we can use the text element to place a black-filled digit 0 at position \((0, -150)\) and a white-filled digit 1 at position \((0, 150)\). We also set the text size (font-size) to 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)

However, you will notice that the code above does not yet produce the desired result. After all, we still need to set a few properties for the text. Since these are the same for both numbers, we will use a style element to set the CSS properties for all text in the figure at once. We set the font family (font-family) and font size (font-size) of the text to OCR A. For computers on which this font is not installed, we fall back to the consolas font and then to the standard monospace font.

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

Normally, the anchor point where the text is positioned is in the top-left corner. With text-anchor: middle;, we ensure that the text is horizontally centered around the anchor point. With dominant-baseline: middle;, we ensure that the text is vertically centered around the anchor point. However, the latter is not entirely the case, so we move both numbers down another 22 positions along the \(y\)-axis to get them in their desired positions. This is the final result:

<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