Devlog:Compass Roses

My descent into widgets eventually lead me back to compasses. The little statusbar compass rose has been a functioning thing for years, and I'd also made a larger version of it that could be plugged into widgets. But, I built it using kind of a hacky CSS trick – all the triangles I use for directional arrows were made using a CSS border trick, and each arrow in the rose required unique CSS properties. It worked well enough and I never had any problems with it, but diving deeply into it again, I found the CSS overly complicated, especially with an eye toward making it editable for authors, and I was sure that it could be simplified.

SVGs were the obvious solution, but I've been trying to avoid using assets that live outside of the core HTML/CSS code. So I looked to clip-paths, which are basically a form of vector drawing in HTML. But they're limited. I built a functioning compass with them - two, actually, each with different designs – but I didn't like the limitations the method placed on visual design. I was sure that authors would want to customize these, and the clip-path version just wasn't flexible enough.

Along the way I had built both of these compasses in Adobe Illustrator in order to convert the vector geometry to clip-paths, so I already had SVGs ready to go, and I finally pulled the trigger. The SVGs are inline and can be styled with CSS – and with considerably less CSS than the original border-hack versions. Overall I think it's a win.