Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Polygon

<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="0,0 100,50 50,100" style="fill:#2ABFB5;stroke-width:3" />
</svg>

Polygon

Square

<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
  <polygon points="50,0 100,0  100,50  50,50" style="fill:#2ABFB5;stroke-width:3" />
</svg>

Square

Hexagon

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <polygon points="
    150,15
    258,77
    258,202
    150,265
    42,202
    42,77
  " style="fill:#2ABFB5;stroke:black;stroke-width:3" />
</svg>

Hexagon

5-pointed Star

<svg width="220" height="228" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="white" stroke="black" stroke-width="1" />
  <polygon points="
    110,20
    50,208
    200,88
    20,88
    170,208
    "
    fill="#2ABFB5"
    stroke="black"
    stroke-width="3"
    />
</svg>

   <!-- fill-rule="evenodd" -->


5-point star

Star of David which in Hebrew is called the Shield of David

This one is built of 2 triangles of equal sides that can be drawn using 2 polygon. There is some basic math behind the triangles to calculate the height of the triangle. Some more math to place the two triangles on top of each other.

I've added a rectangle around it to make it stand out.

<svg width="220" height="249" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="white" stroke="black" stroke-width="1" />
  <polygon points="
    10,66
    210,66
    110,239
    "
    fill="none"
    stroke="#0038b8"
    stroke-width="10"
    />

  <polygon points="
    10,183
    210,183
    110,10
    "
    fill="none"
    stroke="#0038b8"
    stroke-width="10"
    />
</svg>
<!--height is 4 width is 2*3 =6 -->

<!--

173 full height
17+x+y+x = 253
2x+y = 236
x+y=173
x = 63
-->

Star of David