Proportion-adjustable triquetra
The other week someone told me they were getting a triquetra tattoo (not hiding identities or anything, but I don't think there's a "send traffic here" place attached). After not recognizing the name, I recognized the description and realized I'd never really looked at one, at least not carefully. I probably should have, since it's common in nordic symbolism (in addition to, more famously, Celtic, and later Christian).Anyhow, once looking, my first thought was "that looks like it could be accurately defined by bezier curves". Looking for another few seconds, I corrected myself and thought "Actually, that's just three circle segments". I started looking a bit at the different variations and proportions, putting together little vector sketches and eventually some javascript.
So.. Here's an interactive triquetra. Below it is some more notes I wrote while (bit by bit) putting things together. Most of the settings are pretty obvious (unless I kept adding more stuff). Not all extremes will work together (to put it mildly), but tring to limit mal- or oddly functioning settings always seem to cut out lots of pretty cool ones too, so I mostly just stopped trying.
The static image above is a pretty short vector image. The entire file contains this:
<svg viewBox="0 0 22 22" width="3in"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 11,1 a9.9 9.9 0 0 0 9.8 17 9.9 9.9 0 0 0-19.6 0 9.9 9.9 0 0 0 9.8-17z"
fill="none" stroke="black"/>
</svg>
In other words roughly "Hi, I'm a simple vector graphics file. Draw three arcs here". When less approximated, crammed together, and on a larger grid, the path segment is something like:
<path d="M 110,20
a101,101 0 0 0 100,173
a101,101 0 0 0 -200,0
101,101 0 0 0 100,-173
z">
Meaning: Move to 110,20 (x,y). Draw part of a circle, radius 101 (the repeated 101 is because the SVG arc command actually draws ellipses - setting both radiuses to the same thing is equivalent to a circle) from there to +100,+173 realtive to that point. Again, -200,0 relative to where you wound up. Again, 100,-173. Close the curve.(Technmical aside: The zeros are, in order, how much to rotate the ellipsis (doesn't matter - it's a circle in this case), if I want the larger or smaller circle segment with these end points (I could draw the "opposite" part, leaving what's now drawn blank and drawing the whole rest of the circle instead) and finally if I mean the inward or outward curve (mirroring it along the line between the start and end point would also be a valid circle segment).)
If we drew lines instead of arcs between these, it'd make an equilateral triangle between the corners:
The only "magic number" here is 173, which is an approximation of 100* the square root of three. Since I chose to make it 200 wide here, it could be chopped into two right angled triangles:
Each of them would be 100 wide, and the diagonal (this being an equilateral triangle) is 200, so x*x+y*y=z*z becomes x*x+100*100=200*200, becomes x*x = (2*2-1*1)*(100*100), and x = sqrt(4-1)*100. This isn't such a big deal no a small screen, but scaled up enough it would start getting slightly squished. Traditionally, this would bother no one - on a non-grid surface the height is irrelevant and you can just turn it 60 degrees and measure again (or construct it with a compass).
Another not-magic but arbitrary number is the radius of our three pretend-circles the arcs are taken from. Changing it can make the arcs swoop over each other more or less:
Traditional drawings seem to tend toward either having the arcs peak at 1/2 the height of the triangle formed by the corners (what I chose as the original example, though I chose it arbitrarily on aestetics) or having the diameters be equal to the side of the triangle (making each arc exactly a half circle). That's far from always the case though - there's tons of other ratios. Having the arc-circle bigger than the triangle side and drawing the longer, more overlapping segment (as the last one above) seems very unusual though, and in the other direction going as sharp as the first seems rare too. Christian verisons seem to be slightly scewed toward the narrower, perhaps to accentuate the three fish-like shapes similar to the lone fish sometimes used along with or instead of the cross. They're also more likely to have an overlapped circle, like so:
The circle size doesn't seem to fit a firm geometry. These are placed so that the edge would fall approximately on an arc directly between the two corners, which started in the same direction as the sharper inward arcs.
I can't really think of a non-calculus trigonometry (besides a few "even" special cases) way to do that though, and they predate calculus. That could easily just be because I've had no reason to solve something similar without calculus. It could be approximated with compass/edge at least somewhat. Most historical cases aren't that super close though - it's probably just overactive pattern hunting on my part. Returning day after, I can confirm my earlier selfs suspicions. The obvious size is midway between the arc and the peak. Doh! For what it's worth, the super convoluted solution here does resolve to almost that..
It's a little hard to tell if the circle is a uniquely christian thing - the symbol itself was adopted very early and very successfully (understandable considering the pretty much as-is fish symbol and the trinity reference). In norse paganism, no record at all remains of what it may have referenced before, although it appears pre-christian runestones and on small Mjölnir charms (Thors legendary weapon) - by the time it's first mentioned in writing, it's already considered a christian thing. Celts apparently have something similar going on, but I don't follow it enough to know. Certainly the circle became much more common around the correct time, but that's also true for other aspects (including the symbol itself) that are clearly much older. Either way, it's a pretty nice addition.
If you want to follow the code inside the interactive version up top (I wouldn't call it elegant, but I'm at least not intentionally being hard to follow. Update: much of it is now utter chaos, the layering needs a ground up refactoring. It's pretty much out of "mostly useless, but it can have a few hours" alotment..) the main change here is that it's drawn onto a canvas rather than supplying a vector model. It's arc command (there's an arcTo, but unless you're making rounded corners it's easier to pretend there isn't) works with a centerpoint, a radius and two angles. To keep the math, and potential access to the end vector, still stick to basing it around three set corners, which then are converted to centers. To get more granual control over the shape, rather than adjust the radius I here adjust how far this imaginary center is offset from the side of the triangle (at 90 degree angle to each side), then rework that into an appropriate radius and cutoff angles, then move the whole shabam back into x/y again.
There are further splits for the various options and for overlapping, but all of them are fairly obvious.