
Textures.js is a JavaScript library for creating SVG patterns - bryanrasmussen
https://riccardoscalco.it/textures/
======
bane
Woah, take's me back to late 80s computing when colors were few but paint
programs all used to have patterns in them.

There's a really nice additive effect with patterns that can give a designer a
way to show combinations of things together in a way that color really can't
(bonus it's better for some visual impairments). For example, take a series of
lines for one value:

    
    
       \ \ \
        \ \ \
         \ \ \
    

and a series for another kind of value

    
    
         / / /
        / / /
       / / /
    

put them in the same visual space and simple add them together

    
    
       x x x
       x x x
       x x x
    

You can also add in vertical, horizontal lines and even line width (and even
line color over a baseline color) and you can encode a ton of different values
into a single graphical area.

~~~
agys
In heraldry colours can be 'encoded' with specific patterns.

[https://en.wikipedia.org/wiki/Tincture_(heraldry)](https://en.wikipedia.org/wiki/Tincture_\(heraldry\))

~~~
beaker52
Really interesting idea to be aware of, thank you.

------
bbx
I just want to say how clear and concise this documentation is. Having
examples alongside their code snippets is all you need to understand the
library.

------
rajangdavis
Previous discussions/posts:

[https://news.ycombinator.com/item?id=9224776](https://news.ycombinator.com/item?id=9224776)

[https://news.ycombinator.com/item?id=12399964](https://news.ycombinator.com/item?id=12399964)

I thought this was pretty awesome when I first saw it posted here, but
unfortunately haven't found a good use case for it yet.

Thanks for sharing this again, had been a while since I thought of this
library!

~~~
b0rsuk
Board games. Website design. When you start playing board games, you realize
how many colorblind people are there! They're everywhere. Modern boardgames
are usually designed to accommodate color blindness, but for example Race for
the Galaxy only now got a 2nd edition.

------
djabatt
This looks great. Now I need to figure out how create a quick project to use
this on. Reminds me of work from an Edward Tufte book:
[https://en.wikipedia.org/wiki/Edward_Tufte](https://en.wikipedia.org/wiki/Edward_Tufte)

------
b0rsuk
Once upon a time someone on HN posted about an old-school book describing
patterns for graphs. Very useful for SVG, for website design, for colorblind
people. I failed to bookmark it. Can someone help?? How to find that book?

~~~
brulard
This one?
[https://archive.org/stream/graphicpresentat00brinrich#page/2...](https://archive.org/stream/graphicpresentat00brinrich#page/2/mode/2up)

~~~
djabatt
This PDF is wonderful. Reminds me of Edward Tufte's work:
[https://en.wikipedia.org/wiki/Edward_Tufte](https://en.wikipedia.org/wiki/Edward_Tufte)

------
yowlingcat
Wow, I love this. A couple of interesting applications I could think of here:

\- structure preserving hash that automatically distributes categorical data
across buckets -- this would be great for dashboards; on the job, we have
dashboards with color coded dashboards but some of the colors are way too
close for comfort and make visual communication difficult

\- Halftoning for animation -- some of these seem like they'd be really neat
if applied towards either CG animation or stationary animation as an
alternative (or combined with) cel shading. I wonder if there's existing state
of the art here for doing this with shader computation?

------
GrantSolar
This is really neat - useful and beautiful. My only minor concern is that
thicker/thinner is ambiguous and my first thought would be that they carry out
the heavier/lighter functionality. Perhaps denser/sparser would have been more
appropriate?

------
jwillmer
Somewhat related I created a we component for CSS3 patterns:
[https://github.com/jwillmer/pattern-
component](https://github.com/jwillmer/pattern-component)

------
calineczka
As someone with colorblindness who often struggles with reading colors on
maps, this would be a lifesaver if used. I love it.

~~~
dgb23
I feel ignorant. I just found out that almost 1/5 of people have some form of
color blindness with 1/20 being the better known red-green type.

I guess one reason why people don’t talk about it much is that the color blind
have good strategies to deal with it? It must be confusing at times?

~~~
calineczka
I guess most people don't know what color blindness feels like. Obviously, I
can only speak for myself, so YMMV.

It's not that the colors are indistinguishable per se, always. They are hard
to distinguish under certain conditions such as:

a) size of the elements of the same color. If half my screen is in one color
and the other in different color, it's very easy to distinguish them and say
which one is what. If on the other hand you have just a few pixels, it's much
harder to say what color they are.

Recommendation for app devs: don't use only 1px red border to show validation
errors in forms. It's almost impossible for me to say that the border is red
and not black.

b) closeness to each other in terms of distance. Similar colors far away from
each other are easier to recognize vs when they are right next to each other
(like in the map).

c) Similarity between colors. If the colors are not used for scale, use very
distinctive colors. I always take my colors from:
[https://colorbrewer2.org/](https://colorbrewer2.org/) based on the use-case.
This has already been researched and it works.

d) movement. It does not help in recognizing colors.

These conditions don't occur that often in "real life" when walking, shopping,
etc. They are mostly annoying on screen and paper.

Regarding compensation techniques:

If it is not work related, I just don't bother and don't put any effort. There
is a cool map on reddit, and I can't read it because of the colors? My loss,
not gonna spend time on it.

My biggest pet peeve: sport team outfits. Sometimes certain teams play vs each
other and I cannot distinguish who is who. That is maddening. Why would you
play black vs red when white vs red would be 100x more distinguishable. There
should rules about minimal necessary contrast between the jerseys. I can't
watch some matches so I don't watch them. I like teams with blue, yellow,
white colors. Maybe that's why GSW is appealing to me :)

When I play FIFA with friends, I need to tell them which jersey variant to
choose so I can comfortably play and have some chances. You cannot do it
online games :( I wish I could select what I see on my machine. I wish there
was a setting to use artificial jerseys of high contrast. Or make my opponent
jerseys always black or always white and let me pick the clothing for my side.
There are some colorblind options in FIFA but I don't find them good enough.
They don't solve the problem fully.

If it is work related and I cannot decipher it, I will politely complain that
someone used colors only to encode some information and I cannot process it. I
will recommend to use something additional (words, borders, tooltips,
patterns, anything that makes sense).

I also notice that kind of issues when our engineers work on dynamic maps or
charts, and I try to bring it to people's attention. It's a lost battle in the
grand scheme of things, but I keep fighting.

I believe it's easier in big companies because the probability of having a
colorblind stakeholder is higher. In small teams (<= 7) you might not have a
single colorblind person who could share their perspective and point out the
problem.

I guess it works that way with everything: race, gender, translation and
localization, and other disabilities, but I can mostly comment on that one
thing.

~~~
dgb23
Thank you so much for sharing this!

------
houssem_fat
Perfect timing, i just started building a tool to create dynamic customized
charts without code. Thanks for sharing !

~~~
wes-k
Hey I'm working on this too! Nothing to show off yet except for this fun
animation I made when playing with the core engine:
[https://imgur.com/a/ELhwWo5](https://imgur.com/a/ELhwWo5).

Some existing projects you may want to check out:

* [http://data-illustrator.com/](http://data-illustrator.com/) (dead?)

* [https://charticulator.com/](https://charticulator.com/) (was dead, looks slightly alive now)

* [http://ddg.namwkim.org/](http://ddg.namwkim.org/) (dead?)

My inspiration came from Bret Victor's Drawing Dynamic Visualizations (1).
Though I'm taking a slightly different approach. Brett’s data is declarative,
but drawing is procedural (in steps) where mine is all declarative. I think
Brett's approach is more powerful but doesn't lend itself as nicely to normal
vector drawing UX.

1:
[http://worrydream.com/DrawingDynamicVisualizationsTalkAddend...](http://worrydream.com/DrawingDynamicVisualizationsTalkAddendum/)

------
davidhyde
Why show png's instead of svg's on the webpage when the tech is all about svg?
Otherwise, great library! Just thought that it's a missed opportunity to show
everyone how awesome svgs are.

------
ornel
This is fantastic. Textures are an excellent alternative for quantifying
things in cartographic maps and to reduce the often distracting use of color.
I wonder how these patterns would perform if imported into Inkscape, which in
my experience becomes painfully slow when too many patterns are used.

~~~
Lorin
They're a great alternative for color in more general cases as well,
especially for material with accessibility concerns!

------
lukemichals
I made an observable notebook if anyone is interested in playing around with
it: [https://observablehq.com/@michals2/textures-js-
sandbox](https://observablehq.com/@michals2/textures-js-sandbox)

------
willio58
I've had this site bookmarked since 2018, all of the comments on the great
design just go to show how far simple and concise execution can take a site,
still looks brand new.

------
rcarmo
This is lovely. Just lovely. Reminds me of the Postscript hacks we used to do
with early Apple laser printers, back when they were the most powerful
computers they shipped. :)

------
wjdp
Very nice, really like this visual style.

Was a bit disappointed that the Italy and US maps were just PNGs. Can these
not be rendered in browser?

------
wilsonbright
Wow. It's so good to eyes. Can this also be used as a background on the
website? Would it be a good option?

------
sbarre
This is very cool...

I wish there was a better explanation of the formula for defining your own
pattern (the last example).

~~~
kroltan
It's just a path command string: [https://developer.mozilla.org/en-
US/docs/Web/SVG/Tutorial/Pa...](https://developer.mozilla.org/en-
US/docs/Web/SVG/Tutorial/Paths)

Mixed with some string interpolation: [https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Refe...](https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Reference/Template_literals)

~~~
1wheel
And if you're using the pattern element, you can drop in any svg element.

[https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/pat...](https://developer.mozilla.org/en-
US/docs/Web/SVG/Element/pattern)

------
lappet
It is not clear to me how you can create maps with this.

------
jamesharrington
This just screams dnd map builder thing :)

------
InnerGargoyle
add it to javascripting.com's database.

------
seanbsamson
This too good!

------
FailMore
So nice

