Triangles are awesome and so are 3D shapes made out of triangles. Tetrahedron is an example of one such shape.
A tetrahedron is a polyhedron composed of four triangular faces, three of which meet at each corner or vertex. It has six edges and four vertices.
This little tool is based on Brent Jackson's tutorial: Building SVG Icons with React. It allows you to construct your own tetrahedron's and export them as SVG. The vertices are positioned using polar coordinates. You can modify their position, the colour of the segments/faces and even make the segments dashed.
<svg viewBox="0 0 320 320" width="320" height="320">
<g class="guidelines" style="fill:none;stroke:#FF4136;stroke-width:1;opacity:0.25;">
<circle cx="160" cy="160" r="160"></circle>
<circle cx="160" cy="160" r="110"></circle>
<circle cx="160" cy="160" r="60"></circle>
<line x1="160" y1="160" x2="21.435935394489803" y2="80.00000000000001"></line>
<line x1="160" y1="160" x2="79.99999999999999" y2="21.43593539448983"></line>
<line x1="160" y1="160" x2="160" y2="0"></line>
<line x1="160" y1="160" x2="239.99999999999997" y2="21.435935394489803"></line>
<line x1="160" y1="160" x2="298.5640646055102" y2="80.00000000000001"></line>
<line x1="160" y1="160" x2="320" y2="159.99999999999997"></line>
<line x1="160" y1="160" x2="298.56406460551017" y2="240"></line>
<line x1="160" y1="160" x2="240.00000000000006" y2="298.5640646055101"></line>
<line x1="160" y1="160" x2="160.00000000000003" y2="320"></line>
<line x1="160" y1="160" x2="79.99999999999999" y2="298.56406460551017"></line>
<line x1="160" y1="160" x2="21.43593539448986" y2="240.00000000000006"></line>
<line x1="160" y1="160" x2="0" y2="160.00000000000003"></line>
</g>
<g class="tetrahedron" transform="rotate(0, 160, 160)">
<path d="M 160 96 L 215.42562584220406 192 L 104.57437415779594 192.00000000000003 Z" fill="none" fill-opacity="0.25"></path>
<path d="M 160 96 L 215.42562584220406 192 L 160 160 Z" fill="none" fill-opacity="0.25"></path>
<path d="M 160 96 L 104.57437415779594 192.00000000000003 L 160 160 Z" fill="none" fill-opacity="0.25"></path>
<path d="M 160 160 L 215.42562584220406 192 L 104.57437415779594 192.00000000000003 Z" fill="none" fill-opacity="0.25"></path>
<line x1="160" y1="160" x2="160" y2="96" stroke="#001F3F" stroke-dasharray="4, 8"></line>
<line x1="160" y1="160" x2="215.42562584220406" y2="192" stroke="#001F3F" stroke-dasharray="4, 8"></line>
<line x1="160" y1="160" x2="104.57437415779594" y2="192.00000000000003" stroke="#001F3F" stroke-dasharray="4, 8"></line>
<line x1="160" y1="96" x2="215.42562584220406" y2="192" stroke="#001F3F"></line>
<line x1="215.42562584220406" y1="192" x2="104.57437415779594" y2="192.00000000000003" stroke="#001F3F"></line>
<line x1="104.57437415779594" y1="192.00000000000003" x2="160" y2="96" stroke="#001F3F"></line>
</g>
</svg>