Slight typo - spurious ) after (max-min)
I think I see why you used a largeish triangle, a smaller one shows slight misalignment which I can't fix for all gauge sizes.
Happy to help but my skill level isn't up to the coding. I can opine on appearance though.
Some wild suggestions for widget settings, I have no idea if these could be made variable:
Adjustable border-radius 0 to 50%
Fasteners: rivets/slot head/square drive screws/none
Background image (texture): Choice of a couple of SVG images/none
Be able to show 360 degrees and hour/minute/second hands.
Should pointer(s) be an SVG image?
Various colour options.
A "backlight" layer that can be turned on to draw attention to a particular gauge.
Here's square drive screws (only really visible on 6x6 gauge):

.g-rivet::before {
content: '';
position: absolute;
left: 43%;
top: 50%;
width: calc(var(--container-size) * 8%);
height: calc(var(--container-size) * 8%);
box-shadow: inset 0px 1px 2px #222;
transform: translate(-50%, -50%);
border-radius: 0;
}
But really it's an amazing piece of design work already. Thanks hotNipi.