How to draw the neuropride infinity

A detailed derivation of all the pieces and parts and math needed to assemble a pride-friendly infinity symbol, ready to be painted.

Text and opinions by Rick O.

If you're not into math and nerdy stuff, head back to the neuropride emoji pack.

Start with the basics

When I think of infinity, I think of balance and flow. Simple shapes with smooth transitions. For an infinity symbol, I start with two circles:

Figure 1: Two circles, touching.

Carve out the insides of the circles, to make them look like drawn rings. I like the balanced feel of having the inside circle one-third the size of the outer circle.

Figure 2: Two rings, touching.

Now the crossbars, which are tricky. There are two considerations here:

For balance, the thickness of each crossbar needs to match the thickness of the rings.
For flow, the crossbars need to exit each ring tangent to it.

One way to think about it is to add a bar between the centers, with the same thickness as a ring, and then rotate that bar around its center until each edge is tangent to the circles.

Figure 3: Crossbars rotating into place.

The trick is figuring out the correct rotation angle. It's time for some math!

Let's label some values:

t: The thickness of the rings and crossbars.
i: The radius of the inner circle.
b: The radius of the outer (bigger) circle.
s: The distance (spread) between the centers of the circles.

Figure 4: Labeling ring thickness and radii.

We already know some of the relationships between these values:

b = i + t

s = 2 b

s = 2 i + 2 t

Mind the gap

However, I also made an assumption at the beginning: I drew the initial circles touching each other. We might also consider a value g, the gap between the two circles.

Figure 5: Adding a gap.

This changes s, of course:

s = 2 i + 2 t + g

The gap could even be negative, to overlap the rings.

Figure 6: A negative gap makes the rings overlap.

If the gap g equals the thickness t, the rings overlap perfectly. This removes the need for crossbars.

Figure 7: Perfectly overlapping rings don't need crossbars.

For my taste, this is ... fine ... but I don't love it. I actually like the crossbars.

Angles and trig

So how do we calculate the angle of rotation for our crossbars? Let's start with one crossbar, and mark things up with some geometry. I'm going to zoom in a bit for clarity.

Figure 8: A triangle is inscribed between the center point between the rings, the center of one of the rings, and a point inside a ring, mid-thickness.

Which gives us:

c: the center line of the crossbar.
r: the rotation angle of the crossbar from horizontal.
p: a line segment from the center of one ring to the midpoint between the rings.
n: a radial from the center of ring to the center line of the crossbar, tangent to that center line.
m: the third leg of the mnp triangle, which runs along the center line of the crossbar to its center.
h: a vertical segment from the point where n meets the inside of the ring, down to p.
k: a segment parallel to m, starting at the hn intersection and running to p.

As the crossbar has thickness t, we can use it to calculate the length of radial n:

n = i + \frac{t}{2}

We know that hypotenuse p is one half total distance s, but can also be described with what we can see here:

p = i + t + \frac{g}{2}

Equation 1: p, the distance from the center of one ring to the midpoint between the rings.

Using trigonometry, angle r can then be described in terms of triangle sides p and n:

sin (r) = \frac{n}{p}

r = asin (\frac{n}{p})

r = asin (\frac{i + \frac{t}{2}}{i + t + \frac{g}{2}})

Equation 2: r, the angle of rotation between the crossbar and the midline

Remember that I chose the inner circle to have the same diameter as the ring thickness, the "balanced" choice, meaning:

i_{bal} = \frac{t}{2}

Only when the inner circle diameter matches the thickness.

Which simplifies our angle calculation (from Equation 2) to:

r_{bal} = asin (\frac{2 t}{3 t + g})

Equation 2b: Only when the inner circle diameter matches the thickness.

Kissing rings

When gap g is zero, this gets even simpler:

r_{kiss} = asin (\frac{2 t}{3 t})

r_{kiss} = asin (\frac{2}{3})

r_{kiss} ≊ 41.8°

Which, if you were to View Source and look at the SVG and CSS for those images, is the rotation value I used.

Linked rings

We know there are no bars needed for linked rings, but can we use it to show that our math checks out?

The gap g to make the rings perfectly overlap is the negative thickness t:

g_{link} = - t

Only for linked rings.

Which we can plug into our angle r_bal from Equation 2b:

r_{link} = asin (\frac{2 t}{3 t - t})

r_{link} = asin (1)

r_{link} = 90°

Only for linked rings.

