Where The Wind Blows

Where The Wind Blows explores gradient maps and patterns on an unconventional canvas. It features the international maritime signal flags and a wild mix of color palettes and shapes. Some are high-contrast and playful while others are subdued and calm. Some are more realistic, staying true to the nautical theme.


  • 40 Sail patterns.
  • 12 Hull styles.
  • 12 Color styles, 3 of which have a random color combination for a wide range of outputs.
  • Inverted color styles.
  • Latitude, Longitude, and Heading values (for an unknown map 🧭🧐)

Nautical Day

Nautical Night

The Nautical style is the only style that includes the signal flags along with their own "Day" & "Night" palletes. Nautical styles are not affected by the colorInversion feature.


After looking at the many Nautical outputs, I realized I wanted to expand the styles and create some contrast against all the Nautical mints. So I added two other categories with other styles in them. These are the "RNG", and "Fixed" categories. Solstice, Dawn, and Dusk fall under the RNG category. The main goal with these were to create gradients that were more generative. Basically the primary and secondary colors are very flexible and can range from subtle pastels to more saturated colors.

The Solstice style is the only style that both the primary and secondary colors in the gradient-map have their own hues/brightness. Making it the style with most flexibility in color outputs.


In the Dawn style, the primary color is white. While the secondary color is similar to Solstice allowing it to vary in hue and brightness.


In Dusk the primary color is opposite of Dawn. Having the primary color as black we get outputs looking closer to Nautical's "Night" but still alowing the secondary to wander random hue/brightness.


As the name implies, the fixed category has a fixed color palette that only varies with the colorInversion option. Opposite from the other color styles the fixed style explores high contrast colors. This category splits the entire collection making a total of three different looks.

The goal in creating these three categories ("Nautical", "RNG", "Fixed") was not only to explore a vast range of outputs. But also to be able to resonate with a larger audience.


The above image is a preview of the possible non-nautical patterns. The patterns mechanic allows for it to be scaled and rotated within the script. So even if two collectors run into the same pattern the look itself would most probably be different.

svg.js acknowledgements & thanks