Cooler booster

I've come across a few mentions of the Cool S on the Fediverse these days, including mentions of there being a proposal to add it to Unicode (here's a thread, for example).

It's interesting that for some reason I keep forgetting what the “cool S” even is, and rediscovering when it gets mentioned, but this time I decided to do something about it: make an SVG of it, or actually three, in three different orientations:

The reason I did it is not because I actually cared particularly about committing it to memory, but because I suddenly realized that this might actually be a candidate to replace the “share on the Fediverse” symbol I'm currently using.

There's a bit of a backstory here: when I first added tootpick to the Wok, I looked for SVG icons for the “circular arrows” symbol used e.g. in Mastodon and several other Fediverse platforms for the “boost”, or in the now defunct Twitter for the “retweet”. I did find a few, but they were frustratingly complex.

Then I discovered that there is, in fact, a Unicode character just for that: codepoint U+1F501, to be optionally paired with the variation selectors U+FE0E for the “textual” representation and U+FE0F for the “icon” representation, that, if the font used by your browser supports them, would look something like this (enlarged to 250%):

🔁︎ 🔁️

So I decided to roll my own SVG that simply … showed the corresponding Unicode symbol in “textual” form. Leaving aside a couple of “oopses” that I've actually fixed just now as I was writing this article, there were actually a few issues with my choice, ranging from actual availability of the character in the font used by the reader's browser, and the potential inconsistency in metrics between different fonts: and I could actually see this on my local tests, in the difficulty of properly aligning the symbol with the adjacent text when used inline (e.g. at the end of each article) and even more catastrophically in the highly pixelated rendering that I would see in Blink-based browsers (Chromium, Vivaldi).

Ultimately I decided not to waste any more time on it (the overall aesthetics of the Wok has a lot of room for improvements anyway), but the “cool S” discussions got me thinking about the issue again: switching to a design for the “share” link based on this symbol would have several advantages: easily described by vector graphics, it would ensure more consistent rendering without the complexity of the circular arrow designs, solve the issue of potentially missing fonts, all while offering a more original visual representation.

(The latter may not necessarily be a point in favour, since “more original visual representation” also means “user has no idea what it means”. It'll probably depend on the final design.)

I don't think there's much need to explain why the “cool S” design is attractive, (I mean, just the fact that it's called that way is telling), but there's a few aspect in particular that make it particularly appropriate for the application at hand.

For starters, it's an S, which is appropriate for the icon of sharing (at least, in English; for Italian, a C-based design would possibly be more appropriate).

Second, it has a chain-like shape, that is probably best appreciated when looking at the slanted version side-by-side with the SVG icon I designed for my permalinks:

And thirdly, in its 90-degree configuration it has the upside of being similar to the symbol for infinity (and in fact, I'm leaning towards this form as the basis for the new “share to the Fediverse” symbol).

Despite all that, I haven't actually designed yet the new “sharing” symbol, so you can expect a “part 2” of this article coming sooner or later. And the reason why I haven't actually designed the new symbol yet is that I got sidetracked by a remark in the Wikipedia article about the “unknown origin” of the Cool S, because to me it just looks like the simplest “closed form” you can have from the simplest “braid pattern” that children learn (possibly as far back as kindergarten, depending on the quality of the school system).

So, as I mentioned, I got sidetracked, because I felt the need to prepare a few more SVGs, one for the single “crossing” in the braid pattern:

and the second, which actually took considerable time, to represent a simple “braided frame” like the one children would be taught to draw:

This particular one took longer than I would have liked, because I couldn't get the corners right. I'm still not satisfied with the results, but I haven't seen suggestions for better ones (that I could make work), which I suspect is due to the combination of limited number of threads (just 2) and tight spacing that prevents some of the fancier stuff possible with Celtic knots due to the reduced “legibility”, and all things considered, after mucking around with some alternatives, this remains the better one in my perception: there is still some crossing at the corners, and the thread “cutting through” alternates, so that each thread has a pair of opposite corners.

I doubt I will ever get anything useful out of these efforts, although the frame could find interesting uses as a border-image for pictures or paragraphs as demonstrated here (OK, I cheated a bit, for the border of this paragraph I used an even more compact version of the frame specifically designed to be used as border-image, with shorter sides to simplify rounding), but who am I to pull away from an opportunity to waste some time drawing SVG by hand?

(Hey, the output is not so bad, maybe I should consider a variant for the “horizontal rule” hr element too, using the 90-degrees “cool S” as basis? Not bad, not bad at all, look at the one following this paragraph!)

But let's go back to the “cooler booster” symbol. Aside from the sidetracking, there's more to my delay of the new symbol, including the fact that there's a number of ideas that I don't know if or how to incorporate.

For example, I'm tempted to add a couple of inner wedges in the “straight” parts of the “cool S” as a callout to the circular arrows design. But maybe it would be too much? Or make the “cool S” pattern less obvious? Or make it look like some rails company?

Another thing I would like to be more prominent about is the relation to the Fediverse (and not just Mastodon). This might entail incorporating the proposed Fediverse logo1, or at least the simpler asterism (three asterisks in a triangular pattern) that has been recently proposed and that, if the font used by your browser supports it, would look something like this (enlarged to 250%):

⁂

Again, the big question is if this can be achieved without too heavy a burden (visually: as I'm mentioned plenty of times here, I don't mind the SVG coding, although it may mean that things get done over longer timespans.)

And most of all, if I can incorporate those elements without killing the whole design under its own weight. All things considered, as good as I may be at the technical side of web design, my ability in actually thinking up good designs remains in question.