SVG Primitives. Customizing for Basic Maths

How to assemble SVG Primitives to make new drawings for explicit learning concepts. Use the library to directly assemble anything in IGP:Writer. Modified: 20 December 2015

This page is still under development

It is made available so those interested can see the SVG Primitive action plan in progress.

We now bring the SVG Primitives all together to show how they can be used in the real world.°

Do you want or need to learn how to make great handcrafted SVG?

Visit our new Interactive SVG Tutorial Site here ►.

Circle Measurements

In this example we are using the basic circle SVG Primitive and three dimension lines with markers.

This three line/paths for each of diameter, radius and circumference. The paths can be hidden or removed as required, or even animated.

The circumference starts at 0 degrees and rotates anticlockwise.

The diameter is drawn from left to right.

The radius is drawn from the center to the circumference.

There are two markers: arrow-left which is attached to the beginning of a line/path and arrow-right which is attached to the end of a line/path.

View the SVG

Sectors of a Circle

Circle Parts

This contains semi-circle, quarter-circle and 45 and 60 degree sectors. All items are drawn from the center in an anti-clockwise direction. The positions in this illustration are caused by a size and position transform being applied to each item.

View the SVG

Equilateral Triangle

View the SVG

<svg height="400" width="400" viewBox="0 0 400 400">
<marker id="arrow-right"
      viewBox="0 0 15 10" refX="1" refY="5"
      markerUnits="strokeWidth"
      markerWidth="15" markerHeight="10"
      orient="auto">
      <polyline id="markerPoly1" points="0,0 15,5 0,10 1,5" fill="orange" />
</marker>
<marker id="arrow-left"
      viewBox="0 0 15 10" refX="0" refY="5"
      markerUnits="strokeWidth"
      markerWidth="15" markerHeight="10"
      orient="auto">
      <polyline id="markerPoly2" points="0,5 15,10 15,5 15,10" fill="orange" />
</marker>
<!-- THE CIRCLE -->
<circle cx="200" cy="200" r="150"
       fill="transparent" stroke="black" stroke-width="2"  />
<!-- RADIUS -->
<g id="p1">
 <g id="p1">
<line x1="200" y1="200" x2="200" y2="65"
    marker-end="url(#arrow-right)"
    stroke="orange" stroke-width="2"/>
</g>
<!-- DIAMETER -->
 <g id="p1">
<line x1="50" y1="199" x2="330" y2="199"
    marker-end="url(#arrow-right)"
    fill="transparent" stroke="orange" stroke-width="2"
    marker-start="url(#arrow-left)" />
</g>
<!--  CIRCUMFERENCE -->
 <g id="p1">
<path d="M 360 180
    A 160 160, 0, 1, 0, 360 220"
    fill="transparent" stroke="orange" stroke-width="2"
    marker-end="url(#arrow-right)" stroke="blue" stroke-width="2"
    marker-start="url(#arrow-left)" stroke="blue" stroke-width="2" />
</g>
<!-- CENTER -->
 <circle cx="199" cy="199" r="2" fill="red"/>
</svg>

<svg height="400" width="400" viewBox="0 0 400 400">
<!-- SEMICIRCLE -->
<g id="p1">
<path d="M200 200 L350 200  
  A 150 150, 0, 0, 0, 50 200
  L200 200
 " fill="green" stroke="black" stroke-width="2" />
</g>
<!-- 90DEG QUARTER CIRCLE -->
 <g id="p1">
<path d="M200 200 L350 200  
  A 150 150, 0, 0, 0, 200 50
  L200 200
 " fill="magenta" stroke="black" stroke-width="2"  transform="rotate(178, 200, 200)"/>
</g>
<!-- 45DEG SECTOR -->
 <g id="p1">
<path d="M200 200 L350 200  
  A 150 150, 0, 0, 0, 306 93.93
  L200 200
 " fill="blue" stroke="black" stroke-width="2"  transform="rotate(-45, 200, 200)"/>
</g>
<!-- 60DEG SECTOR -->
 <g id="p1">
<path d="M200 200 L350 200  
  A 150 150, 0, 0, 0, 275 70
  L200 200
 " fill="red" stroke="black" stroke-width="2"  transform="rotate(85, 200, 200)"/>
</g>
<!-- POINTS -->
 <circle cx="199" cy="199" r="2" fill="red"/>
</svg>

<svg height="400" width="400" viewBox="0 0 400 400">
<g id="p1">
<animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 200 222"
                          to="360 200 222"
                          dur="10s"
                          repeatCount="indefinite"/>
 
  <polygon points="200,65 340,330 60,330"
  style="fill:none;stroke:black;stroke-width:2; stroke-style:dotted;">
  </polygon>
 
  <text text-anchor="middle" x="200" y="105"
         font-family="Arial" font-weight="bold" font-size="24" fill="blue" >A </text>
    
 <text text-anchor="middle" x="200" y="355"
         font-family="Arial" font-weight="bold" font-size="24" fill="blue" >a</text>
    
  <text text-anchor="middle" x="300" y="315"
         font-family="Arial" font-weight="bold" font-size="24" fill="blue" >B</text>
 <text text-anchor="middle" x="110" y="205"
         font-family="Arial" font-weight="bold" font-size="24" fill="blue" >b</text>
    
  <text text-anchor="middle" x="100" y="315"
         font-family="Arial" font-weight="bold" font-size="24" fill="blue" >C</text>
 <text x="290" y="205"
         font-family="Arial" font-weight="bold" font-size="24" fill="blue" >c</text>    
</g>
 <path d="M200 65 l 140 266 l -280 0 z" stroke="red" fill="none">
   <-animateTransform attributeName="transform"
                          attributeType="XML"
                          type="rotate"
                          from="0 200 200"
                          to="-360 200 200"
                          dur="5s"
                          repeatCount="indefinite"/>
   </path>
<circle cx="200" cy="0" r="300"
       fill="none" stroke="blue" stroke-width="1"  />
       
 <path d="M130 40
  A 50 50 0 0 0 170 40
 " fill="transparent" stroke="black" />
<!-- POINTS -->
 <circle cx="149" cy="0" r="2" fill="red"/>
 <circle cx="289" cy="265" r="2" fill="red"/>
 <circle cx="9" cy="265" r="2" fill="red"/>
</svg>