That is, the crossbar would be vertical. In the next section, we could prove that means it would have zero length.

Crossbar length

How can we shorten the crossbars so they are exactly as long as they need to be? That is, we need to figure out m, which would be half the total crossbar length.

We know angle r (Equation 2) and hypotenuse p (Equation 1), so we can calculate m:

cos (r) = \frac{m}{p}

m = p cos (r)

m = (i + t + \frac{g}{2}) cos (asin (\frac{i + \frac{t}{2}}{i + t + \frac{g}{2}}))

m = (i + t + \frac{g}{2}) \sqrt{1 - {(\frac{i + \frac{t}{2}}{i + t + \frac{g}{2}})}^{2}}

Generalized m: half the length of a crossbar.

This is a mess, so we can use i_bal to simplify a little:

m_{bal} = (\frac{3 t + g}{2}) \sqrt{1 - {(\frac{2 t}{3 t + g})}^{2}}

Equation 4: Balanced m

We can eliminate g for kissing rings:

m_{kiss} = \frac{3}{2} t \sqrt{1 - {(\frac{2 t}{3 t})}^{2}}

m_{kiss} = \frac{3}{2} t \sqrt{\frac{5}{9}}

m_{kiss} = \frac{\sqrt{5}}{2} t

{length}_{kiss} = t \sqrt{5}

m for kissing rings.

We can see this when we take the crossbars and set them to that length, which makes the ends of the crossbars line up as radials for the rings:

Figure 9: Crossbars of the correct length for kissing rings.

For linked rings, we know we should end up with length zero. Let's see:

m_{link} = (\frac{3 t - t}{2}) \sqrt{1 - {(\frac{2 t}{3 t - t})}^{2}}

m_{link} = t \sqrt{1 - 1^{2}}

m_{link} = 0

Linked rings have no crossbars.

Yep, the math confirms this.

Make a path

We still need to convert the rings into arcs, to eliminate the little bits to the sides of the crossbars. This is where h and k from Figure 8 come in.

cos (r) = \frac{h}{i}

h = i cos (r)

tan (r) = \frac{i}{k}

k = \frac{i}{tan (r)}

k = i ⁢ cot (r)

To double-check our logic, we can also calculate k in terms of h:

sin (r) = \frac{h}{k}

k = \frac{h}{sin (r)}

k = \frac{i cos (r)}{sin (r)}

k = i ⁢ cot (r)

We end up in the same place, so the logic checks out.

Coordinate

Let's put up a grid so we can start expressing coordinates:

If we make the origin of the grid the midpoint between the rings, then we can just negate all our X and Y values for symmetry.
If we make i the unit value, the rings line up nicely.

Figure 10: Kissing rings with a grid where i is the unit value.

Let's zoom in so we can see the part we need to carve out. We can label the coordinates.

Figure 11: Close up of kissing rings with a grid where i is the unit value.

We still need three X and Y values:

q: to pair with ±h where the radial meets the crossbar.
u: where the crossbar edge meets the x-axis
v: where the crossbar edge meets the y-axis

The q x-value is just an offset from p based on trig from h or i — both get to the same result:

q_{x} = p - q_{off}

tan (r) = \frac{q_{off}}{h}

q_{off} = h tan (r)

q_{x} = p - h tan (r)

q_{x} = p - i cos (r) tan (r)

q_{x} = p - i sin (r)

Equation 5: q, the x-value where the crossbars meet the inner circle.

The u x-value follows the same logic:

u_{x} = p - u_{off}

sin (r) = \frac{i}{u_{off}}

u_{off} = \frac{i}{sin (r)}

u_{x} = p - \frac{i}{sin (r)}

Equation 6: u, the x-value where the long side of the crossbar meets the x-axis.

If you do this with real coordinates and a balanced layout, you'll find that u_off is exactly half of p. This makes sense when you look back at Figure 8, where i is half of t. But let's do the math to be sure:

u_{off} = \frac{i}{sin (r)}

sin (r) = \frac{n}{p_{bal}} = \frac{2 i}{p_{bal}}

u_{x:bal} = p_{bal} - \frac{i}{(\frac{2 i}{p_{bal}})}

u_{x:bal} = p_{bal} - \frac{p_{bal}}{2}

u_{x:bal} = \frac{p_{bal}}{2}

