Number Line

Number Lines are required in many subtopics. Depending on a task, they can be shaped like scales, rulers, lines with numbers (the definition that gave the name to this graph. By concept, it's just a line with randomizeable numbers. 

This article though is not about the SVG design, it is about the general principles of randomizing your Number Line SVG. And the Number Line SVG can be built using the axis positioning and the feature of simple <div></div> boxes (see HTML div).

There are the two things you might need before reading the explanation below:

• Number Line code frame
• Russian version of Number Line instruction

1. The coordinate system looks like that

The 8 lines below draw 8 lines. The first draws a horizontal line - the coordinate axis itself. 

The first two digits indicate the coordinate of the start of the line. 

The second two digits indicate the coordinate of the end of the line. 

2. If you want to change the line width, you can do so by changing the value in stroke-width="3" 

3. In order to draw a point, I draw circles. They can be filled with colour (if the point is included), and unfilled if the point is not included. 

Circles can be drawn like this: 

<circle r="6" cx="80" cy="60" />
<circle r="6" cx="320" cy="60" stroke="#000000" stroke-width="2" fill="white"/> 

r - radius
сx - x-coordinate of the circle centre
сy - coordinate at the centre of the circle
stroke="#000000" - the circle outline will be black (you can write normal colours here, google: stroke in SVG) stroke-width="2" - 2 pixels wide
fill="white" - and the inside of the circle will be shaded white 

4. Further down in the template you can see these repeating blocks. As I understand it, they are used to sign the values of the digits. In the block below I sign the digit with the value aM. You need to insert as many of these blocks as you want to sign the digits.

<rect x="40" y="41" width="23" height="20" fill="none" stroke="none" pointer-events="all" />  
  <g transform="translate(-0.5 -0.5)"> 
    <switch> 
      <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
        <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 3px; height: 1px; padding-top: 70px; margin-left: 40px;">
padding-top: 70px - is the distance from the origin on the Y axis. That is, how much space should be at the top.
margin-left: 40px - is the distance from the left-hand edge to the lettering.
You can experiment with these values and see where the lettering moves. 
           <div style="box-sizing: border-box; font-size: 0; text-align: center; ">

Here come the simple characteristics of the writing style: font size (font-size: 30px), which font (font-family: Comic Sans MS), etc: 

            <div style="display: inline-block; font-size: 30px; font-family: Comic Sans MS; color: #000000; line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; word-wrap: normal; ">###aM###</div>   
          </div>
       </div>
    </foreignObject><text x="582" y="60" fill="#000000" font-family="Comic Sans MS" font-size="30px" text anchor="middle" font-weight="bold">###aM###</text>
I have highlighted where the value of the variable to be printed should be inserted. You can write anything you like in its place.
  </switch> 
 </g>
<g transform="translate(-0.5 -0.5)">