Equilateral Triangle

Hypotenuse: 300px Short Side: 150px Height: √(300² - 150²)

Drawing an equilateral triangle requires a bit of math to calculate the 'height' of the triangle, which will allow us to figure out the y coordinate.

In this example, each side is 300 pixels in length. The equilateral triangle is composed of 2 similar right-angled triangles.

From Pythagoras we know the hypotenuse is the square root of the sum of the squares of the other 2 sides.

We have 2 sides of the right-angled triangle:

So the height (long side) of this triangle is √(300² - 150²), which is about 259.8.

Since our bottom side is placed at y=480, the apex y will be at 480-259.8 = 220.19. Recall that SVG coordinates start at the top-left (0,0).

<line x1="100" y1="480" x2="400" y2="480" stroke="#000" stroke-width="2"/>
<line x1="100" y1="480" x2="250" y2="220.19" stroke="#000" stroke-width="2"/>
<line x1="250" y1="220.19" x2="400" y2="480" stroke="#000" stroke-width="2"/>
<line x1="250" y1="220.19" x2="250" y2="480" stroke="#aaa" stroke-width="2"/>