Technically, we'd also need to derive the coordinates for the point where the crossbar meets the outer edge of the ring. The derivation is the same, but there's an insight to be had: the values are triple what we got for h_off and u_off, thanks to the relationship between inner radius i and thickness t. I'll leave that proof as an exercise for the reader.

For the y-value v:

cos (r) = \frac{(\frac{t}{2})}{v}

v = \frac{t}{2 cos (r)}

v_{bal} = \frac{i}{cos (r)}

Equation 7: v, where the crossbar edge meets the y-axis.

Draw the rest of the infinity

We now have all the points we need to draw the infinity:

Figure 12: The complete infinity.

Those of you paying attention to the source will note that this is the first graphic to use arcs and not just circles and masks.

The right cross

The kissing rings infinity looks nice, but some folks may find that 42° rotation uncomfortable. Could we work out an infinity with a 45° rotation so the crossbeams were at right angles? Of course!

The angle makes the trig easier, because we know the sine and cosine of 45° are both $\frac{1}{\sqrt{2}}$ , or ≈0.707, while the tangent is 1.

Intuitively, we can see that the rings will need to get closer together to increase the rotation angle. That is, gap g will need to go negative.

Let's go all the way back to Equation 1 for p, the distance from the origin to the center of a ring:

p = i + t + \frac{g}{2}

For right angles, we can also solve for p with Pythagoras:

m_{right}^{2} + n_{right}^{2} = p_{right}^{2}

m_{right} = n_{right} = i + \frac{t}{2}

p_{right} = \sqrt{2 m_{right}^{2}}

p_{right} = \sqrt{2 {(i + \frac{t}{2})}^{2}}

p_{right} = \sqrt{2} (i + \frac{t}{2})

p_{right:bal} = t \sqrt{2}

Plugging this back into Equation 1:

t \sqrt{2} = i + t + \frac{g_{right}}{2}

t \sqrt{2} = \frac{3 t + g_{right:bal}}{2}

g_{right:bal} = t (2 \sqrt{2} - 3)

When we draw the crossbars with that gap:

Figure 13: Rings and an infinity with right crossbars.

There's not a ton of visual difference between the right infinity and the kissing infinity:

Figure 14: Comparison of right and kissing infinities on the same scale, and then with the same width.

The right infinity gets you ≈1.4% more infinity when fit to the same width as a kissing infinity with the same thickness. Ultimately, it comes down to personal preference.

Colorable

If we want to paint the infinity with more than one color we'll need to make some decisions about where the colors go. That is, how to break up the infinity into paintable shapes.

Note that there's no perfect answer for all cases — each approach will have different pros and cons.

Cocoa Bars

This strategy splits up the shapes into rings and crossbars, just like the math above. This gives the illusion that one crossbar goes over the other.

Figure 15: Cocoa Bars

This is easy to draw using the coordinates above, but doesn't have much balance between the colors. It might make sense if you intentionally want to treat the under color as an accent.

If we want better balance, we will need to do some math.

Canvas the area

Two candidates for balance come to mind: equal distance (along the infinity) and equal area (pixel coverage). We'll use the right infinity, as it makes the math easier.

We can use the Cocoa Bars to reason about the shape. There are two "c" rings, and two crossbars. The rings are just circle operations:

A_{circle} = π r_{circle}^{2}

A_{outer} = π {(i + t)}^{2}

A_{inner} = π i^{2}

A_{c_ring} = \frac{3}{4} (A_{outer} - A_{inner})

A_{c_ring} = \frac{3 π}{4} ({(i + t)}^{2} - i^{2})

A_{c_ring} = \frac{3 π}{4} (2 i t + t^{2})

A_{c_ring:bal} = \frac{3 π}{4} (t^{2} + t^{2})

A_{c_ring:bal} = \frac{3 π t^{2}}{2}

Equation 8: The area of a right c-ring.

Intuitively, this makes some sense: each ring has ≈4.7 t² (unit) areas. If the square around the big circle has an area of 9 units, then the big circle has ≈7 units. Subtract out the middle ≈0.8 units to get just above 6, and then cut a quarter off to get something ≈4.5. The napkin math is pretty close.

The crossbars are easier to reason about:

A_{rect} = {width}_{rect} \times {height}_{rect}

{width}_{bar} = t

{length}_{bar} = 2 m_{right} = 2 i + t

A_{bar} = t (2 i + t)

A_{bar:bal} = 2 t^{2}

Equation 9: The area of a crossbar.

