How to Gradient When You Can't

While this topic isn’t anything new (the asset in question is probably a decade old) I never shared a dirty little secret about some of our symbolic assets.

UI icons in GNOME are to a major extent monochrome. They behave like text and can be rendered with various foreground colors depending on context. In a small subset of icons we use partially shaded elements. Those are done as a solid fill as well, but lowered opacity. Then can still remain recolorable at runtime.

What we don’t have is the ability to draw a gradient that remains recolorable, because we’d need more somphisticated machinery to rewrite the stops of the gradient definition. Or can we? Unless you’re reading this on Planet or in your fancy RSS reader, you can see the spinner we’ve been using for well over 7 years now:

It actually isn’t filtered particularly well in Firefox, but is nice and clean in gtk. Firefox amplifies one of the big downsides of this method, it’s quite prone to moiré. If you hover over the spinner, it reveals the nasty hack how the fade to transparency has been achieved.

Let me show you how it’s done in Inkscape. The UI is a bit of afterthought, but you can make actual objects follow a path.

• The first step will be to create our spinner in its linear form. Create a rectangle, convert it into a shape with Ctrl+Shift+C and subdivide one of the sides a couple of times using the Add Node button in the context menubar.
• To create the etch-gradient, select every even node on the side and move them horizontally.
• Next step is to create the curve this object will follow. The easiest is to use the Ellipse primitive and only make it go along around 270deg rather than a full circle.
• Now onto the magic. Putting shapes onto curves is done with a pattern along curve path effect found in the path menu. Despite the odd terminology, path effects can be previewed in real time and working with them is much easier than filters. Setting the source shape can be done multiple ways, but I found pasting from clipboard the easiest. If the source object is actually on canvas, the shape will remain linked and editing the source shape will result in the path effect updating on the target curve in real time, allowing iteration into perfection.

I bet there is a filter that can produce halftoning out of a gradient, but who’s brave enough to spend an evening in the filters menu.

The best thing about the spinner is that Software is now getting a lot less of it. Phillip & Milan, thank you.