Geeking-out on SVG Graphics part-six

Project review

In this sixth and final part in the project I will be adding a couple of diagrams to the right-hand side of the cutting mat backdrop.

The original project was to create by hand and SVG image to use as a desktop backdrop. The image was inspired by the geometric information such as standard sizes (A3, A4, A5 ...) and standard angles seen on many hobbyists cutting mats. My idea was to show information that might be useful to a software engineer as part of the design.

In part one we prepared the background. A dark blue colour was chosen based on the mechanical engineer's marking fluid. I also defined the scope of what I was going to show.

Part two did not add a great deal but set the stage for the rest of the project by defining the grid on which the other graphics would be presented.

A small selection of screen resolutions along with projection lines to show their common aspect ratios were added in part three.

In keeping with the conventional cutting mat I added some standard angles along with their Sine values to the bottom-left corner of the mat in the forth part. These were extended in part five to include projections lines for four Aesthetic ratios.

I will release the cutting-mat SVG image at the end of each stage via my GitHub repo.

The Egyptian Triangle

I am sure this type of triangle is known by a variety of names and probably predates the Egyptians but this is the name I know it as. The special and aesthetically pleasing aspect of this triangle (at least for me) is its simplicity. Take a length of rope/cord and tie a knot at each end with another eleven knots in the rope to segment the rope in to twelve equal sections.

If you join the end knots and stretch it out to three points at the 4th and 8th knot and the connected ends, the resulting triangle will have two key features.

1. It will be a right-angle triangle.
2. The sides will have the lengths 3, 4 and 5.

The diagram I want to include will illustrate these features but will also show three similar triangles by splitting the largest triangle in two. The triangles will have sides that are multiples of 3, 4 and 5, as follows.

• Large: 15, 20, 25 = (3 x 5, 4 x 5, 5 x 5)
• Medium: 12, 16, 20 = (3 x 4, 4 x 4, 5 x 4)
• Small: 9, 12, 15 = (3 x 3, 4 x 3, 5 x 3)

My Vitruvian Coefficient (VC)

As promised at the beginning of this post, I will now explain my thinking behind the ratio I call the "Vitruvian Coefficient". It is based on Leonardo da Vinci's diagram called The Vitruvian Man where there are two representations of a man, one overlaying the other with arms and legs stretched out. Both figured are enclosed within a square and a circle with each figure touching the boundary of one or the other.

When I first saw the illustration many years ago a question formed in my mind, for which I have only relatively recently calculated an answer.

My query was, given a square and a circle of the same area, is there a relationship between their:

• borders (circumference v perimeter)
• width (diagram v side) But the answer was even more surprising than I was expecting.

If the area (A) of both shapes is 100m the dimensions of the square are:

• Side (S) = SQRT(A) = 10.0
• Perimeter (P) = 4 x S = 40.0

The dimensions of the circle are:

• Area = PI * R * R, therefore, SQRT(A / PI) = R
• Diameter (D) = 2 * SQRT(A / PI) = 11.28
• Circumference (C) = D * PI = 35.45

But the real surprise for me came when I went on to compare the outsides and the widths.

• Perimeter / Circumference = 40 / 35.45 = 1.128 (rounded down)
• Diameter / Side = 11.28 / 10 = 1.128

Both equations have the same result but there was a trick here. For the border ratio calculation we used the dimension of the square over the circle. For the width ratio we used the dimension of the circle over the square. Don't ask me why, I am not a mathematician, but when I worked the equations out by hand I found the approximate value 1.128 is confirmed to be 2/SQRT(PI).

Final refinement

I now have all the information I want on the backdrop but there is quite a bit of blank space around the outside and above the by-line text. A tweak of some of the numbers widens the graphics, moves up and left and reduces the overall height.

Last but not least, conventional cutting mats tend to have rounded corners and we can do that to the large blue rectangle use as a background.

That's all folks. Thanks for reading