Zebra Codes

How to Draw Concentric Triangles in a Shader

25th of September, 2025

A simple way to draw a triangle, or concentric triangles, in a shader.

Read more: How to Draw Concentric Triangles in a Shader

Given any point (u, v) in space, we wish to find the size of the triangle upon which that point lies. We can then use that size to draw the triangle.

We will define the size of the triangle as the distance between centre and the midpoint of each edge. The triangle is symmetrical about the y axis, with the horizontal edge on the bottom. The centre is at the origin, (0, 0).

  1. Calculate a as
    a = -v.
  2. Calculate b by rotating the edge to be vertical, then taking the horizontal part of the coordinate:
    b = rotate2d((abs(u), v), 90 - α).x
    where α is the angle between the base of the triangle and one side of the triangle.
  3. The size of the triangle is then the greater of a and b:
    size = max(a, b)

The size can then be used to daw the triangle:

  • To draw a filled triangle, colour any points where the size is less than a threshold.
  • To draw a triangular cutout, colour any points where the size is greater than a threshold.
  • To draw concentric triangles, colour any points where sin(size * frequency) > 0.

To make a non-symmetrical triangle perform step 2 twice, once with the angle of the left side and once with the angle of the right side.

To rotate, scale or translate the triangle: rotate, scale or translate (u, v) by the inverse of the effect required before performing this procedure.