Generate Large Upward Pointing Triangle From Existing Code Using SVG

I am using the following code from Tympanus to generate a big downward pointing triangle. What I am trying to do is use the same technique to generate a big upward pointing triangl

Solution 1:

You can easily do that understanding the line commands in an SVG path.

What we have here:

<path d="M0 0 L50 100 L100 0 Z"></path>

Says:

Move to (0,0), make a line going to (50,100), make another line going to (100,0), close the path.

So, to invert the triangle, you just need:

<path d="M0 100 L50 0 L100 100 Z"></path>

Which basicaly says:

Move to (0,100), make a line going to (50,0), make another line going to (100,100), close the path.

Check the demo:

svg#bigTriangleColor {
    pointer-events: none;
}
.container svg {
    display: block;
}
svg:not(:root) {
    overflow: hidden;
}
#bigTriangleColor path {
    fill: #3498db;
    stroke: #3498db;
    stroke-width: 2;
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>

Solution 2:

You could just draw it upside down using a transform.

• translate moves it down (as it's now going to be drawn from the bottom to the top rather than top to bottom.
• scale inverts it in the y direction

svg#bigTriangleColor {
    pointer-events: none;
}
.container svg {
    display: block;
}
svg:not(:root) {
    overflow: hidden;
}
#bigTriangleColor path {
    fill: #3498db;
    stroke: #3498db;
    stroke-width: 2;
}

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
<path transform="translate(0, 102) scale(1, -1)" d="M0 0 L50 100 L100 0 Z"></path>
</svg>