But now you have to make a choice: do you double count the hidden portion of the crossbar "underneath"? If not, you'd need to remove the hidden square:

A_{bar:under} = A_{bar} - t^{2}

A_{bar:under} = 2 i t

A_{bar:under:bal} = t^{2}

We can now get the total area of an infinity:

A_{\inf} = 2 A_{c_ring} + 2 A_{bar} - A_{under}

A_{\inf} = 2 \frac{3 π}{4} (2 i t + t^{2}) + 2 t (2 i + t) - t^{2}

A_{\inf} = 3 π i t + \frac{3 π}{2} t^{2} + 4 i t + 2 t^{2} - t^{2}

A_{\inf} = (3 π + 4) i t + \frac{3 π + 2}{2} t^{2}

A_{inf:bal} = \frac{3 π + 4}{2} t^{2} + \frac{3 π + 2}{2} t^{2}

A_{inf:bal} = (3 π + 3) t^{2}

Equation 10: infinity total area, without the hidden square.

Checking the math, you have ≈12.4 t² units of area per infinity. You know that 3 of them are in the crossbeams (total), and each ring is ≈4.7 units, so this seems reasonable.

Go the distance

Alternatively, we could calculate the distance along the middle of the infinity. It follows the same breakdown: two c-rings and 2 crossbars, one of which loses a unit from being behind.

The crossbars are easy:

d_{bar} = 2 t

d_{bar:under} = t

The rings are just $\frac{3}{4}$ the circumference around the circle through the middle of the ring:

d_{ring} = \frac{3}{4} π (2 i + t)

d_{ring:bal} = \frac{3}{2} π t

Add them together to get the total distance around the loop, minus the hidden part:

d_{\inf} = 2 d_{ring} + 2 d_{bar} - d_{bar:under}

d_{\inf} = \frac{3}{2} π (2 i + t) + 4 t - t

d_{\inf} = 3 π i + \frac{3 π + 6}{2} t

d_{inf:bal} = 3 π t + 3 t

That puts the full distance at ≈12.4 t unit lengths. Hey! That's basically the same as the area in units!

Practical measurement: trisect

As the distance and area units have the same scalar value, we can use either. The distance measure is a little easier, as it means we can divide up each ring along its 270° of coverage.

As an example, say we wanted to tri-color an infinity to give each color the same representation — a fair trisect. We'd take that ≈12.4, divide by 3 to get ≈4.1, giving us the distance around the infinity for each color.

We could take 3 from painting both crossbars the same color, leaving us ≈1.1. We'd then need to split that across the 4 arms of the crossbars, meaning ≈0.3 per arm.

We know that each c-ring has a distance of ≈4.7 along it. If we took 0.3 from each c-ring, that would be ≈6.4%, which across 270° would shave ≈17° from each end. We'd end up with:

Figure 16: Cocoa Bars (first) versus a fair trisect (second)

It makes a noticeable difference!

Another option might be to remove the "under" color altogether, and elongate the "over" evenly.

Figure 17: No-under

This has a nice active feel to it, like it's rolling forward.

The system

Ultimately, all of these layouts follow the same system, no matter how many colors there are.

Given the c-rings and crossbars, and their extreme points, with i/o for inner/outer, t/b for top/bottom, and l/r for left/right.

Figure 18: Starter c-ring and crossbar points
Pick a starting point along the midline, and initial direction. It doesn't have to be at one end of a shape, but that makes the math easier.

Figure 19: Starting point and direction.
Given some number of colors c_n, and optional weights w_1...n, figure out how far each color should travel:
$d_{equal} = \frac{d_{\inf}}{{color}_{count}}$ $d_{weighted} [i] = d_{\inf} \frac{w_{i}}{w_{total}}$
For each shape, if the distance remaining to travel (starting at d) is greater than the distance across this shape, then subtract this distance from the remaining and go to the next shape. Otherwise, stop at this one.
```
let remaining = d
for shape in shapes_to_paint:
    if shape.length < remaining:
        remaining = shape.length
        continue
    # otherwise ...
```
When stopped, calculate how far into this shape to travel:
```
    partial = remaining / shape.length
```
Paint along the shape according to its type. For c-rings, paint arcs with given mid-length. For crossbeams, paint rectangles.
Repeat until the color is painted, and then repeat for the rest of the colors.

Conclusion

Congrats on making it to the end! You now know as much about this as I do. I hope it inspires you to do something fun and creative.