Spinel Layer Styling — Linear Gradients
Spinel’s Styling API is used to declare how layers are rendered.
The API supports a rich set of operators for defining richly rendered hierarchical compositions of layers.
These operators include:
- solid color fills
- gradient color fills
- blending modes
- soft masks
- coverage operations
- isolation groups
- knockout groups
Most of the previous posts on the blog have focused on the rendering
quality and performance of SVG 1.1 artwork. The majority of the
examples in the posts used solid color fills and the Porter-Duff
OVER operator.
Future posts will explore how the Styling API can compose these powerful operators in order to solve or simplify complex rendering problems.
This post will focus on the capabilities and performance of Spinel’s linear gradient color operator.
The linear gradient color operator supports the canonical set of styles:
- Non-repeating
- Repeating
- Reflecting
Here are the three linear gradient styles rendering 5 colors at 45 degrees with evenly-spaced stops:
Spinel’s linear gradient operator is very efficient and supports a large number of color stops with little impact on performance. This extreme performance makes it much more practical to use exotic pattern fill tricks.
As an example, here’s a GTX 980 rendering a 1K x 1K square with 292 evenly-spaced colors stops:
And here are 292 paired stops rendering 146 solid color stripes:
Here’s a video of Spinel rendering a variety of linear gradient styles at 4K on a GTX 980 with VSync on and the gradient transform vector rotating at a steady 60° per second:
(video removed)