Devlog:Compass Roses Redux
September 9, 2026
As mentioned in the last post, I converted the single compass design from CSS borders to CSS clip-paths and then finally to SVG. I was pleased enough with the results to follow up with some additional vector designs. I'd always intended that the compass rose should be configurable, and the SVG method made it easy to layer multiple vector versions into one file and use CSS to control visibility. I wound up with a half dozen versions that I'm calling rock, rose1, rose2, grid1, grid2, and map. The chief difference between the two rose and grid versions is how they handle up/down/in/out buttons. As it turns out there's no really good way to add up/down/in/out to a compass rose, because they exist in different planes. Of course there's the Legend Entertainment solve of putting the four buttons beneath the rose, so I built those. I also wanted to make something more designerly, which is more visually consistent but may be less intuitive. Finally I did a pass for accessibility colors across the three built-in color themes.
